Angular入门,搭配ant简单使用

html-css017

Angular入门,搭配ant简单使用,第1张

安装最新版本

安装指定版本,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文件,设置样式

运行效果如图