Angular 路由

本文主要参考学习视频，网络相关资料以及自己实践而形成的学习笔记。

一. Angular 路由及项目基础的搭建：

   1. Angular CLI 生成项目新的项目框架：

    a.  command: ng new AngularStarter --routing. 自动生成Angular的框架项目，app moudle, componnet以及routing(app-routing.ts).

       会自动将app-routing和componnet导入到app moudle中。

    b. app-routing的配置：

       注意：路由路径的配置，Angular会按路径配置的顺序去匹配，故通配符总是配置到最后面。

      参考Angular官网说明：https://angular.io/guide/router#route-order

     The order of routes is important because the Router uses a first-match wins strategy when matching routes, so more specific routes should be           placed above less specific routes. List routes with a static path first, followed by an empty path route, which matches the default route.

     The wildcard route comes last because it matches every URL and the Router selects it only if no other routes match first.

       

 

 

       2.  Angular Module的生成和路由的配置： 可参考： https://www.cnblogs.com/cgzl/p/8611532.html

          command： ng g m admin --routing --> 生成admin module和路由

                              ng g c admin

                              ng g c admin/email -m admin --> 在admin module 下生成email组件并注册到其中

         注意： Admin module 注册到app module时，不能放到最后。

           

          调用测试：

          

 

      二. Angular 子路由：

           1. 子路由的应用场景：

              在Hero Add/Edit 页面，有多组业务或者功能相似的页面组成信息，对信息进行分类的填写。

            

            2. 子路由的配置

              

            3. 子路由之间的实现和验证：各子路由组件分别为一个Form，手动验证。