前幾天師傅讓我了解一下angularJS，angularJS是一個前端框架，具體的優缺點和運用場景我現在也還沒有搞清楚，暫時就先不做描述了，留到運用以后進行補充吧。
angularJS四大核心特性：MVC、Module（模塊化）、指令系統、雙向數據綁定。
下面就以上四大核心特性，進行一些簡要介紹：
1、MVC（Module——Control——View）
我們應該都知道MVC代表：數據模型層（Module）——業務邏輯和控制邏輯（Control）——視圖層（View），先看一個簡單的angularJS例子：
<!Doctype html> <html ng-app> <head> <meta charset="utf-8"> <script> function HelloAngular($scope){ $scope.greeting = { text: "Hello" }; } </script> </head> <body> <div ng-controller="HelloAngular"> <p>{{greeting.text}},Angular</p> </div> </body> <script src="js/angular-1.3.0.js"></script> </html>
運行結果：Hello,Angular
分析這個簡單的例子，我們可以比較明顯的區分出MVC的各層，div中定義的ng-controller就是一個控制器，這個控制器被定義為一個函數，而p標簽的內容很明顯就是顯示層，函數中定義了一個greeting對象的text屬性，而在顯示曾中的通過{{}}獲取它的值，很明顯為數據模型層。這樣頁面顯示的內容就是數據模型的值了。
2、Module（模塊化）
上面的例子中我們定義了一個全局函數，但是有經驗的開發者都知道我們在開發過程中應該盡量避免定義全局變量和全局函數。因此我們就需要了解angularJS的模塊化特性了，我們修改上面的實例
<!Doctype html> <html ng-app="HelloAngular"> <head> <meta charset="utf-8"> </head> <body> <div ng-controller="helloAngular"> <p>{{greeting.text}},Angular</p> </div> </body> <script src="js/angular-1.3.0.js"></script> <script> var myModule = angular.module("HelloAngular", []); myModule.controller("helloAngular", ['$scope', function HelloAngular($scope) { $scope.greeting = { text: 'Hello' }; } ]); </script> </html>
和上面的實例比對，下面的實例中使用angular的module方法定義了一個模塊，並在定義的模塊上調用了一個controller方法，很明顯是定義了一個myModule模塊的一個控制器，該控制器的名字為helloAngular，其具體實現則為上面實例中的HelloAngular函數，這樣我們就把控制器模塊化了，而不在使用全局函數作為控制器。
注意：一切都是從模塊開始的，我們在使用angularJS時，一定要先想到模塊，所有的東西都是建立在模塊的基礎上，只有定義了模塊才能調用其它方法。
上面實例中的ng-app相當於java中main函數，所以每個頁面中只能定義一個ng-app，他定了所在的模塊。
3、指令系統
angular的指令系統是最有特色、最吸引人的一個特性。下面先看一個實例：
<!Doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> </head> <body> <hello></hello> </body> <script src="js/angular-1.3.0.js"></script> <script> var myModule = angular.module("MyModule", []); myModule.directive("hello", function() { return { restrict: 'E', template: '<div>Hi everyone!</div>', replace: true } }); </script> </html>
實例中的html代碼中有一個hello標簽，但我們知道標准的HTML代碼中並沒有hello標簽，我們再看一下具體的js代碼中，如上個實例，首先定義了一個模塊myModule，然后在模塊上調用了directive函數，很明顯hello則是這個指令名稱，而對應的方法也很明顯，返回一個template，而這個templte的內容則成為了hello標簽的內容了。
大家想一下，如果我們定義大量的指令，然后就可以在頁面中隨便調用了。
4、雙向數據綁定
大部分框架實現的都是單向數據綁定，單向數據綁定的意思是將數據綁定到模板上，並且顯示到界面上，這種模式的缺點是顯示出來后，當數據更改時，並不能及時的更新到頁面上，因此angular提出了雙向數據綁定的定義。
我們來看一個實例：
<!Doctype html> <html ng-app> <head> <meta charset="utf-8"> </head> <body> <div> <input ng-model="greeting.text"/> <p>{{greeting.text}},AngularJS</p> </div> </body> <script src="js/angular-1.3.0.js"></script> </html>
界面截圖：
該實例無論你在input中輸入任何內容，都會實時的顯示在下面的p標簽中，我們可以看到該實例中我們沒有寫任何js代碼，我們在input上綁定了一個ng-model，它的值為greeting.text，而在p標簽中則獲取這個值，實時顯示在html中。
