首页 > 其他 > 详细

Angular建立待办事项应用

时间:2018-10-12 00:37:03      阅读:222      评论:0      收藏:0      [点我收藏+]

建立路由

接前一小节,在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建立待办事项应用

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!