小白入门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>   注意：必须用'/'，和 './'来体现是路由到根路由还是子路由

                效果展示：