angular4.0架構(gòu)概念1

1.Angular 應(yīng)用的基本構(gòu)造塊

Angular 是一個用 HTML 和 JavaScript 或者一個可以編譯成 JavaScript 的語言(例如 Dart 或者 TypeScript )誉裆,來構(gòu)建客戶端應(yīng)用的框架。
該框架包括一系列庫缸濒,有些是核心庫足丢,有些是可選庫。
我們是這樣寫 Angular 應(yīng)用的:用 Angular 擴(kuò)展語法編寫 HTML 模板庇配, 用組件類管理這些模板斩跌,用服務(wù)添加應(yīng)用邏輯, 用模塊打包發(fā)布組件與服務(wù)捞慌。
然后耀鸦,我們通過引導(dǎo)根模塊來啟動該應(yīng)用。 Angular 在瀏覽器中接管啸澡、展現(xiàn)應(yīng)用的內(nèi)容袖订,并根據(jù)我們提供的操作指令響應(yīng)用戶的交互


overview2.png

這個架構(gòu)圖展現(xiàn)了 Angular 應(yīng)用中的 8 個主要構(gòu)造塊:

2.模塊

module.png
Angular 應(yīng)用是模塊化的,并且 Angular 有自己的模塊系統(tǒng)嗅虏,它被稱為 Angular 模塊或 NgModules洛姑。
Angular 模塊很重要。這里只是簡單介紹皮服,在 Angular 模塊中會做深入講解楞艾。

每個 Angular 應(yīng)用至少有一個模塊(根模塊)参咙,習(xí)慣上命名為AppModule。
根模塊在一些小型應(yīng)用中可能是唯一的模塊硫眯,大多數(shù)應(yīng)用會有很多特性模塊蕴侧,每個模塊都是一個內(nèi)聚的代碼塊專注于某個應(yīng)用領(lǐng)域、工作流或緊密相關(guān)的功能两入。
Angular 模塊(無論是根模塊還是特性模塊)都是一個帶有@NgModule裝飾器的類净宵。

NgModule是一個裝飾器函數(shù),它接收一個用來描述模塊屬性的元數(shù)據(jù)對象谆刨。其中最重要的屬性是:

  • declarations 聲明本模塊中擁有的視圖類塘娶。Angular 有三種視圖類:組件指令管道痊夭。
  • exports declarations 的子集刁岸,可用于其它模塊的組件模板
  • imports 模塊聲明的組件模板需要的類所在的其它模塊她我。
  • providers 服務(wù)的創(chuàng)建者虹曙,并加入到全局服務(wù)列表中,可用于應(yīng)用任何部分番舆。
  • bootstrap 指定應(yīng)用的主視圖(稱為根組件)酝碳,它是所有其它視圖的宿主。只有根模塊才能設(shè)置bootstrap
    屬性恨狈。

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

2017-07-11_234730.jpg

AppComponent的export語句只是用于演示如何導(dǎo)出的疏哗,它在這個例子中并不是必須的。根模塊不需要導(dǎo)出任何東西禾怠,因?yàn)槠渌M件不需要導(dǎo)入根模塊返奉。

我們通過引導(dǎo)根模塊來啟動應(yīng)用。 在開發(fā)期間吗氏,你通常在一個main.ts文件中引導(dǎo)AppModule芽偏,就像這樣:
2017-07-11_235014.jpg

Angular 模塊 vs. JavaScript 模塊

Angular 模塊(一個用@NgModule裝飾的類)是 Angular 的基礎(chǔ)特性。
JavaScript 也有自己的模塊系統(tǒng)弦讽,用來管理一組 JavaScript 對象污尉。 它與 Angular 的模塊系統(tǒng)完全不同且完全無關(guān)。
JavaScript 中往产,每個文件是一個模塊被碗,文件中定義的所有對象都從屬于那個模塊。 通過export關(guān)鍵字仿村,模塊可以把它的某些對象聲明為公共的蛮放。 其它 JavaScript 模塊可以使用import 語句來訪問這些公共對象。


2017-07-11_235340.jpg

Angular 模塊庫

library-module.png

Angular 提供了一組 JavaScript 模塊奠宜“洌可以把它們看做庫模塊。
每個 Angular 庫的名字都帶有@angular前綴压真。
用 npm 包管理工具安裝它們娩嚼,用 JavaScript 的import語句導(dǎo)入其中某些部件。


2017-07-11_235647.jpg
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末滴肿,一起剝皮案震驚了整個濱河市岳悟,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌泼差,老刑警劉巖贵少,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異堆缘,居然都是意外死亡滔灶,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進(jìn)店門吼肥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來录平,“玉大人,你說我怎么就攤上這事缀皱《氛猓” “怎么了?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵啤斗,是天一觀的道長表箭。 經(jīng)常有香客問我,道長钮莲,這世上最難降的妖魔是什么免钻? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮臂痕,結(jié)果婚禮上伯襟,老公的妹妹穿的比我還像新娘。我一直安慰自己握童,他們只是感情好姆怪,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著澡绩,像睡著了一般稽揭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上肥卡,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天溪掀,我揣著相機(jī)與錄音,去河邊找鬼步鉴。 笑死揪胃,一個胖子當(dāng)著我的面吹牛璃哟,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播喊递,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼随闪,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了骚勘?” 一聲冷哼從身側(cè)響起铐伴,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎俏讹,沒想到半個月后当宴,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡泽疆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年户矢,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片于微。...
    茶點(diǎn)故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡逗嫡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出株依,到底是詐尸還是另有隱情驱证,我是刑警寧澤,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布恋腕,位于F島的核電站抹锄,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏荠藤。R本人自食惡果不足惜伙单,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望哈肖。 院中可真熱鬧吻育,春花似錦、人聲如沸淤井。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽币狠。三九已至游两,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間漩绵,已是汗流浹背贱案。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留止吐,地道東北人宝踪。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓侨糟,卻偏偏與公主長得像,于是被迫代替她去往敵國和親肴沫。 傳聞我的和親對象是個殘疾皇子粟害,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,072評論 25 707
  • 版本:Angular 5.0.0-alpha AngularDart(本文檔中我們通常簡稱 Angular ) 是...
    soojade閱讀 832評論 0 4
  • 模板表達(dá)式“{{}}”不能引用任何全局命名空間中的成員(如:window、document等等)的原因: 我想原因...
    科研者閱讀 963評論 2 4
  • 就讓套鹅,我們晚點(diǎn)在一起 不需要晚多久站蝠,就再過那么幾年,那時我們有穩(wěn)定的收入卓鹿,靠譜的工作菱魔,所有的一切步入正軌。你不再是...
    FallenAngels閱讀 270評論 1 3
  • 當(dāng)一群人在網(wǎng)絡(luò)上洋洋灑灑地咒罵一位明星時,所有罵客都認(rèn)為自己代表了正義杰妓,代表了月亮藻治。 我認(rèn)為這樣的心理,是自欺欺人...
    一紙一話閱讀 608評論 4 7