一、集成开发环境@angular/cli
- IE8之后才有debugger工具
- 2009，nodejs发布，前端Big Bang
1.1 基于NodeJS的工具链
打包工具
- grunt 对js代码做合并、压缩、混淆
- gulp grunt的改进版
- webpck 打包工具，静态模块打包器，一个标准
自动化测试工具
- karma
- jasmine
CSS预编译
- Material Design 中文 质感设计
- 每一段时间，都有一种风格
- 苹果 倡导 扁平化，极简化
- Google 倡导 Material Design
- less/sass 做css预编译
1.2 NodeJS问题 npm
- 墙，有些模块装不上
- 对package管理不好，目录嵌套太深
1.3 开发Angular需要的开发工具
依次是：
- webpack
- TypeScript编译器
- karma/jasmine 自动化单元测试
- Protractor 为Angular应用量身订制的集成测试工具
1.4 Angular CLI
npm install -g @gngular/cli
ng --version
ng help
ng new my-dream-app
cd my-dream-app
ng serve
# 国内推荐使用cnpm
二、三大核心概念
- Angular1.x没有灵魂
- Angular核心概念是“组件化”
- 分治，分而治之
- 可复用
- 组件分到每个模块里去，用路由来控制这些模块的加载和初始化
2.1 Component
组件树
单向数据流
刷新策略
组件树生成器
https://github.com/compodoc/ngd
2.2 NgModule
https://angular.io/guide/ngmodule-faq
什么是模块?
NgModule作用
- 帮助组织业务模块
- 是Angular/CLI工具的打包依据，保证js是异步加载
- 是异步加载的最小单位
切分模块
- 浏览器对http请求有并发数限制
- IE9 2个
- Firefox/Chrome 4个
切分
切分原则
2.3 Route
前端为什么需要Router?
如果没有路由
- 浏览器的前进后退按钮没法用
- 无法把URL拷贝并分享给你的朋友
路由是什么？
- 从本质上讲，表示的是页面上的一个状态
- 从数据结构讲，是一个tree型结构
静态路由
- 自动把这些组件打包到一个trunk里去
异步路由
路由守护
三、架构特色
依赖注入、数据绑定
3.1 依赖注入
只有一种注入方法：构造器注入
注射器本身也会构成一个tree型结构
查看注射器里面有什么属性和方法：chrome debugger
- 每个HTML标签上面都会有一个注射器实例
- 注射是通过constructor进行的
- @Injectable是@Component的子类
DI与DataBinding相关文章
https://vsavkin.com/dependency-injection-in-angular-1-and-angular-2-d69589979c18
http://web.jobbole.com/88605/ 中文翻译
https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html
https://pascalprecht.github.io/slides/angular-2-change-detection-explained/#/
3.2 数据绑定
- Angular是第一个将双向数据绑定概念引用到前端开发来的
- 新版本的Angular已经彻底重写了脏检查机制
- 在JS里面，有3个异步调用可能造成数据模型的修改
- 事件回调
- Timer的回调
- Ajax回调
四、UI库
- PrimeNG ：到目前为止最完善的开源免费UI组件库
- NG-Zorro：来自阿里云的开源组件库
- Jigsaw：来自ZTE中兴通讯的开源组件库
- Clarity：来自Vmware的组件库
- Angular-Material：Angular官方提供的组件库
- Ionic ：专门为Angular设计的移动端组件库
五、参考资源推荐
- ng2-admin
- JHipster-后端基于SpringMVC
- NiceFish