資料
- 官網(wǎng): https://angular.io
- 官網(wǎng)中文翻譯：http://www.angular.live
- Angular2從入門到實戰(zhàn)-Gitbook
- 廣發(fā)證券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 的設計方法和原則
- 匯智網(wǎng)教程
注：以下文檔均較舊，不建議再看，建議去angular官網(wǎng)及中文網(wǎng)去看
Angular2
Angular 2 是一個用 HTML 和 JavaScript 構建客戶端應用的框架。
Angular1中，bootstrap是圍繞DOM元素展開的；而Angular2中，bootstrap是圍繞組件展開的。
以組件而非DOM為核心，意味著Angular2在內(nèi)核隔離了對DOM的依賴，即DOM只是作為一種可選的渲染引擎存在。
Paste_Image.png
Angular2中的八個主要構造塊
Paste_Image.png
我們常用帶 Angular 擴展語法的 HTML 寫 *模板 *，用 *組件 *類管理這些模板，用 *服務 添加應用邏輯，用根組件完成 Angular 啟動 *。
模板、元數(shù)據(jù)和組件共同描繪出一個視圖
- Module 模塊
Angular應用由模塊組成，模塊能導出組件，服務，函數(shù)，值等供其它模塊使用 - Component 組件
directives數(shù)組包含組件模板依賴的組件或指令
providers數(shù)組包含組件依賴的服務 - Template 模板
- Metadata 元數(shù)據(jù)
- Data Binding 數(shù)據(jù)綁定
- 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運行時生態(tài)結構
Paste_Image.png
- angular2 polyfills: 為ES5瀏覽器提供ES6特性支持，比如Promise等。
- systemjs: 通用模塊加載器，支持AMD、CommonJS、ES6等各種格式的JS模塊加載。
- typescript transpiler: typescript轉(zhuǎn)換器
Angular2中的注解
ES6規(guī)范中并沒有注解和其它裝飾器，Angular2中的注解其實是利用了轉(zhuǎn)碼器（Typescript/traceur/babel）的注解特性，注解可以看作是轉(zhuǎn)換碼器層面的語法糖。
Paste_Image.png
Angular2中的依賴注入
Angular2中的指令
指令是對HTML進行擴展的基本手段
三種指令(注：組件也是一種指令)：
- 組件：一種帶有模板的指令；使用
component來裝飾組件類 - 屬性指令：改變元素的外觀或行為，如
NgClass,NgStyle；使用Directive來裝飾指令類 - 結構指令：向DOM中添加或刪除元素，如
NgIf,NgFor；使用Directive來裝飾指令類
示例：
Paste_Image.png
Angular2中的數(shù)據(jù)綁定
--
Paste_Image.png
Angular2中的服務
服務無處不在
其它
Angular2中的管道
管道即模板中對數(shù)據(jù)的變換機制
常用預置管道：
- DecimalPipe:
| number:'2.2-2' - DatePipe:
| date:'yyMMdd' - JsonPipe:
| json基于JSON.stringify(), 主要用于調(diào)試 - 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
資料：
環(huán)境安裝與配置
npm install -g typescript typings
npm install -g angular-cli
cli操作
參閱
https://scotch.io/tutorials/use-the-angular-cli-for-faster-angular-2-projects
工程創(chuàng)建：ng new XXX
-
創(chuàng)建組件：
- 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/**/*'
