上一节解决了用户注册和登录数据部分的内容。这一节开始分析用户模块、用户路由。## 用户管理模块UserModule分析 ##
UserModule主要代码如下:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import { UsersComponent } from './users/users.component';
import { UsersRoutingModule } from './users-routing.module';
import { HomeComponent } from './home/home.component';
import { RegistComponent } from './regist/regist.component';
@NgModule({imports: [CommonModule,FormsModule,ReactiveFormsModule,UsersRoutingModule,],declarations: [UsersComponent,LoginComponent,HomeComponent,RegistComponent,]
})
export class UsersModule { }

import数组中,CommonModule:是构建子组件必须引入的模块。用户登录控件(LoginComponent)使用了模板驱动表单,需要导入FormsModule,用户注册组件(RegistComponent)使用了响应式表单,需要导入ReactiveFormsModule,用户路由模块UsersRoutingModule主要代码如下:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';import { LoginComponent } from './login/login.component';
import { UsersComponent } from './users/users.component';
import { HomeComponent } from './home/home.component';
import { RegistComponent } from './regist/regist.component';
const usersRoutes: Routes = [{path:'',component:UsersComponent,children:[{path:'', component:HomeComponent},{path: 'login', component: LoginComponent},{path:'regist',component:RegistComponent}]},];
@NgModule({imports:[RouterModule.forChild(usersRoutes)],exports:[RouterModule]
})
export class UsersRoutingModule{}

当进入主页(localhost)时,因为AppRoutingModule中直接重定向到users,所以直接进入到了users的路由,进入users路由后,直接加载了users模块的UsersRoutingModule,当路由为''时,加载UsersComponent组件,UsersComponent组件只有一个路由插座标签:

<router-outlet></router-outlet>

所有users模块的组件都要在这对标签中呈现。他的子路由包括

 {path:'', component:HomeComponent},{path: 'login', component: LoginComponent},{path:'regist',component:RegistComponent}

所以,最终的初始页面为HomeComponent组件的模板内容:

<p class="lead"><a class="btn btn-primary btn-lg" name="login" triggers="manual" #login="ngbPopover" placement="left" (mouseenter)="showPopver($event)"(mouseleave)="closePopover($event)" [routerLink]="['login']" ngbPopover="Please login first" role="Login">Login</a><a class="btn btn-warning btn-lg" #regist="ngbPopover" placement="right" (mouseenter)="showPopver($event)" (mouseleave)="closePopover($event)"[routerLink]="['regist']" name="regist" data-toggle="tooltip" ngbPopover="Please regist a user"  role="regist">Regist</a></p>

在这个模板中的两个链接标签中,分别提供了导航到登录和注册路由的routerLink:

  • [routerLink]="['login']
  • [routerLink]="['regist']"

当点击Login标签时,根据路由定义直接跳转到LoginComponent组件,进行用户的登录操作。
当点击Regist标签时,根据路由定义直接跳转到RegistComponent组件,进行用户的注册操作。

利用angular4和nodejs-express构建一个简单的网站(六)—用户模块和路由分析相关推荐

  1. 利用angular4和nodejs-express构建一个简单的网站(九)—用户登录

    最近工作比较忙,一直没有更新文章.原来看别人的文章感觉很过瘾,现在自己写才发现,要坚持下去真的很难.好了,废话少说,继续吧! 这一章主要讲利用angularJs控制用户登录.在前面的用户注册表单中使用 ...

  2. python推荐系统-利用python构建一个简单的推荐系统

    摘要: 快利用python构建一个属于你自己的推荐系统吧,手把手教学,够简单够酷炫. 本文将利用python构建一个简单的推荐系统,在此之前读者需要对pandas和numpy等数据分析包有所了解. 什 ...

  3. 基于python的系统构建_利用python构建一个简单的推荐系统

    摘要: 快利用python构建一个属于你自己的推荐系统吧,手把手教学,够简单够酷炫. 本文将利用python构建一个简单的推荐系统,在此之前读者需要对pandas和numpy等数据分析包有所了解. 什 ...

  4. python推荐_利用Python构建一个简单的推荐系统

    原标题:利用Python构建一个简单的推荐系统 摘要:快利用python构建一个属于你自己的推荐系统吧,手把手教学,够简单够酷炫.在此之前读者需要对pandas和numpy等数据分析包有所了解. 什么 ...

  5. 如何构建一个简单的语音识别应用程序

    "In this 10-year time frame, I believe that we'll not only be using the keyboard and the mouse ...

  6. 基于ForkJoin构建一个简单易用的并发组件

    2019独角兽企业重金招聘Python工程师标准>>> 基于ForkJoin构建一个简单易用的并发组件 在实际的业务开发中,需要用到并发编程的知识,实际使用线程池来异步执行任务的场景 ...

  7. LabWindows_CVI测试技术及工程应用_学习笔记1(构建一个简单的程序)

    构建一个简单的程序 1.创建工程文件 或File--〉New--〉Project(*.prj),默认名Untitled.prj,存储在Unititled.cws的工作空间中 File--〉Save U ...

  8. 通过python 构建一个简单的聊天服务器

    构建一个 Python 聊天服务器 一个简单的聊天服务器 现在您已经了解了 Python 中基本的网络 API:接下来可以在一个简单的应用程序中应用这些知识了.在本节中,将构建一个简单的聊天服务器.使 ...

  9. 知识图谱实战应用11-基于py2neo构建一个简单的问答功能

    大家好,我是微学AI,今天给大家介绍一下知识图谱实战应用10-基于py2neo构建一个简单的问答功能,利用知识图谱来实现智能的问答功能.知识图谱是一种用于表示实体之间关系的图形化模型,它是人工智能和自 ...

最新文章

  1. 边缘计算技术发展与对策研究
  2. Struts访问web元素
  3. STM32的IIC应用详解3
  4. 计算机视觉的发展历史
  5. 深度学习核心技术精讲100篇(二十七)-如何利用NLP技术对ASR的query文本进行预处理纠错?
  6. Android 监听手机GPS打开状态
  7. 8.36人一次搬36块砖,男搬4,女搬2,两个小孩抬一块,要一次搬完。问:男、女、小孩各多少?
  8. 高考610考哪个计算机学校,2019年高考成绩610分_615分左右能报考上什么学校 文科理科大学名单推荐...
  9. C++STL与泛型编程__侯捷视频_学习博客_总目录
  10. Linux: wget 使用技巧
  11. 访问数据库需要注意的问题 c#
  12. Python使用折线图、柱状图、热力图比较不同班级相同学号学生的成绩
  13. mysql查询时传入中文时的乱码问题
  14. js-JavaScript高级程序设计学习笔记1
  15. 编程中的那些容易迷糊的小知识
  16. 【OOM】GC overhead limit exceeded
  17. Setup Factory制作程序exe安装包-软件打包360浏览器及串口驱动
  18. java resource注解,Spring依赖注入—@Resource注解使用
  19. 1 - 整洁代码 - 代码整洁之道
  20. [JZOJ5629]【NOI2018模拟4.4】Map

热门文章

  1. async和await结合读取文件
  2. vue 路由跳转并打开新页面
  3. java解析静态AIS原始数据
  4. Chrome 键盘快捷键(Mac)
  5. [转载]Token原理以及应用
  6. 容器间通信的三种方式 - 每天5分钟玩转 Docker 容器技术(35)
  7. nagios报Connection refused by host的解决办法
  8. 关于内核页表和进程页表的一个问题
  9. scala学习手记26 - 重用函数值
  10. Sql Server系列:存储过程