您的位置：首页 > Web前端 > AngularJS

Angular2 Routing

2016-04-10 22:13 691 查看

ROUTING

1. 导入router 库

我们在index.html中加载

<script src="node_modules/angular2/bundles/router.dev.js"></script>


2. 加入根补录

在head标签中的顶部添加
<base href="/">


<head>
<base href="/">


3. 使路由可用

路由组件是一个服务。像其他服务一样，我们需要导入它并且通过在
providers
数组中添加它来使它可用。

angular router 是由很多服务、指令、配置组成。我们一起导入它

import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';


现在我们更新
providers
和
directives


directives: [ROUTER_DIRECTIVES],
providers: [
ROUTER_PROVIDERS,
HeroService
]


增加路由配置

@RouteConfig([
{
path: '/heroes',
name: 'Heroes',
component: HeroesComponent
}
])


RouteConfig
有以下三个定义：

path：路由器将此路由地址与浏览器地址栏匹配。

name：路由的正式名字，必须以大写字母开头，避免与path混淆。

component：当导航到此路由，路由器需要创建的组件。

在template底部增加
<router-outlet>
标签

template: `
<h1>{{title}}</h1>
<a [routerLink]="['Heroes']">Heroes</a>
<router-outlet></router-outlet>
`,


一个app中只引入一个service
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  angular2
相关文章推荐
新的分享
章节导航