第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

組件數(shù)據(jù)綁定流向

Angular2 : 八個核心組件

模塊、組件、元數(shù)據(jù)、模板、數(shù)據(jù)綁定、服務(wù)、指令、依賴注入

組件核心，其余是為組件服務(wù)

組件要素：JavaScript、HTML、CSS

Angular內(nèi)部處理流程

模板與用戶直接進(jìn)行交互--》模板接收來自用戶的操作--》將數(shù)據(jù)綁定到組件類中--》組件類處理后更新模板視圖反饋給用戶.

Angular核心概念

1.模塊

2.組件

3.元數(shù)據(jù)

4.模板

5.數(shù)據(jù)綁定

6.服務(wù)

7.指令

8.依賴注入

Angular要成功運(yùn)行至少要定義一個模塊,因?yàn)樾枰粋€模塊作為應(yīng)用啟動的入口,這種模塊稱作為根模塊.

往后應(yīng)用添加新的模塊時只需將新模塊導(dǎo)入到根模塊中即可.

Angular中的模塊支持懶加載.

*服務(wù)不在模塊的導(dǎo)入和導(dǎo)出范疇,因?yàn)榉?wù)作用于模塊時是作用于全局的,所有的組件都可以直接使用模塊中的服務(wù).

應(yīng)用模塊

每個應(yīng)用模塊都有自己的指令、組件、服務(wù)等,如果想在一個應(yīng)用模塊中使用另一個應(yīng)用模塊中的指令、組件則需要結(jié)合模塊的導(dǎo)入和導(dǎo)出功能

使用@NgModule裝飾器聲明應(yīng)用模塊

元數(shù)據(jù):

declarations:包裝組件、指令

providers:依賴注入服務(wù)

imports:導(dǎo)入其他模塊,將會繼承導(dǎo)入模塊中暴露的指令、組件

bootstrap:指定Angular應(yīng)用的根組件,此參數(shù)只在根模塊中使用.

exports:設(shè)置本模塊對外暴露的組件或指令,其他模塊導(dǎo)入此模塊只能使用此參數(shù)暴露的組件和指令.

應(yīng)用模塊

每個應(yīng)用模塊都有自己的指令、組件、服務(wù)等,如果想在一個應(yīng)用模塊中使用另一個應(yīng)用模塊中的功能則需要結(jié)合模塊的導(dǎo)入和導(dǎo)出功能

模塊

Angular中的模塊包括文件模塊和應(yīng)用模塊

文件模塊類似Java的類庫

應(yīng)用模塊即按業(yè)務(wù)邏輯將程序進(jìn)行邏輯劃分.

Angular內(nèi)置了很多文件模塊

核心模塊:

@angular/core?

通用模塊:

@angular/common

表單模塊:

@angular/forms

網(wǎng)絡(luò)模塊:

@angular/http

每個文件模塊下封裝了很多API,在使用到這些API時需要通過import命令進(jìn)行導(dǎo)入.

import {類名} from "文件模塊"

依賴注入:組件引入外部構(gòu)建的機(jī)制(服務(wù))

組件引入服務(wù)是引入服務(wù)組件類的實(shí)例,因此服務(wù)在被引用之前會有一個實(shí)例化的過程.

組件引入服務(wù)的方法:

1.Component裝飾器使用providers元數(shù)據(jù)指定引入服務(wù)的名稱.

2.組件類的構(gòu)造方法中帶服務(wù)類型(類似autowired=construtor)

由于存在組件樹,當(dāng)組件注入服務(wù)后,其所有的子組件都能使用此服務(wù)并且是使用同一個服務(wù)實(shí)例.

每個provider對應(yīng)一個新的服務(wù)實(shí)例,因此如果想在某個組件使用新的服務(wù)實(shí)例而不使用繼承父組件的則在該組件注入服務(wù)實(shí)例即可.

服務(wù)

服務(wù)提供特定的功能,可以在組件以及應(yīng)用模塊中使用.

*服務(wù)其實(shí)也是一個組件類

依賴注入:引入外部構(gòu)建的機(jī)制

組件以及應(yīng)用模塊引入服務(wù)是引入服務(wù)組件類的實(shí)例,因此服務(wù)在被引用之前會有一個實(shí)例化的過程.

組件引入服務(wù)的方法:

1.Component裝飾器使用providers元數(shù)據(jù)指定引入服務(wù)的名稱.

2.組件類的構(gòu)造方法中帶服務(wù)類型(類似autowired=construtor)

由于存在組件樹,當(dāng)組件注入服務(wù)后,其所有的子組件都能使用此服務(wù)并且是使用同一個服務(wù)實(shí)例.

每個provider對應(yīng)一個新的服務(wù)實(shí)例,因此如果想在某個組件使用新的服務(wù)實(shí)例而不使用繼承父組件的則在該組件注入服務(wù)實(shí)例即可.

應(yīng)用模塊中引入服務(wù)的方法

1.NgModule裝飾器使用providers元數(shù)據(jù)指定引入服務(wù)的名稱.

當(dāng)應(yīng)用模塊注入服務(wù),則服務(wù)可以在應(yīng)用全局中使用.

指令

Angular的指令分為：屬性指令、結(jié)構(gòu)指令、自定義指定

屬性指令:用于改變組件模板的外觀(樣式)或行為,在元素的屬性使用.

結(jié)構(gòu)指令:改變組件模板的DOM結(jié)構(gòu).

自定義指令:使用@Directive裝飾器定義指令

若@Directive裝飾器的selector元數(shù)據(jù)有中括號則表示指令在元素的屬性上進(jìn)行使用.

*Augular內(nèi)部已預(yù)定義了很多指令.

指令的使用:

templete:"<p [style.color] = "textColor" >{{greeting}}</p>"

*textColor為組件類中的屬性.

數(shù)據(jù)是通過屬性綁定自上而下的進(jìn)行傳遞、通過事件綁定自下而上的進(jìn)行傳遞.

子組件類中的@Input()標(biāo)識表示子組件的輸入接口,用于接收來自父組件的數(shù)據(jù).

父組件的模板定義中data被當(dāng)做屬性來使用(屬性綁定)

*屬性綁定既負(fù)責(zé)組件內(nèi)模板與組件類數(shù)據(jù)的傳遞也負(fù)責(zé)組件中數(shù)據(jù)的傳遞.

組件樹

若ContactList是Contact的父組件,則將Contact子組件匹配的標(biāo)簽適用在父組件模板的定義中即可.

若想在父組件中使用子組件的屬性則需要外加導(dǎo)入的過程.

組件渲染流程

執(zhí)行Component裝飾器將裝飾器中的元數(shù)據(jù)注入到組件類中,最終Angular解析組件,將模板中的內(nèi)容匹配到指定標(biāo)簽的元素中.

*模板中的數(shù)據(jù)取自組件類.