参考资料
官网
书籍
教程
其它
开发环境
检查node及npm环境
1
2
| node -v #>10.9.0, v12.12.0
npm -v #6.13.4
|
安装angular-cli
卸载
1
2
3
| ng -v # 6.0.8
npm uninstall -g @angular/cli
npm cache clean --force
|
安装
1
2
| npm install -g @angular/cli@6.0.3 #指定版本
npm install -g @angular/cli@latest #最新版本9.0.3，向下兼容
|
命名规则
- 文件名采用 feature.type .** ， feature 表示特性， type 表示类型
- 模块用 .module.ts
- 路由模块用 .routing.module.ts
- 组件用 .component.ts|html|css
- 服务用 .service.ts
- 管道用 .pipe.ts
- 指令用 .directive.ts
- 类型用 .model.ts
- 数据用 .data.ts
- 文件名、包名采用小写
- 单词之前中横线分隔
- 类名首字母大写
- 方法名、变量名驼峰命名
DEBUG
- Augury： Angular专用的chrome 调试插件
- Sources调试
- WebStorm + JetBrains IDE Support
新建工程
1
2
| ng new hello-angular --skip-install
npm install/yarn install
|
使用cnpm可能产生一些未知问题，慎用
如启动server时遇到rxjs错误，可将版本号固定为6.0.0
新建组件
1
2
3
| ng generate component login --inline-template --inline-style
或
ng g c login -it -is
|
新建服务
引入组件
app.component.html
1
2
3
4
| <h1>
{{title}}
</h1>
<app-login></app-login>
|
InMemoryWebApiModule
https://segmentfault.com/a/1190000009898540
HttpClient
https://www.jianshu.com/p/350ef028b798
Observable
Angular 6 + Rxjs 6
https://stackoverflow.com/questions/50571550/this-property-fromevent-does-not-exist-on-type-typeof-observable-angular-6
json server
1
2
| npm install -g json-server
json-server ./src/app/todo/todo-data.json
|
mdl
https://medium.com/codingthesmartway-com-blog/angular-material-and-angular-6-material-design-for-angular-6b1a3ee476f0
1
2
| npm install --save angular2-mdl
ng add @angular/material
|
关于模块的最佳实践
Angular团队对于共享特性模块有如下建议
- 坚持在shared目录中创建名叫SharedModule的特性模块（例如在app/shared/shared.module.ts中定义SharedModule）。
- 坚持把可能被应用其它特性模块使用的公共组件、指令和管道放在SharedModule中，这些资产倾向于共享自己的新实例（而不是单例）。
- 坚持在SharedModule中导入所有模块都需要的资产（例如CommonModule和FormsModule）。
- 坚持在SharedModule中声明所有组件、指令和管道。
- 坚持从SharedModule中导出其它特性模块所需的全部符号。
- 避免在SharedModule中指定应用级的单例服务提供商。但如果是故意设计的单例也可以，不过还是要小心。
- 很显然，我们的共享模块还没有全部做到，大家可以作为练习自己试验一下。
同样的对于核心特性模块，官方的建议是
- 坚持把那些“只用一次”的类收集到CoreModule中，并对外隐藏它们的实现细节。简化的AppModule会导入CoreModule，并且把它作为整个应用的总指挥。
- 坚持在core目录下创建一个名叫CoreModule的特性模块（例如在app/core/core.module.ts中定义CoreModule）。
- 坚持把一个要共享给整个应用的单例服务放进CoreModule中（例如ExceptionService和LoggerService）。
- 坚持导入CoreModule中的资产所需要的全部模块（例如CommonModule和FormsModule）。
- 坚持把应用级、只用一次的组件收集到CoreModule中。 只在应用启动时从AppModule中导入它一次，以后再也不要导入它（例如NavComponent和SpinnerComponent等）。
- 坚持从CoreModule中导出AppModule需导入的所有符号，使它们在所有特性模块中可用。
- 坚持防范多次导入CoreModule，并通过添加守卫逻辑来尽快失败。
- 避免在AppModule之外的任何地方导入CoreModule
jsbin
TS
Rxjs
组件自定义样式
1
2
3
| @Component({
styleUrls: ['./regist.component.less']
})
|
或
1
2
3
4
5
6
7
8
9
10
| @Component({
styles: [
`
nz-select {
margin-right: 8px;
width: 120px;
}
`
]
})
|