Angular课程:网易云实战课程笔记Day1

相关链接

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添加路由

 

posted @ 2020-07-30 10:16  aguo718  阅读(98)  评论(0编辑  收藏  举报