Angular核心概念

一、集成开发环境@angular/cli

• IE8之后才有debugger工具
• 2009，nodejs发布，前端Big Bang

1.1 基于NodeJS的工具链

打包工具

• grunt 对js代码做合并、压缩、混淆
• gulp grunt的改进版
• webpck 静态模块打包器，一个标准

自动化测试

• karma
• jasmine

CSS预编译

• 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

组件树

扫描二维码关注公众号，回复： 184079 查看本文章

单向数据流

刷新策略

组件树生成器

2.2 NgModule

什么是模块?

NgModule作用

• 帮助组织业务模块
• 是Angular/CLI工具的打包依据，保证js是异步加载
• 是异步加载的最小单位

切分模块

• 浏览器对http请求有并发数限制
• IE9 2个
• Firefox/Chrome 4个

切分

切分原则

　2.3 Route

前端为什么需要Router?

如果没有路由

• 浏览器的前进后退按钮没法用
• 无法把URL拷贝并分享给你的朋友

路由是什么？

• 从本质上讲，表示的是页面上的一个状态
• 从数据结构讲，是一个tree型结构

静态路由

• 自动把这些组件打包到一个trunk里去

异步路由

路由守护

三、架构特色

依赖注入、数据绑定

3.1 依赖注入

只有一种注入方法：构造器注入

注射器本身也会构成一个tree型结构

查看注射器里面有什么属性和方法：chrome debugger

• 每个HTML标签上面都会有一个注射器实例
• 注射是通过constructor进行的
• @Component是@Injectable的子类

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