走進(jìn)AngularJS4的大門
AngularJS介紹：
AngularJS是一款來自Google的前端JavaScript框架，也是SPA框架。AngularJS框架的體積非常小耙饰，但是設(shè)計(jì)理念和功能卻非常強(qiáng)大疮跑，極大的簡(jiǎn)化前端開發(fā)的負(fù)擔(dān)，它快速成為咯JavaScript的主流框架齐唆，幫助開發(fā)者從事web開發(fā)律秃。
誕生于2009年1.5和4.0為兩個(gè)重要的版本爬橡。Angular4是語(yǔ)義化的版本治唤，將盡可能兼容Aangular 2棒动，因?yàn)锳ngular團(tuán)隊(duì)不想重蹈從Angular 1.X 到 Angular 2.X 的覆轍。
速度更快宾添、體積更小船惨、優(yōu)化view引擎、精簡(jiǎn)@angular/core缕陕、優(yōu)化Nglf和NgFor粱锐。
接下來的規(guī)劃：
Predictable,Transparent & Incremental Evolution
| :-------------: | :----------------: |
| Version 4 | March 2017 |
| Version 5 | September/October 2017 |
| Version 6 | March 2018 |
| Version 7 | September/October 2018 |
學(xué)習(xí)曲線
Angular JS 核心概念
Angular 第一代
JavaScript不可變對(duì)象
Angular 2系統(tǒng)架構(gòu)中組件是最核心的概念，組件由元數(shù)據(jù)（Metadata)扛邑、組件類（Component) 和模板 （Template) 組成 怜浅，其中：
- 1、元數(shù)據(jù)描述組件的屬性
- 2蔬崩、組件類實(shí)現(xiàn)組件的功能恶座，可調(diào)用依賴注入（Dependent Injection) 的服務(wù)（Service)
- 3、模板定義組件的神力（View)沥阳，其中包括HTML元素（element)跨琳、其他組件和/或Directive。
組件類和模板通過數(shù)據(jù)綁定關(guān)聯(lián)：通過屬性綁定（Perperty Binding)在模板視圖中顯示屬性值桐罕，用戶操作模板視圖觸發(fā)事件通過事件綁定（Event Binding)回調(diào)組件的事件處理函數(shù)脉让。注意：系統(tǒng)架構(gòu)僅包括Angular 2 核心桂敛，可選的路由、HTTP服務(wù)未包括在內(nèi)溅潜。
組件Component
- selector : CSS selector,對(duì)組件一般是元素名稱
- template : 組件視圖模板
- providers : 組件級(jí)依賴注入的服務(wù)列表
- directives : 模板可使用的其他組件和Directive
- 模板可使用的 Pipe列表
- 本組件使用的CSS樣式表术唬。
組件類Class
組件類
- @Input聲明輸入的屬性綁定成員字段
- @Output聲明輸出的事件綁定成員字段
- 構(gòu)造函數(shù)通過參數(shù)類型CalcService自動(dòng)注入服務(wù)實(shí)例，并由TypeScript自動(dòng)賦值給私有的this.calc成員字段
- 在事件綁定的處理函數(shù)中,可以調(diào)用依賴注入的服務(wù),并更新成員變量值.成員變量值更新后伟恶，由Angular 2的變更檢測(cè)自動(dòng)更新到視圖中
- this.changed.next()向父組件輸出事件碴开，事件參數(shù)是字符串。
元數(shù)據(jù) Metadata
元數(shù)據(jù)告訴Angular 2 如何處理類博秫。如@Component是采用TypeScript標(biāo)注（decorator)方式表示的組件配置信息潦牛。TypeScript標(biāo)注是一個(gè)函數(shù)，將組件配置信息轉(zhuǎn)換為附加在類定義上的元數(shù)據(jù)挡育，Angular 2在運(yùn)行時(shí)根據(jù)元數(shù)據(jù)創(chuàng)建和顯示組件實(shí)例巴碗。
其他常的元數(shù)據(jù)包括@Injectable、@Input即寒、@Output橡淆、@RouteConfig等
數(shù)據(jù)綁定
依賴注入Dependency Injection
Directive
Angular 2模板根據(jù)directive指令動(dòng)態(tài)生成DOM。
Directive是使用@Directive標(biāo)注的類母赵，分為結(jié)構(gòu)型（structural )和屬性型（attribute)逸爵。系統(tǒng)預(yù)定義的結(jié)構(gòu)型Directive包括ngIf、ngFor和ngSwitch,屬性型Directive包括ngClass凹嘲、ngStyle等师倔。Directive可以自定義。
服務(wù)Service
Angular 2對(duì)服務(wù)沒有特殊定義周蹭；一般地趋艘，任何獨(dú)立的功能均可定義為服務(wù)。
服務(wù)主要被組件調(diào)用凶朗，組件通過依賴注入使用服務(wù)瓷胧。一個(gè)定義良好的組件一般地僅處理輸入屬性和事件回調(diào)，其他功能均可封裝為服務(wù)棚愤。
其他需要儲(chǔ)備的部分技術(shù)棧
優(yōu)點(diǎn)：
- 趨近于Webcompents
- 模版功能豐富
- 比較完善的前端MVC框架
- 引入Java中大師的優(yōu)秀概念
- 全新的命令行工具 Angular-CLI
- 完美實(shí)現(xiàn)MVC搓萧、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定宛畦、語(yǔ)義化標(biāo)簽瘸洛、依賴注入等等。
缺點(diǎn)：
- 雙向數(shù)據(jù)綁定刃永，任何操作都會(huì)造成scope臟檢查的機(jī)制货矮。
默認(rèn)的綁定方式為單向綁定，每個(gè)組件的背后都維護(hù)著一個(gè)獨(dú)立的變化監(jiān)聽器斯够。當(dāng)Zones捕獲到異步常囚玫，都會(huì)通過Angular執(zhí)行變化操作喧锦。每次檢測(cè)都始于根組件，并已深度優(yōu)先的員向葉子組件遍歷執(zhí)行（組件均已樹的形式組織）抓督。 - Angular1對(duì)移動(dòng)端超級(jí)不友好
- 第三方模塊對(duì)路由的支持并不友好
- $scope觀察機(jī)制燃少，隔離瀏覽器原生模塊，并用流的形式
- 響應(yīng)式表單以及JS的強(qiáng)類型語(yǔ)言
對(duì)比React
對(duì)比 Vue
綜合
AngularJS Hello World
分割線
博主為咯學(xué)編程：父母不同意學(xué)編程铃在，現(xiàn)已斷絕關(guān)系;戀人不同意學(xué)編程阵具，現(xiàn)已分手;親戚不同意學(xué)編程，現(xiàn)已斷絕來往;老板不同意學(xué)編程,現(xiàn)已失業(yè)三十年定铜。阳液。。揣炕。帘皿。。如果此博文有幫到你歡迎打賞畸陡，金額不限鹰溜。。丁恭。
