angular4-開發(fā)指南
var elems = document.querySelectorAll('.original-english');
[].forEach.call(elems, function(el) {
el.classList.remove("hidden");
});
中英文對比學(xué)習(xí)。中文網(wǎng)站翻譯的不是很好，有些語義不是很明確，需要參考英文學(xué)習(xí)。
- 使用angular 擴展語法編寫HTML模板
- 組件類管理模板
- 服務(wù)添加應(yīng)用邏輯
- 模塊打包發(fā)布組件和服務(wù)
- 引導(dǎo)根模塊啟動應(yīng)用
- Angular 在瀏覽器中接管、展現(xiàn)應(yīng)用的內(nèi)容，并根據(jù)我們提供的操作指令響應(yīng)用戶交互。
架構(gòu)圖：
從以上架構(gòu)圖可以看出主要由八大部分：
- 模塊-module
- 組件-component
- 模板-template
- 元數(shù)據(jù)-metadata
- 數(shù)據(jù)綁定-data binding
- 單向綁定
- 雙向綁定
- 指令-directive
- 服務(wù)-service
- 依賴注入-dependency injection
模塊
- angular應(yīng)用是模塊化的，有自己的模塊系統(tǒng)-NgModules,區(qū)別于JavaScript 模塊。
- 至少一個根模塊，appModule
- 每個模塊是一個內(nèi)聚代碼塊
- angular模塊是帶有 @NgModule 裝飾器的類,接收一個用來描述模塊屬性的元數(shù)據(jù)對象。其中最重要的屬性是:
- declarations:聲明本模塊中擁有的視圖類.三大視圖類：component，directive,pipe,在使用ng-cli命令創(chuàng)建時，會自動更新appModule
- imports - 本模塊聲明的組件模板需要的類所在的其它模塊
- providers - 服務(wù)的創(chuàng)建者，并加入到全局服務(wù)列表中，可用于應(yīng)用任何部分。
- exports - declarations 的子集，可用于其它模塊的組件模板。
5、我們通過引導(dǎo)根模塊來啟動應(yīng)用
組件
組件控制視圖，組件是個特殊的指令
組件通過一些由屬性和方法組成的 API 與視圖交互。
Angular creates, updates, and destroys components as the user moves through the application.
Your app can take action at each moment in this lifecycle through optional lifecycle hooks。
@angular/core/src/metadata/directives.d.ts
模板
通過模板定義組件視圖，告訴angular如何渲染組件。
元數(shù)據(jù)
Metadata tells Angular how to process a class.
In TypeScript, you attach metadata by using a decorator.
component metadata：
The template, metadata, and component together describe a view.
Apply other metadata decorators in a similar fashion to guide Angular behavior. @Injectable, @Input, and @Output are a few of the more popular decorators.
數(shù)據(jù)綁定
As the diagram shows, there are four forms of data binding syntax. Each form has a direction — to the DOM, from the DOM, or in both directions.
Two-way data binding is an important fourth form that combines property and event binding in a single notation, using the ngModel directive.
數(shù)據(jù)綁定在模板與對應(yīng)組件的交互中扮演了重要的角色。
數(shù)據(jù)綁定在父組件與子組件的通訊中也同樣重要。
指令
- A component is a directive-with-a-template --組件是一種特殊指令
- structural directive-結(jié)構(gòu)型指令通過在 DOM 中添加、移除和替換元素來修改布局。
- *ngIf
- *ngFor
- *ngSwitch
- attribute directive --屬性型 指令修改一個現(xiàn)有元素的外觀或行為
- ngModule
- ngClass
- ngStyle
服務(wù)
- 設(shè)計良好的組件為數(shù)據(jù)綁定提供屬性和方法，把其它瑣事都委托給服務(wù)。
依賴注入
- Angular使用依賴注入來為新組件提供他們需要的服務(wù)。
- Angular 通過查看構(gòu)造函數(shù)的參數(shù)類型得知組件需要哪些服務(wù)
- 當(dāng)Angular創(chuàng)建一個組件時，它首先要求一個注入器來獲取組件所需的服務(wù)。
- 注入器維護其先前創(chuàng)建的服務(wù)實例的容器
- 如果請求的服務(wù)實例不在容器中，則注入器會生成并將其添加到容器中，然后將服務(wù)返回給Angular
- 當(dāng)所有請求的服務(wù)都被解析并返回時，Angular可以使用這些服務(wù)作為參數(shù)調(diào)用組件的構(gòu)造函數(shù)
- 注入器如何創(chuàng)建新實例：provider，provider 可以創(chuàng)建或返回服務(wù)，通常是服務(wù)類本身。
- 可以在模塊中或組件中注冊提供商
- 把它注冊在組件級表示該組件的每一個新實例都會有一個服務(wù)的新實例。
