#小白日常写angular

上回说到环境创建完成环境配置,我们得到了一个新的angular的项目

前端在使用单页面应该的时候路由对我们来说非常的重要

本节就说说跟惰性路由相关的一些东西

1 首先需要创建一个app-routing.module.ts的文件

1
2
3
4
5
6
7
8
9
10
11
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

并将app-routing.module.ts引入到app.module.ts中

2 创建懒加载的模块

1
2
3
4
# 命令行输入
ng g m views/home --routing && ng g c views/home
# 在views文件夹下创建跟home模块和组件
# 生成的以spec.ts文件为单元测试文件不使用单元测试的话直接删除

在home-routing.module.ts中配置路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';

const routes: Routes = [
  {
    path:'',
    component: HomeComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

继续配置app-routing.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home', // 表示根路径默认跳转home路由下
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './views/home/home.module#HomeModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在有的文档或帖子中loadChildren是以app开始的(我在使用的时候一直说找不到对应的module)

1
loadChildren: 'app/views/home/home.module#HomeModule'

到此其实懒加载路由模块已经配置完成

坑点:

在已经拥有组件的情况下配置懒加载需要注意组件的是引入到你定义的module.ts中,并导入到declarations中,不是引入到app.module.ts中,若已经引入请删除引入

注意app-routing.module.ts中

1
2
3
4
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

和子路由模块home-routing.module.ts中

1
2
3
4
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

forRoot 跟forChild使用区别的 不能直接复制app-routing.module.ts的 这也是我你一直配置不出来的一个坑

注意: 组件引入到哪个的routing.module.ts中就一定要引入到对应的module.ts中

最后弱弱的讲下我理解的懒加载模块:
能非常有效的拆分项目的文件
浏览器可以异步的加载对应页面的js然后渲染页面,并不需要讲项目所有的文件全部加载完成才能渲染页面

刚刚开始学习angular,要是有什么不对的地方请指正,本项目使用的angular6.1.0,若是版本不同可能会不能实现,还请自行查看对应的文档