angular 8 学习笔记～从入坑到放弃一

 

• 环境搭建

1. 脚手架安装 npm install -g @angular/cli
2. 新建项目 ng new pro-test
3. 配置ant-zorro： ng add ng-zorro-antd
   • sidemenu 会生成左右分栏菜单，快速布局
4. ng serve 启动项目

 

• 创建模块

1. 创建模块：ng g m <module-n
   1. 如果需要想创建带有路由的模块: ng g module my-module --routing，这样会创建module的同时会创建一个my-module-routing.module.ts的文件，用来配置这个module下的路由信息

   2. 

   3. 　如果在初始化项目(ng new pro)的时候没有选择配置路由，在项目中新增的组件和路由配置会在app.module.ts文件里(根模块) ,然后在imports里导入路由模块；

      • 

2. 路由配置重构为路由模块 ==> 优势：在配置复杂时，方便代码管理维护
   1. 在根目录(/app)下创建路由模块，用来包含路由配置 : ng g module app-routing --module app --flat ，生成一个app-routing.module.ts文件
   2. 如果不用命令，而是手动新建app-routing.module.ts文件，需要自己配置路由和引入路由模块，参考3，4；
   3. 如果是按照上方的操作，这个时候需要将 根目录 里的route配置和路由模块导入语句引入到 路由模块中；

   4. 

   5. 根模块下相关内容全部删除；即 创建模块中的 图3中的选中区域移除；==> 路由模块在根模块替换了路由配置，不需要同时两处都配置；
   6. 如果使用的是第1步中的命令创建；根目录会自动导入路由模块，但是路由配置还是需要自己配置；
   7. 路由配置完后，在app.component.html中 <roulet-outlet></roulet-outlet>作为路由出口；
3. 创建setup模块 
   1. 模块创建: ng g m pages/setup   ==> 指在pages/ 目录下创建setup模块；没有/pages 目录会自动生成
   2. 组件创建: ng g c pages/setup --module pages/setup --skipTests  ==> 创建setup组件，并声明组件所处于的模块，这样生成的模块会自动引入该模块；--skipTests不生成spec.ts文件；

   3. 

   4. 由于之间已经配置好了路由路径，所以现在只需将setup模块引入根模块；

   5. 

   6. 如果为了模块的更简洁，可以不将模块引入根模块，而放入路由模块中，通过路由的懒加载方式加载这个模块

   7. 

   8. 现在ng serve 查看浏览器；显示setup works！

   9. 

   10. 如果没有，仔细检查一下咯；毕竟开始的第一步～～～