发表于: 2017-05-29 23:22:58

1 971


今天完成的事情:

       

建立routing的步骤:

由于我们要以路由形式显示组件,建立路由前,让我们先把src\app\app.component.html中的<app-login></app-login>删掉。


1.在src/index.html中指定基准路径,即在<header>中加入<base href="/">,这个是指向你的index.html所在的路径,浏览器也会根据这个路径下载css,图像和js文件,所以请将这个语句放在header的最顶端。


2.在src/app/app.module.ts中引入RouterModule:import { RouterModule } from '@angular/router';


3.定义和配置路由数组,我们暂时只为login来定义路由,仍然在src/app/app.module.ts中的imports中


imports: [

  BrowserModule,

  FormsModule,

  HttpModule,

  RouterModule.forRoot([

    {

      path: 'login',

      component: LoginComponent

    }

  ])

],


      什么叫forRoot?因为这个路由定义是应用在应用根部的,参数看起来是一个数组,每个数组元素是一个{path: 'xxx', component: XXXComponent}这个样子的对象。这个数组就叫做路由定义(RouteConfig)数组,每个数组元素就叫路由定义。路由定义这个对象包括若干属性:


  • path:路由器会用它来匹配路由中指定的路径和浏览器地址栏中的当前路径,如 /login 。
  • component:导航到此路由时,路由器需要创建的组件,如 LoginComponent 。
  • redirectTo:重定向到某个path,使用场景的话,比如在用户输入不存在的路径时重定向到首页。
  • pathMatch:路径的字符匹配策略
  • children:子路由数组


      注意路径配置的顺序是非常重要的,如果一个路径可以同时匹配几个路径配置的规则的话,以第一个匹配的规则为准。

     

      然后在app.modules.ts中引入routing,import { routing } from './app.routes';,然后在imports数组里添加routing,代码如下:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { AuthService } from './core/auth.service';
import { routing } from './app.routes';

@NgModule({
declarations: [
AppComponent,
LoginComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing
],
providers: [
{provide: 'auth',  useClass: AuthService}
],
bootstrap: [AppComponent]
})
export class AppModule { }


明天计划的事情:

      继续学习angular


问题:

     学习效率有点低


收获:

   如上


返回列表 返回列表
评论

    分享到