Angular-懒加载及子路由的配置

接触了一个项目，发现里面的路由配置都是用的懒加载，因为之前没有用过，所以做个一个小demo帮助梳理。

首先是懒加载的好处，它需要加载的资源不会一股脑的全加载出来，而是用到什么就加载什么，这样能够大大提高效率。

1.创建项目

ng new lazyloading

2.创建根路由文件app-router.module.ts

ng g m  app-routing --flat --module=app

–flat 把这个文件放进了 src/app 中，而不是单独的目录中。
–module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。

在app.module.ts导入AppRoutingsModule
Angular-懒加载及子路由的配置
3.创建俩组件，apple，banana,此时项目结构应该是这样

4.打开app的html，我们写点样式
html

<div class="g-nav">
  <a routerLink="/apple">apple</a>
  <a routerLink="/banana">banana</a>
</div>
<router-outlet></router-outlet>

css

.g-nav >a{
    display: inline-block;
    height: 35px;
    line-height: 35px;
    text-align: center;
    width: 64px;
}

5.为两个组件创建相应的module与routing

ng g m apple
ng g m apple/apple-routing --flat

此刻的项目结构应该是这样的
Angular-懒加载及子路由的配置
我们打开其刚刚创建好的module，对其进行修改

然后配置其路由

6.在app.module.ts删除 apple 和 banana 的Cmponent

可以查看效果