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、備註：使用起來比較複雜，筆記並不能很好敘述和描述，也不能很好的記錄下來，只能籠統的描述，具
        體更加詳細的用法還需去檢視官方文件。