大家好，我是龄减，一枚正直純潔善良的前端程序員项钮，今天給大家分享以下知識(shí)點(diǎn)，ngularjs雙向綁定后，發(fā)生了什么事情烁巫？是什么可以讓view層和Controller層進(jìn)行綁定的鳖敷？?
1.背景介紹
angular是什么？
AngularJS[1]誕生于2009年程拭，由Misko Hevery等人創(chuàng)建定踱，后為Google所收購(gòu)。是一款優(yōu)秀的前端JS框架恃鞋，
? ? ? ? 已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中崖媚。AngularJS有著諸多特性，最為核心的是：MVC恤浪、模塊化畅哑、雙向數(shù)據(jù)綁定、語義化標(biāo)簽水由、依賴注入等等荠呐。
AngularJS是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計(jì)的。HTML是一門很好的偽靜態(tài)文本展示設(shè)計(jì)的聲明式語言砂客，
? ? ? ? 但要構(gòu)建WEB應(yīng)用的話它就顯得乏力了泥张。AngularJS通過MVC模式（MVC）功能增強(qiáng)基于瀏覽器的應(yīng)用，使開發(fā)和測(cè)試變得更加容易鞠值。
通常媚创，我們是通過js來解決靜態(tài)網(wǎng)頁(yè)技術(shù)在構(gòu)建動(dòng)態(tài)應(yīng)用上的不足；但是原生js代碼量會(huì)很大彤恶；
類庫(kù) -類庫(kù)是一些函數(shù)的集合钞钙，它能幫助你寫WEB應(yīng)用。起主導(dǎo)作用的是你的代碼声离，由你來決定何時(shí)使用類庫(kù)芒炼。類庫(kù)有：jQuery等
框架 -框架是一種特殊的、已經(jīng)實(shí)現(xiàn)了的WEB應(yīng)用术徊，你只需要對(duì)它填充具體的業(yè)務(wù)邏輯本刽。這里框架是起主導(dǎo)作用的，由它來根據(jù)具體的應(yīng)用邏輯來調(diào)用你的代碼弧关。目前比較流行的有angular盅安，vue，React世囊，
2.知識(shí)剖析
angular的核心思想
? ? ? ? ? ? Angular是創(chuàng)建在這樣的信念上的：即聲明式編程應(yīng)該用于構(gòu)建用戶界面以及編寫軟件構(gòu)建别瞭，而命令式編程非常適合來表示業(yè)務(wù)邏輯。[3]框架采用并擴(kuò)展了傳統(tǒng)HTML株憾，通過雙向的數(shù)據(jù)綁定來適應(yīng)動(dòng)態(tài)內(nèi)容蝙寨，雙向的數(shù)據(jù)綁定允許模型和視圖之間的自動(dòng)同步晒衩。因此，Angular使得對(duì)DOM的操作不再重要并提升了可測(cè)試性墙歪。
angular的亮點(diǎn)和過人之處听系！
1.代碼組織結(jié)構(gòu)清晰
AngularJS模塊劃分明確，不同的代碼有其明確的存放處虹菲，可讀性強(qiáng)靠胜，便于維護(hù)和擴(kuò)展（后面會(huì)有代碼組織結(jié)構(gòu)圖）。
2.功能模塊易測(cè)試
AngularJS的代碼方便測(cè)試毕源。雖然代碼易測(cè)試不能成為一個(gè)框架閃光的決定性因素浪漠，但是反向思考，如果寫出來的代碼可測(cè)試性差將會(huì)使工作效率事倍功半霎褐。
3.雙向綁定
? ? ? ? ? ? 雙向綁定的出現(xiàn)址愿，無可爭(zhēng)議的大大簡(jiǎn)化了你的代碼量，與其說是技術(shù)的革新冻璃，不如說是一場(chǎng)思想上的顛覆與突破响谓。回想jQuery還需要通過在DOM中找到需要的元素并在其上添加事件監(jiān)聽省艳，通過觸發(fā)事件（如點(diǎn)擊等）才能解析獲取DOM元素中的值娘纷。而在AngularJS中只需要將DOM中的元素與js的某個(gè)屬性綁定，js屬性值變化會(huì)同步到DOM元素上拍埠，同樣的失驶，DOM元素值得變化也會(huì)映射到j(luò)s的屬性上土居≡婀海夸張點(diǎn)說，一個(gè)是刀耕火種擦耀，一個(gè)是蒸汽驅(qū)動(dòng)棉圈。
3.常見問題
怎么體現(xiàn)在代碼？
4.解決方案
AngularJS專業(yè)術(shù)語概覽
? ? ? ? ? ? 名稱
? ? ? ? ? ? 作用
? ? ? ? ? ? Module
? ? ? ? ? ? AngularJS中一切都是從Module模塊開始的眷蜓，模塊是組織代碼的容器分瘾，當(dāng)然模塊中還可以包含子模塊
? ? ? ? ? ? Routes
? ? ? ? ? ? 路由負(fù)責(zé)在應(yīng)用中基于state進(jìn)行頁(yè)面的跳轉(zhuǎn)
? ? ? ? ? ? Views
? ? ? ? ? ? Views是通過AngularJS編譯后呈現(xiàn)的DOM
? ? ? ? ? ? $scope
? ? ? ? ? ? $scope實(shí)際上就是一個(gè)JavaScript對(duì)象，controller和view都可以訪問它吁系，所以我們可以利用它在兩者間傳遞信息德召。在這個(gè) $scope
對(duì)象里，我們既存儲(chǔ)數(shù)據(jù)汽纤，又存儲(chǔ)將要運(yùn)行在view上的函數(shù)上岗。$scope是連接controller和view之間的橋梁，
? ? ? ? ? ? Controller
? ? ? ? ? ? 定義一些屬性和方法用于綁定到view的元素上蕴坪，一般來說肴掷，controller是比較輕量的敬锐，它里面只放一些負(fù)責(zé)view呈現(xiàn)的屬性和方法
? ? ? ? ? ? Directive
? ? ? ? ? ? 指令使得AngularJS能夠創(chuàng)建自定義的標(biāo)簽并實(shí)現(xiàn)相應(yīng)的功能，可以將指令看成一種特殊的html標(biāo)簽
? ? ? ? ? ? Service
? ? ? ? ? ? Service負(fù)責(zé)提供一些通用的功能函數(shù)呆瞻，比如有些數(shù)據(jù)在多個(gè)controller中都會(huì)用到台夺，就可以定義在一個(gè)service中
5.編碼實(shí)戰(zhàn)
6.拓展思考
7.參考文獻(xiàn)
參考一：AngularJS
參考二：AngularJS
8.更多討論
angular和jQuery哪個(gè)好用一些？
問題：angular適用于什么樣的項(xiàng)目
回答：angularjs框架比較全面或者說重痴脾，對(duì)于輕型的項(xiàng)目颤介，用起來會(huì)比較累贅。大型項(xiàng)目用會(huì)比較好赞赖。
具體什么才是大型項(xiàng)目還需要經(jīng)驗(yàn)买窟。這些大框架react或者angular，他們的編譯速度真的是需要好好改進(jìn)一下了薯定，即便是模塊 熱重載始绍，也是很花時(shí)間的。這點(diǎn)直接決定了生產(chǎn)力话侄。雖然我放到服務(wù)端編譯了亏推，但也就那樣
問題：controller與factory，service是什么關(guān)系年堆，怎么體現(xiàn)在代碼里吞杭？
回答：如之前圖里的邏輯關(guān)系，controller里主要寫和視圖層有關(guān)的邏輯变丧，以及將服務(wù)組合起來芽狗。
問題：在什么場(chǎng)景下，選擇 AngularJS 比其他前端框架更好痒蓬？
回答：有很多很多表單的應(yīng)用angularjs很好用童擎。
PPT
視頻
如果這篇文章對(duì)你有幫助，并且使你對(duì)修真院免費(fèi)在線學(xué)習(xí)感興趣攻晒，可以通過我的鏈接注冊(cè)成員會(huì)顾复，這會(huì)使我得到學(xué)分（兌換學(xué)時(shí)）延長(zhǎng)學(xué)習(xí)時(shí)間：
邀請(qǐng)鏈接：http://www.jnshu.com/login/1/13374512
