Angular项目🎯网易音乐之项目初始化
初始化
创建项目
- 安装Angular脚手架,使用的是8.0版本,需要进行降级处理
1 | npm uninstall -g angular-cli |
- 创建项目,安装需要的模块。
-S
表示不生成单元测试
1 | ng new NeteaseCloudMusic --style=less --routing -S |
- 安装UI库
Ant Design of Angular
,参考官方文档:http://ng.ant.design/docs/introduce/zh
1 | ng add ng-zorro-antd |
创建模块
- 总体模块结构如下
1 | |--src |
- 所有组件放在
AppModule
上会导致难以维护,所以需要创建另一个模块core
1 | ng g m core |
- 把一些非全局的模块放在
core
模块里,然后在主模块中导入core
即可。设置此模块只能被app
主模块引用,其它模块不能引入
1 | import { NgModule } from '@angular/core'; |
- 再创建一个共享模块
share
用于存放一些全局使用的模块,并且引入到core
模块中
1 | import { NgModule } from '@angular/core'; |
- 再创建一个
pages
模块,用于管理页面模块。并且引入到core
模块中
1 | import { NgModule } from '@angular/core'; |
- 再创建一个
services
模块,用于管理HTTP模块。并将此模块引入到core
模块中
1 | import { NgModule } from '@angular/core'; |
app
的主模块就比较简洁了,只需引入core
模块,其内容如下
1 | import { NgModule } from '@angular/core'; |
首页视图
首页布局
- 在
app.component.html
中编写头部和底部结构,中间内容使用路由。使用NG-ZORRO
1 | <div id="app"> |
创建首页
- 使用命令行创建
home
组件模块
1 | ng g m pages/home --routing |
- 修改主页模块
home.module.ts
1 | import { NgModule } from '@angular/core'; |
pages.module.ts
总页面模块中导入主页模块
1 | import { NgModule } from '@angular/core'; |
- 再创建
home
组件
1 | ng g c pages/home |
- 在
home-routing.module.ts
配置路由
1 | import { NgModule } from '@angular/core'; |
- 然后在
app-routing.module.ts
,根路由中配置空路由重定向
1 | import { NgModule } from "@angular/core"; |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小李博客!
评论