angular8教程（3）-路由和组件生成

紧接着上一篇我们讲到项目中已经引入了ng-zorro的UI库，可以开始正式的编码。

1. 我们先看app.component.html，很容易看出来这里写入了带侧边栏的页面布局，这个界面的布局最外层是nz-layout，往里一层分为了左右两部分，左边是nz-sider，右边又是一个nz-layout，左边的nz-side又分为上下两部分，上面是logo和title，下面是nz-menu菜单，右边也是分为上下两部分，上面是nz-header，下面是nz-content。这里面基本包含了ng-zorro支持的几种布局组件，除了nz-footer，这种布局的方式叫作侧边布局。具体还有其他布局用法，可以查看官方文档布局 Layout。
   假设我们需要开发一个网站页面，这个模板页面作为主页，需要通过左边的菜单来切换页面，所以这个页面中其他部分是固定的，只有nz-content会随着选中的菜单变化而切换不同的页面，每个页面都有对应的URL路径，根据URL加载不同的页面，这就是路由。我们可以看到，在nz-content标签中包含了，这就代表路由的入口，根据路由加载的不同页面都会放在这个位置。
2. 接着我们看app-routing.module.ts，这就是app模块对应的路由模块，项目中的每个模块都会有相应的路由模块。打开app-routing.module.ts，我们可以发现，原本创建项目的时候routes是一个空数组，现在变成了

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/welcome' },
  { path: 'welcome', loadChildren: () => import('./pages/welcome/welcome.module').then(m => m.WelcomeModule) }
];

这里定义了两个路由：
第一个路由是用来重定向的路由，我们启动应用后用localhost:4200来访问项目，这个路由地址相当于一个空字符串的地址''，这个地址没有实际意义，所以我们需要把它重定向到某个特定地址，就是'/welcome' 。这里还有一个参数设置pathMatch: 'full'，这是不能忽略的。关于pathMatch的解释官方中文文档翻译的有些难以理解，实际上意思是pathMatch默认值是'prefix'，即路由查看url的地址时从左到右直到匹配到相应的路径，例如'/team/11/user'匹配的是'team/:id'，后面'/user'就被省略了。这里设为full表示需要完全匹配，否则所有路径都会匹配到这个空字符串的地址''上去，包括这个重定向的地址，导致死循环。
第二个路由就是路径为welcome的路由，它指向了welcome模块。我们看到在app目录下新增了一个page目录，page目录下面有一个welcome目录，里面就是welcome模块的代码。welcome模块的代码结构和app模块类似，查看welcome-routing.module.ts文件，

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

这里只定义了一个路由，同样是空字符串的地址''，但是这个地址是相对于'/welcome'这个路径而言的，就是说这个welcome的路由模块的所有路径都是相对于'/welcome'而言，假如这边定义了一个home的路径，那么实际访问地址就是localhost:4200/welcome/home，诸如此类。

好了，通过官方生成的这些代码，我们大概理解了angular框架项目是如何构成的。下面我们来改造一下这份代码，打造我们自己的项目框架。
首先第一步，我们要把app模块中的带侧边栏菜单的视图骨架迁移出来，把它放到一个home组件中，为什么要这么做呢，我们后面再说。迁移步骤如下：

1. 用idea的快捷菜单生成angular的组件home组件
   
   new Angular Schematic
   
   
   generate component
   
   
   generate home component
   
   这里采用的是angular cli Schematics的命令生成的，具体option参数可以查看ng generate命令。
2. 把原来app.component.html中的视图代码剪切到home.component.html中，app.component.html中仅放一个路由入口标签。
3. 把原来app.component.scss中的样式代码剪切到home.component.scss中。
4. 把app.component.ts中的isCollapsed = false;剪切到home.component.ts中。
5. 修改app-routing.module.ts的路由定义代码如下

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/home' },
  { path: 'home', component: HomeComponent }
];

修改完代码后启动项目，可以看到运行结果仍是那个带侧边栏的主界面。
接下来我说明一下我准备构建的项目结构，整个项目我只要一个app模块，所有组件都放在这个模块中，我预备构建的是一个后台管理模式的项目，home组件就是整个前端页面的骨架页面，在这基础上添加其他路由和相应的组件，但是访问这个页面需要登录，这就是为什么我要把原来app组件中的视图迁移到home组件中，下一篇我就会说明如何对home组件做登录拦截。
关于这个后台管理项目的angular版本代码，我已经在github上面传了完整的版本，https://github.com/ahuadoreen/studentmanager-cli，
可以先行查看。