Angular 快速入门

AngularJS 官方网址

Angular：​​https://www.angular.cn/​​

Angular官网：​​https://angularjs.org/​​

AngularJS 1.X 的困境

1. 饱受诟病的性能问题。
2. 落后当前web的发展理念（如组件开发方式）
3. 对手机端支持不够友好

Angular 2.x 特性

16年5月正式发布。

2版本取消了JS的叫法，直接叫做 Angular

2版本不能兼容1版本的代码。

1. 移除 controller + $scope 设计，改用组件式开发（更易上手）
2. 性能更好（渲染更快，变化监测效率更高）
3. 优先为移动端应用设计（angular mobile toolkit）
4. 更加贴合未来的标准（如/ES67,WebComponent）

Angular2 的核心概念

组件

组件使用案例

组件要素

组件的通讯机制

组件全生命周期

组件示例

元数据与装饰器

模板

数据绑定

属性绑定-[value]  ：把组件类的数据传递到组件模板中。

事件绑定-[keyup] ：把模板产生的数据通过函数调用传递到组件类。

双向绑定-[(ngModel)] ：实现数据双向流动。

组件渲染

组件树

 数据流向

指令

案例

自定义指令

服务

服务是实现专一目的的逻辑单元，如日志服务。

依赖注入

组件一如外部构建（如服务）的一种机制。

分层注入

模块

1. 框架代码以模块形式组织（文件模块）
2. 功能单元以模块形式组织（应用模块）

 文件模块

文件模块使用

应用模块

　　应用模块就是对应用类零散的组件、指令、服务等按照功能进行归类包装。

　　同模块的指令可以相互使用同模块的组件，跨模块的不可以。

应用模块

核心概念总览图

Angular 快速上手

TypeScript

TypeScript 是微软开发的编程语言。

　　JavaScript 的超集，兼容 JavaScript。

　　运行前需要预编译生成 JavaScript 代码。

　　加入类型判断，编译时进行类型检查。

　　文件扩展名为 .ts 。

 案例

　　TypeScript = Type + JavaScript

类与接口

装饰器

一种特殊的类型的声明。

能够被附加到类、方法、访问符、属性或参数上。

想要了解更多，浏览TypeScript官网：​​https://www.typescriptlang.org​​

 开发环境的准备

Node.js ：推荐使用6.0以上版本。

webpack：打包工具，可以使用 npm install -g webpack 安装。

开发IDE开发工具（VS Code） ：微软推出的免费跨平台编辑器，支持TypeScript 语法及高亮提示。

webpack 原理

【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！

【重要说明】本文为本人的学习记录，论点和观点仅代表个人而不代表当时技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！

​

【Gitee地址】秦浩铖：​​https://gitee.com/wjw1014​​