Angular 快速入门

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 原理