Angular2笔记

资料

• 官网: https://angular.io
• 官网中文翻译：http://www.angular.live
• Angular2从入门到实战-Gitbook
• 广发证券Angular2翻译
• MODEL-DRIVEN FORMS IN ANGULAR 2
• GitHub: https://github.com/angular/angular
• Docs: https://angular.io/docs/js/latest/

其它

---

• Github上一个相关资源汇总项目： https://github.com/timjacobi/angular2-education
• Webpack Starter: https://github.com/AngularClass/angular2-webpack-starter
• Angular 2.0 的设计方法和原则
• 汇智网教程

注：以下文档均较旧，不建议再看，建议去angular官网及中文网去看

Angular2

---

Angular 2 是一个用 HTML 和 JavaScript 构建客户端应用的框架。

Angular1中，bootstrap是围绕DOM元素展开的；而Angular2中，bootstrap是围绕组件展开的。

以组件而非DOM为核心，意味着Angular2在内核隔离了对DOM的依赖，即DOM只是作为一种可选的渲染引擎存在。

Paste_Image.png

Angular2中的八个主要构造块

Paste_Image.png

我们常用带 Angular 扩展语法的 HTML 写 *模板 *，用 *组件 *类管理这些模板，用 *服务 添加应用逻辑，用根组件完成 Angular 启动 *。

模板、元数据和组件共同描绘出一个视图

1. Module 模块
   Angular应用由模块组成，模块能导出组件，服务，函数，值等供其它模块使用
2. Component 组件
   directives数组包含组件模板依赖的组件或指令
   providers数组包含组件依赖的服务
3. Template 模板
4. Metadata 元数据
5. Data Binding 数据绑定
6. Directive 指令
7. Service 服务
8. Dependency Injection 依赖注入

Angular2例子：

//从模块库引入类型定义
import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";

//组件定义
@Component({
    selector:"my-app",
    template:"<h1>Hello,Annotation</h1>"
})
class EzApp{}       

//渲染组件
bootstrap(EzApp);

Angular2运行时生态结构

---

Paste_Image.png

• angular2 polyfills: 为ES5浏览器提供ES6特性支持，比如Promise等。
• systemjs: 通用模块加载器，支持AMD、CommonJS、ES6等各种格式的JS模块加载。
• typescript transpiler: typescript转换器

Angular2中的注解

---

ES6规范中并没有注解和其它装饰器，Angular2中的注解其实是利用了转码器（Typescript/traceur/babel）的注解特性，注解可以看作是转换码器层面的语法糖。

Paste_Image.png

Angular2中的依赖注入

---

Angular2中的指令

---

指令是对HTML进行扩展的基本手段

三种指令(注：组件也是一种指令)：

• 组件：一种带有模板的指令；使用component来装饰组件类
• 属性指令：改变元素的外观或行为，如NgClass,NgStyle；使用Directive来装饰指令类
• 结构指令：向DOM中添加或删除元素，如NgIf,NgFor；使用Directive来装饰指令类

示例：

Paste_Image.png

Angular2中的数据绑定

--

Paste_Image.png

Angular2中的服务

---

服务无处不在

其它

---

Angular2中的管道

管道即模板中对数据的变换机制

常用预置管道：

• DecimalPipe: | number:'2.2-2'
• DatePipe: | date:'yyMMdd'
• JsonPipe: | json 基于JSON.stringify(), 主要用于调试
• PercentPipe: | percent:'1.2-3'
• SlicePipe: | slice:1:4
• UpperCasePipe: | uppercase
• LowerCasePipe: | lowercase

自定义管道：

Angular2 API for Typescript

---

按类型分

• Directive: 基本都在@angular/common包中
• Decorator: core中的Component, Directive, Injectable, Pipe; router中的Routes
• Class
• Inteface
• Function
• Enum
• Const

按包分

• @angular/common
• @angular/compiler
• @angular/core
• @angular/http
• @angular/platform-browser
• @angular/platform-browser/dynamic
• @angular/platform-server
• @angular/router

Angular2 Cli

---

资料：

• http://www.mithunvp.com/build-angular-apps-using-angular-2-cli/

环境安装与配置

---

npm install -g typescript typings
npm install -g angular-cli

cli操作

---

参阅

• https://scotch.io/tutorials/use-the-angular-cli-for-faster-angular-2-projects

• 工程创建：ng new XXX

• 创建组件：

  • Component: ng g component XXX
  • Directive: ng g directive XXX
  • Pipe: ng g pipe XXX
  • Service: ng g service XXX

• 工程构建：ng build

• 工程运行：ng server -prod --port 4201

• 工程测试：ng test 或 e2e

angular2-material相关

---

• 安装相关组件

npm install --save @angular2-material/{core,button,card}

• 配置
  angular-cli-build.js中增加

'@angular2-material/**/*'