Angular核心概念

一、集成开发环境@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

官网：https://cli.angular.io/

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

参考

35分钟掌握Angular核心概念 - Youbute

35分钟掌握Angular核心概念 - Bilibili

PPT