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

发布时间:2019-06-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了利用angular4和nodejs-express构建一个简单的网站(六)—用户模块和路由分析脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

上一节解决了用户注册和登录数据部分的内容。这一节开始分析用户模块、用户路由。## 用户管理模块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构建一个简单的网站(六)—用户模块和路由分析全部内容,希望文章能够帮你解决利用angular4和nodejs-express构建一个简单的网站(六)—用户模块和路由分析所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。