angularjs是一款功能強(qiáng)大的前端JS框架工具軟件，這款軟件不僅可以通過 <script> 標(biāo)簽添加到 HTML 頁面，而且還可以通過使用我們稱為標(biāo)識符(directives)的結(jié)構(gòu)，讓瀏覽器能夠識別新的語法。

【軟件介紹】

AngularJS是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計(jì)的。它誕生于2009年，由Misko Hevery 等人創(chuàng)建，是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中，其最為核心的特性包括：MVC、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語義化標(biāo)簽、依賴注入等等。
HTML是一門很好的為靜態(tài)文本展示設(shè)計(jì)的聲明式語言，但要構(gòu)建WEB應(yīng)用的話它就顯得乏力了，而AngularJS卻使用了不同的方法，它嘗試去補(bǔ)足HTML本身在構(gòu)建應(yīng)用方面的缺陷，AngularJS通過使用我們稱為標(biāo)識符(directives)的結(jié)構(gòu)，讓瀏覽器能夠識別新的語法。例如：使用雙大括號{{}}語法進(jìn)行數(shù)據(jù)綁定、使用DOM控制結(jié)構(gòu)來實(shí)現(xiàn)迭代或者隱藏DOM片段、支持表單和表單的驗(yàn)證、能將邏輯代碼關(guān)聯(lián)到相關(guān)的DOM元素上、能將HTML分組成可重用的組件等等，AngularJS試圖成為WEB應(yīng)用中的一種端對端的解決方案，這意味著它不只是你的WEB應(yīng)用中的一個(gè)小部分，而是一個(gè)完整的端對端的解決方案。
由于AngularJS官網(wǎng)本身采用AngularJS庫構(gòu)建，頁面中的AngularJS庫通過Google的CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）引入，所以國內(nèi)訪問會有問題，為了方便大家體驗(yàn)，小編為大家提供了AngularJS 1.6.2版本下載，有需求的朋友請?bào)w驗(yàn)。

【軟件優(yōu)勢】

1、AngularJS通過為開發(fā)者呈現(xiàn)一個(gè)更高層次的抽象來簡化應(yīng)用的開發(fā)，如同其他的抽象技術(shù)一樣，這也會損失一部分靈活性，換句話說，并不是所有的應(yīng)用都適合用AngularJS來做，AngularJS主要考慮的是構(gòu)建CRUD應(yīng)用。幸運(yùn)的是，至少90%的WEB應(yīng)用都是CRUD應(yīng)用，但是要了解什么適合用AngularJS構(gòu)建，就得了解什么不適合用AngularJS構(gòu)建
如游戲，圖形界面編輯器，這種DOM操作很頻繁也很復(fù)雜的應(yīng)用，和CRUD應(yīng)用就有很大的不同，它們不適合用AngularJS來構(gòu)建，像這種情況用一些更輕量、簡單的技術(shù)如jQuery可能會更好
2、AngularJS的一些出眾之處如下：
①構(gòu)建一個(gè)CRUD應(yīng)用可能用到的全部內(nèi)容包括：數(shù)據(jù)綁定、基本模板標(biāo)識符、表單驗(yàn)證、路由、深度鏈接、組件重用、依賴注入
②測試方面包括：單元測試、端對端測試、模擬和自動(dòng)化測試框架
③具有目錄布局和測試腳本的種子應(yīng)用作為起點(diǎn)

【簡單實(shí)例】

開始學(xué)習(xí)AngularJS的一個(gè)好方法是創(chuàng)建經(jīng)典應(yīng)用程序“Hello World!”
1、使用您喜愛的文本編輯器，創(chuàng)建一個(gè)HTML文件，例如：helloworld.html
2、將下面的源代碼復(fù)制到您的HTML文件
①當(dāng)加載該頁時(shí)，標(biāo)記ng-app告訴AngularJS處理整個(gè)HTML頁并引導(dǎo)應(yīng)用：
②載入AngularJS腳本：
③最后，標(biāo)簽中的正文是應(yīng)用的模板，在UI中顯示我們的問候語：
Hello {{'World'}}!
注意：使用雙大括號標(biāo)記{{}}的內(nèi)容是問候語中綁定的表達(dá)式，這個(gè)表達(dá)式是一個(gè)簡單的字符串‘World’

3、在web瀏覽器中打開這個(gè)HTML文件，即可看到效果。

【使用說明】

html通常以以下技術(shù)來解決靜態(tài)網(wǎng)頁技術(shù)在構(gòu)建動(dòng)態(tài)應(yīng)用上的不足：
【類庫】類庫是一些函數(shù)的集合，它能幫助你寫WEB應(yīng)用。起主導(dǎo)作用的是你的代碼，由你來決定何時(shí)使用類庫。類庫有：jQuery等
【框架】框架是一種特殊的、已經(jīng)實(shí)現(xiàn)了的WEB應(yīng)用，你只需要對它填充具體的業(yè)務(wù)邏輯。這里框架是起主導(dǎo)作用的，由它來根據(jù)具體的應(yīng)用邏輯來調(diào)用你的代碼?？蚣苡校簁nockout、sproutcore等。
AngularJS使用了不同的方法，它嘗試去補(bǔ)足HTML本身在構(gòu)建應(yīng)用方面的缺陷。AngularJS通過使用我們稱為指令(directives)的結(jié)構(gòu)，讓瀏覽器能夠識別新的語法。

【軟件特征】

一：MVC 模式
Angular遵循軟件工程的MVC模式,并鼓勵(lì)展現(xiàn)，數(shù)據(jù)，和邏輯組件之間的松耦合.通過依賴注入（dependency injection），Angular為客戶端的Web應(yīng)用帶來了傳統(tǒng)服務(wù)端的服務(wù)，例如獨(dú)立于視圖的控制。 因此，后端減少了許多負(fù)擔(dān)，產(chǎn)生了更輕的Web應(yīng)用。
Model:數(shù)據(jù),其實(shí)就是angular變量($scope.XX);
View: 數(shù)據(jù)的呈現(xiàn),Html+Directive(指令);
Controller:操作數(shù)據(jù),就是function,數(shù)據(jù)的增刪改查;

二：雙向綁定
AngularJS是建立在這樣的信念上的：即聲明式編程應(yīng)該用于構(gòu)建用戶界面以及編寫軟件構(gòu)建，而指令式編程非常適合來表示業(yè)務(wù)邏輯。框架采用并擴(kuò)展了傳統(tǒng)HTML，通過雙向的數(shù)據(jù)綁定來適應(yīng)動(dòng)態(tài)內(nèi)容，雙向的數(shù)據(jù)綁定允許模型和視圖之間的自動(dòng)同步。因此，AngularJS使得對DOM的操作不再重要并提升了可測試性。

三：依賴注入
依賴注入(Dependency Injection,簡稱DI)是一種設(shè)計(jì)模式, 指某個(gè)對象依賴的其他對象無需手工創(chuàng)建，只需要“吼一嗓子”，則此對象在創(chuàng)建時(shí)，其依賴的對象由框架來自動(dòng)創(chuàng)建并注入進(jìn)來,其實(shí)就是最少知識法則;模塊中所有的service和provider兩類對象，都可以根據(jù)形參名稱實(shí)現(xiàn)DI.

四：模塊化設(shè)計(jì)
高內(nèi)聚低耦合法則
1：官方提供的模塊           ng、ngRoute、ngAnimate
2：用戶自定義的模塊     angular.module('模塊名',[ ])

【使用教程】

1.在起點(diǎn)軟件園下載angularjs并進(jìn)行安裝。



2.Angularjs目錄結(jié)構(gòu)
最新版本是angular2.0,它與angular1.x區(qū)別比較大，我使用的版本是1.3版本。
在使用基本功能時(shí)，只需要導(dǎo)入angular.js或angular.min.js文件就可以。其它的js文件是angularjs拆分出來的功能，例如angular-route.js,它是關(guān)于路由的腳本文件，在1.2版本時(shí)，使用路由不需要單獨(dú)專稿angular-route.js,而在1.3版本后，使用路徑需要單獨(dú)導(dǎo)入angular-route.js

3.AngularJS基本使用介紹
創(chuàng)建web項(xiàng)目(使用Hbuilder),并導(dǎo)入js文件。
angularJs它主要的核心特性：MVC模塊化 數(shù)據(jù)綁定  語義化標(biāo)簽(指令)  依賴注入等

4.MVC
Mvc核心理念是:將管理數(shù)據(jù)的代碼(model),應(yīng)用邏輯代碼(controller),展示數(shù)據(jù)的代碼(view)分離開。
在angular應(yīng)用中，視圖就是DOM,控制器就是JavaScript,而模型數(shù)據(jù)被存儲在對象的屬性中。
示例: Html代碼
JS代碼


5.雙向數(shù)據(jù)綁定
在傳統(tǒng)的js框架中，它是將html代碼與數(shù)據(jù)混合在一起，在發(fā)送給用戶在顯示出來，而angular它可以將UI中某個(gè)部分映射到j(luò)avascript屬性上，然后讓它們自己去同步，這就叫做數(shù)據(jù)綁定，查看以下代碼：

6.模塊化
在上述代碼中，我在js文件中聲明了一個(gè)全局的函數(shù)demo1Controller，在js的開發(fā)中是不建議定義全局的函數(shù)或變量的，它污染了全局空間，這種編碼是不”優(yōu)雅”的。在angular中我可以使用module(模塊化來解決這個(gè)問題)
代碼進(jìn)行修改如下：Html代碼
JS代碼


7.依賴注入
在上述代碼中，大家一定有一個(gè)疑問，就是我在js代碼中使用的$scope它是由誰創(chuàng)建的，為什么我可以使用它？其實(shí)就全是依靠angular提供的依賴注入來完成的，依賴注入的概念我在學(xué)習(xí)spring中已經(jīng)接觸過，不過在前端開發(fā)中，這是我第一次使用依賴注入。
Angularjs中的注入一般分為三種：
推斷式注入
顯示注入（標(biāo)注式注入）
行內(nèi)注入（內(nèi)聯(lián)注入）
8.推斷式注入
如果沒有明確的聲明，AngularJS會假定參數(shù)名稱就是依賴的名稱。因此，它會在內(nèi)部調(diào)用函數(shù)對象的toString()方法，分析并提取出函數(shù)參數(shù)列表，然后通過$injector將這些參數(shù)注入進(jìn)對象實(shí)例。

9.顯示注入（標(biāo)注式注入）

10.行內(nèi)注入（內(nèi)聯(lián)注入）

【使用技巧】

怎么提高AngularJS的性能？
1.使用Lodash：
Lodash主要通過簡單的重寫一些基本的業(yè)務(wù)邏輯。而不依靠內(nèi)置的AngularJS 方法來提高我們的應(yīng)用程序的性能。

2.用 Chrome 開發(fā)工具 Profiler 識別性能瓶頸：
使用Chrome開發(fā)工具，可記錄分配時(shí)間點(diǎn)、獲取堆快照并記錄所分配的配置文件。

3.使用ng-if來替換ng-show ：
后者在特定元素上切換CSS顯示屬性，而ng-if實(shí)際上是從DOM 中刪除元素，當(dāng)使用的時(shí)候再去創(chuàng)建它。

4.不要頻繁使用ng-repeat：
頻繁的使用ng-repeat會增加我們程序的負(fù)擔(dān)，盡量少使用或者是不適用ng-repeat！

5.用 Batarang對 Watcher 進(jìn)行基準(zhǔn)測試：
Batarang是一個(gè)相當(dāng)不錯(cuò)的開發(fā)工具，使用它可以減少我們在調(diào)試上的壓力。

6.使用 console.time：
如果調(diào)試問題影響了Angular 性能，那么我們就需要使用console.time，這是一個(gè)很不錯(cuò)的 API


如何用angularjs進(jìn)行數(shù)據(jù)綁定？
1.首先我們新用開發(fā)工具新建一個(gè)Web項(xiàng)目，注意建一個(gè)空的Web項(xiàng)目即可，然后我們往空項(xiàng)目里添加一個(gè)html文件，然后通過Nuget管理包添加angularjs的文件。

2.下面很簡單了，就是引入angularjs包了，這個(gè)大家都會，小編引入的是壓縮版本的，如下圖所示。

3.然后我們往html文件中添加一個(gè)文本框，如下圖所示，其作用在接下來的步驟中你就會明白。

4.下面我們就要添加angularjs的內(nèi)容了，首先給頁面添加一個(gè)ng-app標(biāo)記，這個(gè)標(biāo)記標(biāo)識了從此標(biāo)記往下都是angularjs的領(lǐng)域了

5.然后我們給上面添加的input輸入框添加一個(gè)ng-model屬性，如下所示，ng-model在angularjs中起到了數(shù)據(jù)雙向綁定的關(guān)鍵性作用

6.下面我們就是要輸出input里的內(nèi)容了，在Jquery中我們一般是先獲得input元素，然后獲取里面的值賦值給span，而在angularjs中都省略了，直接通過表達(dá)式語句{{}}輸出內(nèi)容即可

7.下面我們運(yùn)行一下程序，你會發(fā)現(xiàn)，你在輸入框中輸入內(nèi)容，立馬就在右邊展示出來了。是不是很方便