Angular路由与项目结构的关系

1、项目结构决定路由配置

Angular项目如何定义路由？我的一个做法是先确定项目的特性目录，即分清楚各个模块及其子模块，每个模块中的父子组件关系。理清模块（module）、模版（template）、组件（component）。模版提供插口router-outlet用于命中路由之后接入路由指向的页面。路由一般按照module组织，即一个module配一个路由模块（router module）。

比如一个项目有三个模块，首页、购物车、个人中心三个模块。默认页为首页。

根组件中配置一个根路由模块，home指向首页，cart指向购物车，personCenter指向个人中心。默认指向首页。

app模版页面需要安置一个路由出口，用于插放这三个模块中的一个；

home，cart，personCenter该写成组件还是一个module呢？

个人习惯把这三大块写成module，并通过loadChildren把它们懒加载进来。如果规模不大，个人认为也可以把home，cart，personCenter当作三个组件，即这三个组件都在app module。

每个模块中的分析思路也是依据上面的思路进行划分组织。

最终，如果是把首页、购物车、个人中心当作三个模块，链接一般是这样的：

域名/home/xxx，首页模块的路由

域名/cart/xxx，购物车模块路由

2、loadChildren与children

loadChildren是懒加载模块，上例中说的购物车、个人中心等通过loadChildren加载。加载子模块。需要用到的时候再加载出来，不会再初始的时候加载。

children是一条路由中的一个属性，它的路由出口在组件对应的模板上。

{path:'home',component:HomeComponent, children:[{path:'hot',component:Hot},{path:'onsale',component:Onsale}]}

此时Hot和Onsale的出口在HomeComponent对应的模板上，它们是homecomponent的子组件。

举个例子，比如home首页有热卖、促销两个页面，并通过按钮切换，则可以把hot和onsale当作home的children。home模版中需要安插一个路由出口，用于插放hot或者onsale。

最终域名/home/hot会加载首页，然后在首页上加载子组件hot。

后续补充实际的例子