资料
- 官网: 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 启动 *。
模板、元数据和组件共同描绘出一个视图
- Module 模块
Angular应用由模块组成，模块能导出组件，服务，函数，值等供其它模块使用 - Component 组件
directives数组包含组件模板依赖的组件或指令
providers数组包含组件依赖的服务 - Template 模板
- Metadata 元数据
- Data Binding 数据绑定
- Directive 指令
- Service 服务
- 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
资料：
环境安装与配置
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/**/*'
