码迷,mamicode.com
首页 > 其他好文 > 详细

Angular建立待办事项应用

时间:2018-10-12 01:20:46      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:import   工厂方法   host   数组   provider   分享图片   管理   angular   outer   

建立路由

接前一小节,在src/app/app.component.html把login组件去掉

技术分享图片

第一步:

在src/index.html指定基准路径

浏览器会根据这个路径下载css,图像,js文件,所以语句要放在header的最顶端

<base href="/">

技术分享图片

 第二步:

在src/app/app.module.ts引入RouterModule

import { RouterModule } from "@angular/router";

技术分享图片

第三步:

定义和配置路由数组

forRoot是一个静态工厂方法

技术分享图片

路由插座

路由插座加载LoginComponent

在app.component.html添加一个路由插座(outlet)

技术分享图片

 

ok

保存之后发现,login组件不见了

技术分享图片

 

需要浏览器输入:http://localhost:4200/login

/login这就是路由

技术分享图片

 

 还有一个方法就是使用redirectTo路由重定向,将首页定向到login路由

在路由定义数组中,增加一个路由定义,如下

技术分享图片

然后浏览器输入:http://localhost:4200/,回车,浏览器地址变成:http://localhost:4200/login

技术分享图片

 

ps:注意,angular2使用“先匹配优先”原则,如果一路径可以匹配多个路由,第一个匹配的规则为准,所以,路由配置的顺序是非常非常重要的。

 

 

 分离路由

如果所有的路由都在app.module.ts中维护,不好管理,最好是单独出来

新建文件src/app/app.routes.ts

import { Routes,RouterModule } from "@angular/router";
import { LoginComponent } from "./login/login.component";
import { ModuleWithProviders } from "@angular/core";

export const routes:Routes=[
    {
        path:‘login‘,
        component:LoginComponent
    },
    {
        path:‘‘,
        redirectTo:‘login‘,
        pathMatch:‘full‘
    }
];

export const routing:ModuleWithProviders=RouterModule.forRoot(routes);

  

然后在app.module.ts引入routing

技术分享图片

 

保存,打开浏览器,查看,效果和之前的一样,只是在后台我们将路由单独分离出来了,分离成功!

技术分享图片

 

 

ok,路由部分就到这里

 

Angular建立待办事项应用

标签:import   工厂方法   host   数组   provider   分享图片   管理   angular   outer   

原文地址:https://www.cnblogs.com/1906859953Lucas/p/9775777.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!