模块代码分析

模块基本代码如下：

import { NgModule } From '@Angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { Birthdayscomponent } from './birthdays/birthdays.COMponent';
import { BirthdayListComponent } from './birthday-list/birthday-list.component';
import { BirthdayRoutingModule } from './birthday-routing.module';
import { BirthdayService } from './birthday.service';
import { BirthdayDetailComponent } from './birthday-detail/birthday-detail.component';
import { AuthGuardService } from '../auth-guard.service';
import { AuthInterceptor } from '../auth-interceptor';
@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    BirthdayRoutingModule
  ],
  PRoviders:[
    BirthdayService,
    AuthGuardservice,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi:true
    }
  ],
  declarations: [BirthdaysComponent, BirthdayListComponent, BirthdayDetailComponent]
})
export class BirthdaysModule { }

在模块代码中除了作为子模块必须的导入的CommonModule模块，还导入了ReactiveFormsModule,BirthdayRoutingModule两个模块，ReactiveFormsModule模块用于编辑用户信息的提交表单，基本用法和用户注册的表单相同，BirthdayRoutingModule模块用于设置路由。
在Providers中提供了BirthdayService、AuthGuardService和一个HTTP请求拦截器，分别用于提供数据服务、路由守卫服务和HTTP拦截服务。
在这个模块下共有三个组件：BirthdaysComponent、BirthdayListComponent、BirthdayDetailComponent。
下面开始逐项进行分析。

路由

路由模块BirthdayRoutingModule负责整个Birthdays模块的全部路由。代码如下：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BirthdaysComponent } from './birthdays/birthdays.component';
import { BirthdayListComponent } from './birthday-list/birthday-list.component';
import { AuthGuardService } from '../auth-guard.service';
import { BirthdayDetailComponent } from './birthday-detail/birthday-detail.component';
const birthroutes: Routes = [
    {
        path: 'birthday',
        component: BirthdaysComponent,
        canActivate: [AuthGuardService],
        children: [
            { path: '', component: BirthdayListComponent },
            {
                path: ':id',
                component: BirthdayDetailComponent
            },
            {
                path:'new',
                component:BirthdayDetailComponent
            }
        ]
    },
];
@NgModule({
    imports: [RouterModule.forChild(birthRoutes)],
    exports: [RouterModule]
})
export class BirthdayRoutingModule {}

当地址导航到localhost:4200/birthday时，首先加载BirthdaysComponent控件，BirthdaysComponent控件只要提供一个路由插座和用户的注销操作。
BirthdaysComponent代码比较简单：在这里直接给出htML代码和类代码
html代码：

控件类代码：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { JumbotronServive, Jumbotron } from '../../jumbotron.service';
import { AuthTokenService } from '../../authtoken.service';
@Component({
  selector: 'app-birthdays',
  templateUrl: './birthdays.component.html',
  styleUrls: ['./birthdays.component.css']
})
export class BirthdaysComponent{
  constructor(
    private jumbServ: JumbotronServive,
    private tokenServ: AuthTokenService,
    private router: Router) {
    jumbServ.setJumbotron(new Jumbotron('Friends', '', ''));
  }
  logout() {
    this.tokenServ.setToken(null);
    this.router.navigate(['/']);
  }
}

当点击Logout按钮时，执行logout()函数，清空保存在本地的认证信息，并导航到首页。
...
<继续路由分析>
birthday路径下有三个子路由，分别为："空"，对应BirthdayListComponent组件。":id"和"new"，对应同一个BirthdayDetailComponent组件，当导航到"new"路径时，[routerLink]="[0]"，":id"的routerLink为具体的id。
这一篇先暂时写这么多，下一篇主要介绍三个主要的服务提供程序。敬请期待......