小白入門angular-cli的第一次旅程（學習目標 1. 路由基礎知識）

學習路由的相關內容

   學習目標：

        1.路由的基礎知識

        2.子路由、保護路由和輔助路由

        3.路由實例

        一.路由基礎知識

                    首先,新建一個項目：ng new projectname  --routing

 接著，來看一下，這5個對象在實際代碼是怎么寫的。

    首先，聲明一下，使用[ng new projectname  --routing]，帶--routing參數生成的項目會新增一個路由配置文件。

    接著，步一：來在項目中新增兩個組件，ng  g component home  和 ng g component product

    說明：要寫一個點擊home頁路由跳轉到home組件里，點擊product跳轉到商品信息組件product組件里   

               步二：在圖中選中的文件內添加內容=》

                步三: 在app-routing.module.ts中引入這兩個組件文件的類

                        import {HomeComponent} from './home/home.component';

                        import {ProductComponent} from './product/product.component';

                步四：在app-routing.module.ts中，接著寫路由的配置

                            const routes: Routes = [

                    { path:'  ' ,  component: HomeComponent },

                    { path:'product', component: ProductComponent },

                        ]      注意：path項里不能用  '/'  開頭 

                步五：在app.component.html中

                    <a [routerLink]="['/']">主頁</a>

                    <a [routerLink] = "['/product']">商品詳情</a>   注意：必須用'/'，和 './'來體現是路由到根路由還是子路由

                效果展示：