相关链接
angular视频课:https://www.bilibili.com/video/BV1iJ411F7Bf?p=3
angular文档:https://angular.cn/guide/setup-local
ng-zorro-antd文档:https://ng.ant.design/docs/getting-started/zh
主要内容
1. 安装Node.js以使用npm命令,npm命令安装CLI
2. 项目初始化
运行CLI命令创建一个新的工作空间和初始入门应用ng new ng-wyy --style=less --routing -S
安装 ng-zorro-antd:ng add ng-zorro-antd
将全局css放入assets文件夹,将写好的assets替换当前assets
安装minireset.css第三方文件
在app.component.html中写入h2、button等
npm start 启动 测试(Ctrl+C终止)
3. 模块化设计
app.module.ts(总经理)
创建core.module.ts: ng g m core ---->core.module.ts(副总经理)
创建share.module.ts …… --->存放全局公共的组件、指令等
创建pages.module.ts …… --->管理所有页面
创建services.module.ts …… --->写调接口时的服务
4. 首尾布局
1 <nz-input-group [nzSuffix]="suffixIconSearch"> 2 <input type="text" nz-input placeholder="歌手/歌单/歌曲"> 3 </nz-input-group> 4 <ng-template #suffixIconSearch> 5 <!-- <i nz-icon type="search"></i> --> 6 <i nz-icon nzType="search" nzTheme="outline"></i> 7 </ng-template>
图标链接:https://ng.ant.design/components/icon/zh (本地使用的是ng-zorro 9.x ?可能)
ng g m pages/home --routing ---> 给home生成一个routing文件
ng g c pages/home ---> home文件夹下生成三个组件 home.routing添加路由