Angular入门，搭配ant简单使用

安装指定版本，x.x.x版本号

工程名ant，会得到一个ant文件夹

运行该命令会询问是否单独生成路由文件，以及选择css预处理格式。路由文件看个人喜好，开发中可随意更改。css预处理样式建议使用less，方便使用ant

ng g c home 创建home组件

ng g m home --routing 创建home模块，独立出路由文件

执行后生成src/app/home文件夹，如下图

相当于占位符，具体显示内容由主路由决定

使用 loadChildren 属于懒加载，需要在home-routing.module.ts文件中再具体制定路由导航到哪个组件

home-routing.module.ts文件如下：

将index路由导航到homecomponent，即可显示home.component.html的内容

使用IDE运行，或者 ng serve 命令运行项目，默认端口4200。访问localhost:4200会自动跳转到index，显示如下

在home.component.ts中创建变量name

home模块是懒加载出来的，所以需要单独引入ant，在app模块中引入的在这不起作用

home.module.ts如下

修改home.component.html文件

修改home.component.less文件，设置样式

运行效果如图