- 环境搭建
- 脚手架安装 npm install -g @angular/cli
- 新建项目 ng new pro-test
- 配置ant-zorro： ng add ng-zorro-antd
- sidemenu 会生成左右分栏菜单，快速布局
- ng serve 启动项目
- 创建模块
- 创建模块：ng g m <module-n
- 如果需要想创建带有路由的模块: ng g module my-module --routing，这样会创建module的同时会创建一个my-module-routing.module.ts的文件，用来配置这个module下的路由信息
- 如果在初始化项目(ng new pro)的时候没有选择配置路由，在项目中新增的组件和路由配置会在app.module.ts文件里(根模块) ,然后在imports里导入路由模块；
- 路由配置重构为路由模块 ==> 优势：在配置复杂时，方便代码管理维护
- 在根目录(/app)下创建路由模块，用来包含路由配置 : ng g module app-routing --module app --flat ，生成一个app-routing.module.ts文件
- 如果不用命令，而是手动新建app-routing.module.ts文件，需要自己配置路由和引入路由模块，参考3，4；
- 如果是按照上方的操作，这个时候需要将 根目录 里的route配置和路由模块导入语句引入到 路由模块中；
- 根模块下相关内容全部删除；即 创建模块中的 图3中的选中区域移除；==> 路由模块在根模块替换了路由配置，不需要同时两处都配置；
- 如果使用的是第1步中的命令创建；根目录会自动导入路由模块，但是路由配置还是需要自己配置；
- 路由配置完后，在app.component.html中 <roulet-outlet></roulet-outlet>作为路由出口；
- 创建setup模块
- 模块创建: ng g m pages/setup ==> 指在pages/ 目录下创建setup模块；没有/pages 目录会自动生成
- 组件创建: ng g c pages/setup --module pages/setup --skipTests ==> 创建setup组件，并声明组件所处于的模块，这样生成的模块会自动引入该模块；--skipTests不生成spec.ts文件；
- 由于之间已经配置好了路由路径，所以现在只需将setup模块引入根模块；
- 如果为了模块的更简洁，可以不将模块引入根模块，而放入路由模块中，通过路由的懒加载方式加载这个模块
- 现在ng serve 查看浏览器；显示setup works！
- 如果没有，仔细检查一下咯；毕竟开始的第一步～～～