淺談angular的作用
一、簡單認識angular1 AngularJS是什麼？
AngularJs（簡稱ng）是一個用於設計動態web應用的結構框架。首先，它是一個框架，不是類庫，是像EXT一樣提供一整套方案用於設計web應用。它不僅僅是一個Javascript框架，因為它的核心其實是對HTML標籤的增強。何為HTML標籤增強？其實就是使你能夠用標籤完成一部分頁面邏輯，具體方式就是通過自定義標籤、自定義屬性等，這些HTML原生沒有的標籤/屬性在ng中有一個名字：指令（directive）。後面會詳細介紹。那麼，什麼又是動態web應用呢？與傳統web系統相區別，web應用能為使用者提供豐富的操作，能夠隨使用者操作不斷更新檢視而不進行url跳轉。ng官方也宣告它更適用於開發CRUD應用，即資料操作比較多的應用，而非是遊戲或影象處理類應用。為了實現這些，ng引入了一些非常棒的特性，包括模板機制、資料繫結、模組、指令、依賴注入、路由。通過資料與模板的繫結，能夠讓我們擺脫繁瑣的DOM操作，而將注意力集中在業務邏輯上。
另外一個疑問，ng是MVC框架嗎？還是MVVM框架？官網有提到ng的設計採用了MVC的基本思想，而又不完全是MVC，因為在書寫程式碼時我們確實是在用ng-controller這個指令(起碼從名字上看，是MVC吧)，但這個controller處理的業務基本上都是與view進行互動，這麼看來又很接近MVVM。讓我們把目光移到官網那個非醒目的title上：“AngularJS — Superheroic Javascript MVW Framework”。
2 AngularJS簡單介紹
AngularJS 重新定義了前端應用的開發方式。面對HTML和JavaScript之間的界線，它非但不畏縮不前，反而正面出擊，提出了有效的解決方案。很多前端應用的開發框架，比如Backbone、EmberJS等，都要求開發者繼承此框架特有的一些JavaScript物件。這種方式有其長處，但它不必要地汙染了開發者自己程式碼的物件空間，還要求開發者去了解記憶體裡那些抽象物件。儘管如此我們還是接受了這種方式，因為網路最初的設計無法提供 我們今天所需的互動性，於是我們需要框架，來幫我們填補JavaScript和HTML之間的鴻溝。而且有了它，你不用再“直接”操控DOM，只要給你的DOM註上metadata（即AngularJS裡的directive們），然後讓AngularJS來幫你操縱DOM。同時，AngularJS不依賴（也不妨礙）任何其他的框架。你甚至可以基於其它的框架來開發AngularJS應用。
3 那麼，我們什麼時候該用AngularJS呢？
AngularJS是一個 MV* 框架，最適於開發客戶端的單頁面應用。它不是個功能庫，而是用來開發動態網頁的框架。它專注於擴充套件HTML的功能，提供動態資料繫結（data binding），而且它能跟其它框架（如jQuery）合作融洽。
如果你要開發的是單頁應用，AngularJS就是你的上上之選。Gmail、Google Docs、Twitter和Facebook這樣的應用，都很能發揮AngularJS的長處。但是像遊戲開發之類對DOM進行大量操縱、又或者單純需要 極高執行速度的應用，就不是AngularJS的用武之地了。
二、 AugularJS特性
AngularJS是一個新出現的強大客戶端技術，提供給大家的一種開發強大應用的方式。在這裡我們淺談一下angular比較簡單的幾個特性，後邊咱們再具體談論angular的其他特性。
首先我們先來了解一下angular的五個小特性，具體瞭解一下：
2.1 特性一：雙向的資料繫結
資料繫結可能是AngularJS最酷最實用的特性。它能夠幫助你避免書寫大量的初始程式碼從而節約開發時間。一個典型的web應用可能包含了80%的程式碼用來處理，查詢和監聽DOM。資料繫結是的程式碼更少，你可以專注於你的應用。
我們想象一下Model是你的應用中的簡單事實。你的Model是你用來讀取或者更新的部分。資料繫結指令提供了你的Model投射到view的方法。這些投射可以無縫的，毫不影響的應用到web應用中。
傳統來說，當model變化了。 開發人員需要手動處理DOM元素並且將屬性反映到這些變化中。這個一個雙向的過程。一方面，model變化驅動了DOM中元素變化，另一方面，DOM元素的變化也會影響到Model。這個在使用者互動中更加複雜，因為開發人員需要處理和解析
這些互動，然後融合到一個model中，並且更新View。這是一個手動的複雜過程，當一個應用非常龐大的時候，將會是一件非常費勁的事情。
這裡肯定有更好的解決方案！那就是AngularJS的雙向資料繫結，能夠同步DOM和Model等等。
這裡有一個非常簡單的例子，用來演示一個input輸入框和
元素的雙向繫結(例01)：
<!doctype html>
Hello, {{user.name}}!
說明：實際效果請大家看AngularJS/demo/index.html 2.2 特性二：模板 在AngularJS中，一個模板就是一個HTML檔案。但是HTML的內容擴充套件了，包含了很多幫助你對映model到view的內容。 HTML模板將會被瀏覽器解析到DOM中。DOM然後成為AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板來生成一些指導，即，directive（指令）。所有的指令都負責針對view來設定資料繫結。 我們要理解AuguarJS並不把模板當做String來操作。輸入AngularJS的是DOM而非string。資料繫結是DOM變化，不是字串的連線或者innerHTML變化。使用DOM作為輸入，而不是字串，是AngularJS區別於其它的框架的最大原因。使用DOM允許你擴充套件指令詞彙並且可以建立你自己的指令，甚至開發可重用的元件。 最大的好處是為設計師和開發者建立了一個緊密的工作流。設計師可以像往常一樣開發標籤，然後開發者拿過來新增上功能，通過資料繫結將會使得這個過程非常簡單。 這裡有一個例子，我們使用ng-repeat指令來迴圈圖片陣列並且加入img模板，如下： function AlbumCtrl($scope) { scope.images = [ {"image":"img/image_01.png", "description":"Image 01 description"}, {"image":"img/image_02.png", "description":"Image 02 description"}, {"image":"img/image_03.png", "description":"Image 03 description"}, {"image":"img/image_04.png", "description":"Image 04 description"}, {"image":"img/image_05.png", "description":"Image 05 description"} ]; }2.3 特性三：MVC
針對客戶端應用開發AngularJS吸收了傳統的MVC基本原則。MVC或者Model-View-Controll設計模式針對不同的人可能意味不同的東西。AngularJS並不執行傳統意義上的MVC，更接近於MVVM（Moodel-View-ViewModel)。
Model
model是應用中的簡單資料。一般是簡單的javascript物件。這裡沒有必要繼承框架的classes，使用proxy物件封裝或者使用特別的setter/getter方法來訪問。事實上我們處理vanilla javascript的方法就是一個非常好的特性，這種方法使得我們更少使用應用的原型。
ViewModel
viewmodel是一個用來提供特別資料和方法從而維護指定view的物件。
viewmodel是
scope只是一個簡單的js物件，這個物件使用簡單的API來偵測和廣播狀態變化。
Controller
controller負責設定初始狀態和引數化
scope擁有一個針對資料的參考，controller定義行為，view處理佈局和互動。
2.4 特性四：服務和依賴注入
AngularJS服務其作用就是對外提供某個特定的功能。
AngularJS擁有內建的依賴注入（DI）子系統，可以幫助開發人員更容易的開發，理解和測試應用。
DI允許你請求你的依賴，而不是自己找尋它們。比如，我們需要一個東西，DI負責找建立並且提供給我們。
為了而得到核心的AngularJS服務，只需要新增一個簡單服務作為引數，AngularJS會偵測並且提供給你：
function EditCtrl($scope, $location,
window’, function (win) {
return function (msg) {
win.alert(msg);
};
}]);
function myController(scope, notifyService) {
scope.callNotify = function (msg) {
notifyService(msg);
};
}
myController.
scope’, ‘notify’];
2.5 特性五：指令（Directives）
指令是我個人最喜歡的特性。你是不是也希望瀏覽器可以做點兒有意思的事情？那麼AngularJS可以做到。
指令可以用來建立自定義的標籤。它們可以用來裝飾元素或者操作DOM屬性。可以作為標籤、屬性、註釋和類名使用。
這裡是一個例子，它監聽一個事件並且針對的更新它的KaTeX parse error: Expected '}', got 'EOF' at end of input: …ller: function(scope, $attrs, mySharedService) {
on(‘handleBroadcast’, function() {
$scope.message = 'Directive: ’ + mySharedService.message;
});
},
replace: true,
template: ‘’
};
});
然後，你可以使用這個自定義的directive來使用：
使用一系列的元件來建立你自己的應用將會讓你更方便的新增，刪除和更新功能。