angular

時間 2019-11-09

原文原文鏈接

AngularJS 從新定義了前端應用的開發方式。面對HTML和JavaScript之間的界線，它非但不畏縮不前，反而正面出擊，提出了有效的解決方案。javascript

不少前端應用的開發框架，好比Backbone、EmberJS等，都要求開發者繼承此框架特有的一些JavaScript對象。這種方式有其長處，但它沒必要要地污染了開發者本身代碼的對象空間，還要求開發者去了解內存裏那些抽象對象。儘管如此咱們仍是接受了這種方式，由於網絡最初的設計沒法提供咱們今天所需的交互性，因而咱們須要框架，來幫咱們填補JavaScript和HTML之間的鴻溝。並且有了它，你不用再「直接」操控DOM，只要給你的DOM註上metadata（即AngularJS裏的directive們），而後讓AngularJS來幫你操縱DOM。同時，AngularJS不依賴（也不妨礙）任何其餘的框架。你甚至能夠基於其它的框架來開發AngularJS應用。html

2.3 何時該用AngularJS

AngularJS是一個 MV* 框架，最適於開發客戶端的單頁面應用。它不是個功能庫，而是用來開發動態網頁的框架。它專一於擴展HTML的功能，提供動態數據綁定（data binding），並且它能跟其它框架（如jQuery）合做融洽。前端

若是你要開發的是單頁應用，AngularJS就是你的上上之選。Gmail、Google Docs、Twitter和Facebook這樣的應用，都很能發揮AngularJS的長處。可是像遊戲開發之類對DOM進行大量操縱、又或者單純須要極高運行速度的應用，就不是AngularJS的用武之地了。java

3 AugularJS特性

AngularJS是一個新出現的強大客戶端技術，提供給你們的一種開發強大應用的方式。這種方式利用而且擴展HTML，CSS和javascript，而且彌補了它們的一些很是明顯的不足。本應該使用HTML來實現而如今由它開發的動態一些內容。web

AngularJS有五個最重要的功能和特性：設計模式

3.1 特性一：雙向的數據綁定

數據綁定多是AngularJS最酷最實用的特性。它可以幫助你避免書寫大量的初始代碼從而節約開發時間。一個典型的web應用可能包含了80%的代碼用來處理，查詢和監聽DOM。數據綁定是的代碼更少，你能夠專一於你的應用。數組

咱們想象一下Model是你的應用中的簡單事實。你的Model是你用來讀取或者更新的部分。數據綁定指令提供了你的Model投射到view的方法。這些投射能夠無縫的，絕不影響的應用到web應用中。瀏覽器

傳統來講，當model變化了。開發人員須要手動處理DOM元素而且將屬性反映到這些變化中。這個一個雙向的過程。一方面，model變化驅動了DOM中元素變化，另外一方面，DOM元素的變化也會影響到Model。這個在用戶互動中更加複雜，由於開發人員須要處理和解析這些互動，而後融合到一個model中，而且更新View。這是一個手動的複雜過程，當一個應用很是龐大的時候，將會是一件很是費勁的事情。網絡

這裏確定有更好的解決方案！那就是AngularJS的雙向數據綁定，可以同步DOM和Model等等。架構

這裏有一個很是簡單的例子，用來演示一個input輸入框和<h1>元素的雙向綁定(例01)：

<!doctype html>

<head>

</head>

<body>

<div>

<hr>

<h1>Hello, {{user.name}}!</h1>

</div>

</body>

</html>

說明：實際效果請你們看AngularJS/demo/index.html

3.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"}

];

}

<ul>