angular2中的Module和Routes

CLI tool for Angular

https://github.com/angular/angular-cli#generating-components-directives-pipes-and-services

感谢angular-cli ,  以前我都是自己来回cp文件的

如果无法安装成功,请淘宝 梅林固件 , 来解决翻墙问题

创建和运行

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

指定IP和端口

ng serve --host 0.0.0.0 --port 4201

项目快速构造的命令

基本用法如下

Scaffold	Usage
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module

 初始话项目结构

 
 //创建两个module
 ng g module home
 
 ng g m admin //m  是module的简写,其它也是类似的

//在分别创建两个Component
 ng g c home/main    
 ng g c home/persons

 ng g c admin/login
 ng g c admin/main

一个是前台,一个是后台,前台有个首页和个人中心,后台有个登陆界面和首页

再次感谢angular-cli,可以看到app下的两个*.module.ts文件中自动写入了新加的component

但是这个时候看是没有变化的,页面还是那个app works!

整个项目中现在有三个module.ts文件

下面要用Routes,有三点比较重要

1 在文件app.component.html添加

<router-outlet></router-outlet>

2

/app/app.module.ts  注意加载appRoutes用的是forRoot

import { HomeModule } from './home/home.module';
import { AdminModule } from './admin/admin.module';

import { appRoutes } from './app.routes';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,
    RouterModule.forRoot(appRoutes),
    AdminModule,
    HomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }



/app/app.routes.ts  注意这里是loadChildren来加载module

export const appRoutes=[

    {
        path:'home',
        loadChildren:'./home/home.module#HomeModule'
    },

    {
        path:'admin',
        loadChildren:'./admin/admin.module#AdminModule'
    }
]



/app/home/home.module.ts  注意这里是注意加载homeRoutes用的是forChild

import { homeRoutes } from './home.routes';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MainComponent } from './main/main.component';
import { PersonsComponent } from './persons/persons.component';
import { RouterModule } from '@angular/router';
@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    RouterModule.forChild(homeRoutes)
  ],
  declarations: [MainComponent, PersonsComponent]
})
export class HomeModule { }

/app/home/home.routes.ts  注意这里是component来加载Component

import { MainComponent } from './main/main.component';
import { PersonsComponent } from './persons/persons.component';

export const homeRoutes=[
    {
        path:'main',
        component:MainComponent
    },

    {
        path:'persons',
        component:PersonsComponent
    }
]

admin部分和home相似

到这里之后可以修改url访问看看了，

http://localhost:4200/home/main

http://localhost:4200/home/persons

 

代码

https://git.oschina.net/TimeIsGoOn/angular2-learn/tree/ng-Module-routes/

相关资料

angular.cn　路由相关　　https://angular.cn/docs/ts/latest/guide/router.html

大漠老师的教程：http://www.jianshu.com/p/9af9f203e0b1

简书上的教程：https://my.oschina.net/mumu/blog/834254

转载于:https://my.oschina.net/newBear/blog/850733