Angularjs4.0 路由配置

幽梦林子

Angularjs4.0如何自己创建路由呢，Angularjs4.0 路由如何配置？具体操作需要以下几个步骤：


1.新建app-routing.module.ts，以及新建几个组件

1. ng g component home
   
2. ng g component news
   
3. ng g component newscontent

复制代码

2.引入模块

1. import { NgModule } from '@angular/core';
   
2. import { Routes, RouterModule } from '@angular/router';

复制代码

3.引入组件

1. import { HomeComponent } from './home/home.component';
   
2. import { NewsComponent } from './news/news.component';
   
3. 
   
4. import { NewscontentComponent } from './newscontent/newscontent.component';

复制代码

4.配置组件

1. const routes: Routes = [
   
2. 
   
3.   {path: 'home', component: HomeComponent},
   
4.   {path: 'news', component: NewsComponent},
   
5.   {path: 'newscontent/:id', component: NewscontentComponent},
   
6.   {
   
7.     path: '',
   
8.     redirectTo: '/home',
   
9.     pathMatch: 'full'
   
10.   }
    
11.   
    
12. ];

复制代码

5.配置模块 暴露模块

1. @NgModule({
   
2.   imports: [RouterModule.forRoot(routes)],
   
3.   exports: [RouterModule]
   
4. })
   
5. export class AppRoutingModule { }

复制代码

6.在app.module.ts 引入刚才定义的路由

1. import { AppRoutingModule } from './app-routing.module';

复制代码

7.app.module.ts里面的import注册这个路由模块

1. imports: [
   
2.     BrowserModule,
   
3.     AppRoutingModule
   
4. <font size="3"><b>  ]</b></font>

复制代码

a)找到app.component.html根组件模板，配置router-outlet显示动态加载的路由

1. <h1>
   
2.   <a routerLink="/home">首页</a>
   
3.   <a routerLink="/news">新闻</a>
   
4. </h1>
   
5. 
   
6. <router-outlet></router-outlet>

复制代码