前面的話：最近空余時間在學 Angular 2，國慶節的時候看了官網的quickstart，還寫了一篇文章，只是一個hello world demo。后面繼續看了它的一個項目教程，剛開始還可以跟上，當后面就比較混亂了。的確，對于新手來講，要了解一個框架還是比較麻煩的。所以停止項目，開始看看 angular 的整體框架是如何的，聯系項目，分析下，慢慢來。

學習鏈接：中文官網

正文開始：

angular 應用：用帶 angular 拓展語法的 HTML 寫模板，用組件類管理這些模板，用服務添加應用邏輯，在模塊中打包發布組件與服務。通過引導 根模塊啟動應用。 angular 在瀏覽器中接管、展現應用的內容，并根據我們提供的操作指令響應用戶的交互。

這幾個名詞很重要，貫穿angular應用開發。

angular 應用的 8個主要構造塊：

模塊modules
組件components
模板template
元數據metadata
數據綁定data binding
指令directive
服務services
依賴注入dependency injection

模塊

angular 應用是模塊化的，有自己的模塊系統，叫做 angular 模塊/NgModules。

到底模塊是什么？在angular里模塊化意味著什么？

angular 應用至少有一個模塊（根模塊），稱為 AppModule。

大多數應用都有很多其它的 特性模塊，它們由一組領域類、工作流、或緊密相關的功能聚合形成。

angular的所有模塊都是一個帶有 @NgModule 裝飾器的類。

angular的模塊是類！！！

裝飾器是用來修飾JavaScript類的函數。負責把元數據附加到類上。

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

declarations（聲明）：本模塊中擁有的視圖類。angular 有三種視圖類：組件、指令、管道。
exports：declarations的子集，可用于其它模塊中的組件模板。
imports：本模塊組件模板中需要由其他模板導出的類。
providers：服務的創建者。本模塊把它們加入全局的服務表中，讓他們在應用中的任何部分都可被訪問到。
bootstrap：標識出應用的主視圖（根組件）。只有根模塊才可設置此屬性。

下面是一個簡單的根模塊：

// app.module.tsimport { NgModule }   from '@angular/core';import { BrowserModule } from '@angular/platform-browser';// @NgModle 裝飾器函數，接受一個對象，對象有幾個屬性@NgModule({ imports:   [ BrowserModule ], providers:  [ Logger ], declarations: [ AppComponent ], exports:   [ AppComponent ], bootstrap:  [ AppComponent ]})// AppComponent 的 export 語句導出，根模塊不需要導出，其他組件不需導入根模塊。export class AppModule { }

引導根模塊來啟動應用。在 main.ts 文件中引導 AppModule：

// app/main.tsimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';// 從app.module 文件導入了 AppModuleimport { AppModule } from './app.module';platformBrowserDynamic().bootstrapModule(AppModule);

此時，項目只有 app/app.module.ts 文件和 app/main.ts ，前者定義了應用的根模塊，后者引用它來啟動應用。

Angular 模塊與JavaScript模塊比較：

JavaScript的模塊化是分文件導入的，各文件就是各模塊。

Angular 模塊（用 @NgModule 裝飾的類）是Angular的基礎特性。

JavaScript的模塊系統管理一組JavaScript對象。

在JavaScript中，每個文件就是一個模塊，該文件中定義的對象從屬于該模塊。通過 export 關鍵字，可以把它的某些對象聲明為公開。別的模塊可以使用 import 語句訪問公開對象。

JavaScript的這個特性很有用。
export 關鍵字聲明為公開，import 語句訪問公開對象。

在 Angular 里這兩種都會用到，從上面的兩個個文件里，可以看到。

模塊庫

上面所說，Angular 用到了 JavaScript模塊，所以它的JS模塊就是庫模塊，JS文件庫。

Angular 庫的名字都以 @angular 前綴，可以使用 npm 包管理工具安裝，并如上面的 import 語句可以訪問它們中的對象。

這點很好理解，Angular 本來就是依托于JS實現的單頁面框架，所以它本身還是需要豐富的JS庫的。
比如，從 @angular/core 庫導入 Component 裝飾器：

import { Component } from '@angular/core';

使用JavaScript導入語句從Angular 庫中導入 Angular 的某些模塊。

import { BrowserModule } from '@angular/platform-browser';

在上面根模塊的代碼中，應用模塊需要 BrowserModule 的某些素材，所以把它加入 @NgModule 元數據的 imports 中：

imports ：[ BrowserModule ];

我們看看基本的@angular庫中有哪些JS模塊：

common
compiler
core
forms
http
platform-browser
platform-browser-dynamic
router
upgrade

所以，我們同時使用 Angular 和 JavaScript的模塊化系統。

這塊的 imports 和 exports 比較混亂，可以自己梳理下。

組件

組件負責控制屏幕上的一小塊地方，就是視圖。

在類中定義組件的應用邏輯（被用來為視圖提供支持）。組件通過一些由屬性和方法組成的API與視圖交互。

所以說組件是聯系視圖的。

前面的 export 關鍵字可以把模塊中的類聲明為公開的，然后 import 里實現訪問。

類里面有許多屬性和方法。

模板

通過組件自帶的模板來定義視圖。模板是以HTML形式存在的，它告訴 Angular 如何渲染組件（視圖）。

看一個組件文件的模板：

// app/hero-list.component.html<h2>Hero List</h2><p><i>Pick a hero from the list</i></p><ul> <li *ngFor="let hero of heroes" (click)="selectHero(hero)">  {{hero.name}} </li></ul><hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

模板看起來就是標準 HTML，它里面有一些非標準HTML的語法。*ngFor、{{hero.name}}、{click}、[hero] 和 <hero-derail> ，它們是 Angular 的模板語法。

所以說，Angular 是通過這種方式來處理 HTML的。

元數據

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

之前 export 的類里有一些方法和屬性，但是怎么處理這個類？

只要把元數據附加到這個類，就意味著這個類是個組件。

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

分析下面的元數據：

// app/hero-list.component.ts@Component({ moduleId: module.id, selector:  'hero-list', templateUrl: 'hero-list.component.html', providers: [ HeroService ]})export class HeroListComponent implements OnInit {/* . . . */}

@Component裝飾器把緊隨其后的類標記成了組件類。

在裝飾器后面的類就會被轉為組件類？

裝飾器里的配置項：

moduleId：為與模塊相關的URL提供基地址。
這個地址怎么使用的？
selector：CSS 選擇器，它告訴 Angular 在父級HTML尋找一個標簽，然后創建組件實例并插入標簽中。
實現HTML的顯示。
templateUrl：組件HTML模板的模塊相對地址。
HTML模板的設置位置。
providers：數組，包含組件所依賴的服務所需要的依賴注入提供商。告訴Angular該組件的構造函數需要服務，組件可以從服務獲取數據。
某些數據的傳遞通過服務進行，否則，其他的視圖只能控制靜態的展示。

@Component 里的元數據會告訴 Angular 如何取得你為組件設定的元數據。

模板、元數據和組件共同描繪出這個視圖。

組件就是視圖，模板提供HTML的結構性。

數據綁定

如果沒有框架，那么一些都需要我們來做。把數據值推送到HTML控件，并把用戶的反饋接收轉換成動作和值更新顯示，你可以使用jQuery來實現這個過程。

Angular 框架實現數據綁定，一種讓模板各部分與組件的各部分相互聯系的機制。在模板HTML中添加綁定標記，Angular 會連接模板和組件。

意味著，我們刻意自動實現視圖數據的更新，因為它綁定了組件，可以實現數據的關聯。

看一個示例：

// app/hero-list.component.ts<li>{{hero.name}}</li><hero-detail [hero]="selectedHero"></hero-detail><li (click)="selectHero(hero)"></li>

觀察到在這個模板HTML里，有一些非標準HTML的字符。

{{hero.name}} 插值表達式：在元素中顯示組件的 hero.name屬性的值。
[hero] 屬性綁定：把父組件的值傳到子組件的 hero 屬性中。
(click) 事件綁定：當用戶點擊元素時調用方法。

文件之間的互相關系需要梳理清楚。
雙向數據綁定：同時實現屬性綁定和事件綁定的功能。看示例：

// app/hero-detail.component.ts<input [(ngModel)]="hero.name">

數據屬性的值會從具有屬性綁定的組件傳到輸入框，事件綁定使用戶的修改被傳回組件，把屬性值設為最新的值。

指令

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

就是說解析模板HTML的時候，會解析其中的指令。

指令是一個帶有指令元數據的類。

指令是一個類，并且它含有指令源數據。

在TypeScript中，要通過 @Directive 裝飾器把元數據附加到類上。

和之前的類的元數據一樣，通過 @Component 裝飾器把元數據附加到后面的類，編程組件類。這個就是通過 @Directive 裝飾器把一些元數據附加到后面的指令類。

結構型指令：通過在DOM中添加、移除、替換元素修改布局。ngFor 、 ngIf。

屬性指令：修改現有元素的外觀或行為。ngModel

服務

服務分很多種，值、函數、應用所需的特性。

幾乎任何東西都可以是一個服務。典型的服務是一個類。

例如：

日志服務
數據服務
消息總線
稅款計算器
應用程序配置

組件是最大的服務消費者。

組件的一些操作需要服務提供一些數據。

示例，把日志記錄顯示到瀏覽器控制臺：

// app/logger.service.tsexport class Logger { log(msg: any)  { console.log(msg); } error(msg: any) { console.error(msg); } warn(msg: any) { console.warn(msg); }}

這些服務使得組件不用去服務器獲取數據、進行驗證……，這一切都可以通過服務完成。

組件的任務就是提供用戶體驗，僅此而已！

它介于視圖（由模板渲染）和應用邏輯（包括模型）之間。

設計良好的組件為數據綁定提供屬性和方法，對它們不重要的事情委托給服務。

依賴注入

依賴注入是提供類的新實例的一種方式，負責處理好類所需的全部依賴（服務）。

Angular 使用依賴注入提供我們需要的組件及組件所需的服務。

Angular 能通過查看構造函數的參數類型，來的值組件所需的服務。

示例：

// app/hero-list.component.tsconstructor(private service: HeroService) { }

構造函數的參數提到了一個服務。

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

注入器是一個維護服務實例的容器，存放著以前創建的實例。如果容器中還沒有所請求的服務實例，注入器就會創建一個服務實例，并且添加到容器中，然后把這個服務返回給 Angular。當所有服務都被解析完并返回， Angular 會以這些服務為參數去調用組件的構造函數，這就是依賴注入。

也就是說服務是先于組件被執行的。它先處理所有的服務到一個倉庫，然后再處理組件，組件需要哪個服務就從倉庫取出來給你。
提供商添加到根模塊，在任何地方使用的都是服務的同一個實例：

// app/app.module.tsproviders: [ BackendService, HeroService, Logger],

提供商是確定處理組件之前必須存在所依賴的組件
也可以把它注冊到組件層：

// app/hero-list.component.ts@Component({ moduleId: module.id, selector:  'hero-list', templateUrl: 'hero-list.component.html', providers: [ HeroService ]})

添加到裝飾器元數據的屬性中。

依賴注入的要點：

1、依賴注入滲透在整個Angular框架中
2、注入器是機制的核心
      注入器負責維護一個容器，存放創建過的服務實例
      注入器能使用提供商創建一個新的服務實例
3、提供商是一個用于創建服務的配方。
4、把提供商注冊到注入器。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。