我的csdn博客地址：http://blog.csdn.net/li_zean/article/details/79267820

Angular4.jpg

Angular4（1-5天）

1、安装与环境配置

    1.1、安装node.js（主要是需要npm）

    1.2、执行npm install -g @angular/cli：安装angular CLI

    1.3、ng -v：查看是否已经安装成功

    1.4、ng new 项目名称：创建一个项目

    1.5、cd 到项目所在目录

    1.6、ng serve：运行项目，可通过localhost：4200访问（ng serve --open ：运行并打开浏览器显示）

2、安装其它依赖

    2.1、jQuery安装：npm install jquery --save

    2.2、安装bootstrap：npm install bootstrap --save

    2.3、安装jQuery的$支持(typescript类型描述文件，下同)：npm install @types/jquery --save-dev

    2.4、安装bootstrap支持：npm install @types/bootstrap --save-dev

3、生成组件

    3.1、ng g component 组件名称

4、路由

    4.1、在app-routing.module.ts中添加路由支持：
        import { Routes, RouterModule } from '@angular/router';

    4.2、路由重定向：
        { path: '', redirectTo: '/home', pathMatch: 'full' }

    4.3、路由设置：
        { path: 'home', component: HomeComponent }

    4.4、子路由设置
        {
            path: 'product/:id', component: ProductComponent, children: [
                { path: '', component: ProductDescComponent },
                { path: 'seller/:id', component: SellerInfoComponent }
            ]
        }


    4.5、通配路由（在所有路由都没有匹配上执行，需要放在所有路由的后面）：
        { path: '**', component: Code404Component }

    4.6、路由取值（ts中）： 
        this.routerInfo.params.subscribe((params:Params) => this.productId = params["id"]);


    4.7、路由使用（HTML中）：
        <a [routerLink]="['./seller',99]">销售员信息</a>

    4.8、路由插件定义：
        <router-outlet></router-outlet>

    4.9、注意：在路由设置的时候一般主路由不用/设置，不能把它写成绝对路径，子路由中也是

    4.10、路由保卫

            4.10.1、设置路由保卫（加outlet属性）：
                { path: 'chat', component: ChatComponent, outlet: 'aux' }

            4.10.2、HTML中使用：
                <a [routerLink]="[{outlets:{primary: 'home',aux:'chat'}}]">开始聊天</a>
                <router-outlet name="aux"></router-outlet>

    4.11、备注：使用起来比较复杂，笔记并不能很好叙述和描述，也不能很好的记录下来，只能笼统的描述，具
        体更加详细的用法还需去查看官方文档。