AngularJS2 是一款開源JavaScript庫，由Google維護，用來協助單一頁面應用程序運行。

AngularJS2 是 Angular 1.x 的升級版本，性能上得到顯著的提高，能很好的支持 Web 開發組件。

AngularJS2 發佈於2016年9月份，它是基於ES6來開發的。

學習本教程需要的基礎知識

學習本教程前，你需要具備基本的前端基礎：HTML、CSS、JavaScript。此外你還需要了解 NPM 及 TypeScript。

• NPM 使用介紹。

• TypeScript 入門教程

Angular2.x與Angular1.x 的區別

Angular2.x與Angular1.x 的區別類似 Java 和 JavaScript 或者說是雷鋒與雷峰塔的區別，所以在學習Angular2.x時大家需要做好重新學習一門語言的心裡準備。

運行條件!

由於目前各種環境（瀏覽器或 Node）暫不支持ES6的代碼，所以需要一些shim和polyfill（IE需要）讓ES6寫的代碼能夠轉化為ES5形式並可以正常運行在瀏覽器中。

從上圖可以看出在 Es5 瀏覽器下需要以下模塊加載器：

• systemjs - 通用模塊加載器，支持AMD、CommonJS、ES6等各種格式的JS模塊加載。

• es6-module-loader - ES6模塊加載器，systemjs會自動加載這個模塊。

• traceur - ES6轉碼器，將ES6代碼轉換為當前瀏覽器支持的ES5代碼，systemjs會自動加載 這個模塊。

相關參考文檔

• Angular 官網：https://angular.io/

• Angular 官方文檔：https://angular.io/docs/ts/latest/quickstart.html

• Angular 中文文檔：https://angular.cn/docs/ts/latest/quickstart.html

• Angular Github:https://github.com/angular/angular

AngularJS2 JavaScript 環境配置

本章節我們為大家介紹如何配置 AngularJS2 的執行環境。

本章節使用的是 JavaScript 來創建 Angular 的應用，當然你也可以使用 TypeScript 和 Dart 來創建 Angular 應用 。

本章節使用到的文件目錄結構如下所示:

創建配置文件

創建目錄

$ mkdir angular-quickstart$ cd angular-quickstart

載入需要的庫

這裡我們推薦使用 npm 來作為包的管理工具，如果你還沒安裝npm或者不瞭解 npm 可以查看我們的教程：NPM 使用介紹。

創建 package.json 文件，代碼如下所示：

package.json 文件：

{"name": "angular2-quickstart", "version": "1.0.0", "scripts": {"start": "npm run lite", "lite": "lite-server"}, "license": "ISC", "dependencies": {"@angular/common": "2.0.0", "@angular/compiler": "2.0.0", "@angular/core": "2.0.0", "@angular/forms": "2.0.0", "@angular/http": "2.0.0", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@angular/router": "3.0.0", "@angular/upgrade": "2.0.0", "core-js": "^2.4.1", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.12", "zone.js": "^0.6.23", "angular2-in-memory-web-api": "0.0.20", "bootstrap": "^3.3.6"}, "devDependencies": {"concurrently": "^2.0.0", "lite-server": "^2.2.0"}}

由於 npm 官網鏡像國內訪問太慢，這裡我使用了淘寶的npm鏡像，安裝方法如下：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

執行後我們就可以使用 cnpm 命令來安裝模塊：

$ cnpm install

執行成功後，angular-quickstart 目錄下就會生成一個 node_modules 目錄，這裡包含了我們這個實例需要的模塊。

創建 Angular 組件

組件（Component）是構成 Angular 應用的基礎和核心，一個組件包裝了一個特定的功能，並且組件之間協同工作以組裝成一個完整的應用程序。

一般來說，一個組件就是一個用於控制視圖模板的JavaScript類。

接下來我們在 angular-quickstart 創建一個 app 的目錄：

$ mkdir app$ cd app

並添加組件文件 app.component.js ，內如如下：

app.component.js 文件：

(function(app){app.AppComponent = ng.core.Component({selector: 'my-app', template: '<h1>我的第一個 Angular 應用</h1>'}) .Class({constructor: function(){}});})(window.app || (window.app = {}));

接下來我們來分析下以上代碼：

我們通過鏈式調用全局Angular core命名空間ng.core中的Component和Class方法創建了一個名為AppComponent的可視化組件。

Component方法接受一個包含兩個屬性的配置對象，Class方法是我們實現組件本身的地方，在Class方法中我們給組件添加屬性和方法，它們會綁定到相應的視圖和行為。

模塊

Angular應用都是模塊化的，ES5沒有內置的模塊化系統，可以使用第三方模塊系統，然後我們為應用創建獨立的命名空間 app，文件代碼可以包裹在 IIFE（立即執行函數表達式）中：

(function(app) {})(window.app || (window.app = {}));

我們將全局app命名空間對象傳入IIFE中，如果不存在就用一個空對象初始化它。

大部分應用文件通過在app命名空間上添加東西來輸出代碼，我們在app.component.js文件中輸出了AppComponent。

app.AppComponent =

Class定義對象

本實例中AppComponent類只有一個空的構造函數:

.Class({constructor: function() {}});

當我們要創建一個是有實際意義的應用時，我們可以使用屬性和應用邏輯來擴展這個對象。

Component 定義對象

ng.core.Component()告訴Angular這個類定義對象是一個Angular組件。傳遞給ng.core.Component()的配置對象有兩個字段：selector和template。

ng.core.Component({selector: 'my-app', template: '<h1>我的第一個 Angular 應用</h1>'})

selector 為一個宿主HTML元素定義了一個簡單的CSS選擇器my-app。當Angular在宿主HTML中遇到一個my-app元素時它創建並顯示一個AppComponent實例。

template 屬性容納著組件的模板。

添加 NgModule

Angular 應用由 Angular 模塊組成，該模塊包含了 Angular 應用所需要的組件及其他任何東西。

接下來我們創建 app/app.module.js 文件，內容如下：

app.module.js 文件：

(function(app){app.AppModule = ng.core.NgModule({imports: [ng.platformBrowser.BrowserModule], declarations: [app.AppComponent], bootstrap: [app.AppComponent]}) .Class({constructor: function(){}});})(window.app || (window.app = {}));

啟動應用

添加 app/main.js 文件：

app/main.js 文件：

(function(app){document.addEventListener('DOMContentLoaded', function(){ng.platformBrowserDynamic .platformBrowserDynamic() .bootstrapModule(app.AppModule); });})(window.app || (window.app = {}));

我們需要兩樣東西來啟動應用：

• Angular 的 platformBrowserDynamic().bootstrapModule 函數。

• 上文中提到的應用根模塊 AppModule。

接下來創建 index.html，代碼如下所示：

index.html 文件：

<html><head><metacharset="utf-8"><title>Angular 2 實例 - 菜鳥教程(runoob.com)</title><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="styles.css"><!-- 1. 載入庫 --><!-- IE 需要 polyfill --><scriptsrc="node_modules/core-js/client/shim.min.js"></script><scriptsrc="node_modules/zone.js/dist/zone.js"></script><scriptsrc="node_modules/reflect-metadata/Reflect.js"></script><scriptsrc="node_modules/rxjs/bundles/Rx.js"></script><scriptsrc="node_modules/@angular/core/bundles/core.umd.js"></script><scriptsrc="node_modules/@angular/common/bundles/common.umd.js"></script><scriptsrc="node_modules/@angular/compiler/bundles/compiler.umd.js"></script><scriptsrc="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script><scriptsrc="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script><!-- 2. 載入 'modules' --><scriptsrc='app/app.component.js'></script><scriptsrc='app/app.module.js'></script><scriptsrc='app/main.js'></script></head><!-- 3. 顯示應用 --><body><my-app>Loading...</my-app></body></html>

index.html 分析

• 1、載入我們需要的JavaScript庫；

• 2、載入我們自己的JavaScript文件，注意順序；

• 3、我們在<body>標籤中添加<my-app>標籤。

執行過程為：當 Angular 在 main.js 中調用 bootstrapModule 函數時，它讀取 AppModule 的元數據，在啟動組件中找到 AppComponent 並找到 my-app 選擇器，定位到一個名字為 my-app 的元素，然後再這個標籤之間的載入內容。

添加一些樣式

styles.css 文件代碼為：

styles.css 文件：

h1{color:#369; font-family:Arial, Helvetica, sans-serif; font-size:250%;}body{margin:2em;}

打開終端，輸入以下命令：

$ npm start

訪問 //localhost:3000/，瀏覽器顯示結果為：

這樣我們的第一個 Angular2 的應用就算創建完成了，本文所使用的源碼可以通過以下方式下載，不包含 node_modules。

AngularJS2 架構

Angular 2 應用程序應用主要由以下 8 個部分組成：

• 1、模塊 (Modules)

• 2、組件 (Components)

• 3、模板 (Templates)

• 4、元數據 (Metadata)

• 5、數據綁定 (Data Binding)

• 6、指令 (Directives)

• 7、服務 (Services)

• 8、依賴注入 (Dependency Injection)

下圖展示了每個部分是如何相互工作的：

圖中的模板 (Templates)是由 Angular 擴展的 HTML 語法組成，組件 (Components)類用來管理這些模板，應用邏輯部分通過服務 (Services)來完成，然後在模塊中打包服務與組件，最後通過引導根模塊來啟動應用。

接下來我們會對以上 8 個部分分開解析：

模塊

模塊由一塊代碼組成，可用於執行一個簡單的任務。

Angular 應用是由模塊化的，它有自己的模塊系統：NgModules。

每個 Angular 應該至少要有一個模塊(根模塊)，一般可以命名為：AppModule。

Angular 模塊是一個帶有 @NgModule 裝飾器的類，它接收一個用來描述模塊屬性的元數據對象。

幾個重要的屬性如下：

• declarations （聲明） - 視圖類屬於這個模塊。 Angular 有三種類型的視圖類： 組件 、 指令 和 管道 。

• exports - 聲明（ declaration ）的子集，可用於其它模塊中的組件模板 。

• imports - 本模塊組件模板中需要由其它導出類的模塊。

• providers - 服務的創建者。本模塊把它們加入全局的服務表中，讓它們在應用中的任何部分都可被訪問到。

• bootstrap - 應用的主視圖，稱為根組件，它是所有其它應用視圖的宿主。只有根模塊需要設置 bootstrap 屬性中。

一個最簡單的根模塊:

app/app.module.ts 文件：

import{NgModule}from'@angular/core';import{BrowserModule}from'@angular/platform-browser';@NgModule({imports: [BrowserModule], providers: [Logger], declarations: [AppComponent], exports: [AppComponent], bootstrap: [AppComponent]})exportclassAppModule{}

接下來我們通過引導根模塊來啟動應用，開發過程通常在 main.ts 文件中來引導 AppModule ，代碼如下：

app/main.ts 文件：

import{platformBrowserDynamic}from'@angular/platform-browser-dynamic';import{AppModule}from'./app.module'; platformBrowserDynamic().bootstrapModule(AppModule);

組件(Components)

組件是一個模板的控制類用於處理應用和邏輯頁面的視圖部分。

組件是構成 Angular 應用的基礎和核心，可用於整個應用程序中。

組件知道如何渲染自己及配置依賴注入。

組件通過一些由屬性和方法組成的 API 與視圖交互。

創建 Angular 組件的方法有三步：

• 從 @angular/core 中引入 Component 修飾器

• 建立一個普通的類，並用 @Component 修飾它

• 在 @Component 中，設置 selector 自定義標籤，以及 template 模板

模板(Templates)

Angular模板的默認語言就是HTML。

我們可以通過使用模板來定義組件的視圖來告訴 Angular 如何顯示組件。以下是一個簡單是實例：

<div>網站地址 : {{site}}</div>

在Angular中，默認使用的是雙大括號作為插值語法，大括號中間的值通常是一個組件屬性的變量名。

元數據(Metadata)

元數據告訴 Angular 如何處理一個類。

考慮以下情況我們有一個組件叫作 Component ，它是一個類，直到我們告訴 Angular 這是一個組件為止。

你可以把元數據附加到這個類上來告訴 Angular Component 是一個組件。

在 TypeScript 中，我們用 裝飾器 (decorator) 來附加元數據。

實例

@Component({ selector : 'mylist', template : '<h2>菜鳥教程</h2>' directives : [ComponentDetails]})export class ListComponent{...}

@Component 裝飾器能接受一個配置對象，並把緊隨其後的類標記成了組件類。

Angular 會基於這些信息創建和展示組件及其視圖。

@Component 中的配置項說明：

• selector - 一個 css 選擇器，它告訴 Angular 在 父級 HTML 中尋找一個 <mylist> 標籤，然後創建該組件，並插入此標籤中。

• templateUrl - 組件 HTML 模板的地址。

• directives - 一個數組，包含 此 模板需要依賴的組件或指令。

• providers - 一個數組，包含組件所依賴的服務所需要的依賴注入提供者。

數據綁定(Data binding)

數據綁定為應用程序提供了一種簡單而一致的方法來顯示數據以及數據交互，它是管理應用程序裡面數值的一種機制。

通過這種機制，可以從HTML裡面取值和賦值，使得數據的讀寫，數據的持久化操作變得更加簡單快捷。

如圖所示，數據綁定的語法有四種形式。每種形式都有一個方向——從 DOM 來、到 DOM 去、雙向，就像圖中的箭頭所示意的。

• 插值 : 在 HTML 標籤中顯示組件值。

  <h3>{{title}}<img src="{{ImageUrl}}"></h3>

• 屬性綁定: 把元素的屬性設置為組件中屬性的值。

  <img [src]="userImageUrl">

• 事件綁定: 在組件方法名被點擊時觸發。

  <button (click)="onSave()">保存</button>

• 雙向綁: 使用Angular裡的NgModel指令可以更便捷的進行雙向綁定。

  <input [value]="currentUser.firstName" (input)="currentUser.firstName=$event.target.value" >

指令（Directives）

Angular模板是動態的 。當 Angular 渲染它們時，它會根據指令對 DOM 進行修改。

指令是一個帶有"指令元數據"的類。在 TypeScript 中，要通過 @Directive 裝飾器把元數據附加到類上。

在Angular中包含以下三種類型的指令：

• 屬性指令：以元素的屬性形式來使用的指令。

• 結構指令：用來改變DOM樹的結構

• 組件：作為指令的一個重要子類，組件本質上可以看作是一個帶有模板的指令。

<li *ngFor="let site of sites"></li><site-detail *ngIf="selectedSite"></site-detail>

*ngFor 告訴 Angular 為 sites 列表中的每個項生成一個 <li> 標籤。

*ngIf 表示只有在選擇的項存在時，才會包含 SiteDetail 組件。

服務(Services)

Angular2中的服務是封裝了某一特定功能，並且可以通過注入的方式供他人使用的獨立模塊。

服務分為很多種，包括：值、函數，以及應用所需的特性。

例如，多個組件中出現了重複代碼時，把重複代碼提取到服務中實現代碼複用。

以下是幾種常見的服務：

• 日誌服務

• 數據服務

• 消息總線

• 稅款計算器

• 應用程序配置

以下實例是一個日誌服務，用於把日誌記錄到瀏覽器的控制檯：

export class Logger { log(msg: any) { console.log(msg); } error(msg: any) { console.error(msg); } warn(msg: any) { console.warn(msg); }}

依賴注入

控制反轉（Inversion of Control，縮寫為IoC），是面向對象編程中的一種設計原則，可以用來減低計算機代碼之間的耦合度。其中最常見的方式叫做依賴注入（Dependency Injection，簡稱DI），還有一種方式叫"依賴查找"（Dependency Lookup）。

通過控制反轉，對象在被創建的時候，由一個調控系統內所有對象的外界實體，將其所依賴的對象的引用傳遞給它。也可以說，依賴被注入到對象中。

在傳統的開發模式中，調用者負責管理所有對象的依賴，循環依賴一直是夢魘，而在依賴注入模式中，這個管理權交給了注入器(Injector)，它在軟件運行時負責依賴對象的替換，而不是在編譯時。這種控制反轉，運行注入的特點即是依賴注入的精華所在。

Angular 能通過查看構造函數的參數類型，來得知組件需要哪些服務。 例如， SiteListComponent 組件的構造函數需要一個 SiteService:

constructor(private service: HeroService) { }

當 Angular 創建組件時，會首先為組件所需的服務找一個注入器（ Injector ） 。

注入器是一個維護服務實例的容器，存放著以前創建的實例。

如果容器中還沒有所請求的服務實例，注入器就會創建一個服務實例，並且添加到容器中，然後把這個服務返回給 Angular 。

當所有的服務都被解析完並返回時， Angular 會以這些服務為參數去調用組件的構造函數。 這就是依賴注入 。