AngularJS[1] 誕生於2009年，由Misko Hevery 等人創建，後為Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標簽、依賴註入等等。 AngularJs ...
AngularJS[1] 誕生於2009年，由Misko Hevery 等人創建，後為Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標簽、依賴註入等等。
AngularJs程式分為3部分：模板，表現層邏輯，數據（model）。
模板：我們用html，css寫的ui視圖代碼，其中包含AngularJs的指令，表達式，並最終會被AngularJs編譯機制編譯為附加在dom樹上。AngularJs的指令（directive）可以由我們自由擴展。
表現層邏輯：包括應用程式邏輯和行為。用javascript定義作為視圖控制器邏輯。在AngularJs作為MVC框架，在控制器中我們無需添加對於dom級的事件監聽，這些在AngularJs中已經內置了。在ui節點dom事件發生後AngularJs會自動轉到scope上的某個行為（Action）邏輯。
數據：視圖對象（viewobject）需要被AngularJs Scope（1.0中作為service出現）引用，可以使任何類型的javascript對象，數組，基本類型，對象。並且AngularJs會自動非同步更新模型，即在ui發生改變的時他會自動刷新模型（mode），反之在模型發生改變的時候也會自動刷新ui。在這裡我們不需要定義形如getter，setter的一些列方法。
AngularJS 控制器（Controller）
用於控制 AngularJS 應用
1 // controller的使用 2 var myApp = angular.module('myApp',[]); 3 //這裡第一個參數controller的名字，後面的參數是所要依賴的模塊 4 myApp.controller('GreetingController', ['$scope', function($scope) { 5 $scope.greeting = 'Hola!'; 6 }]);
下麵是html頁面
1 <!--ng-app指令定義了應用, ng-controller 定義了控制器。 2 ng-model 指令把輸入域的值綁定到應用程式變數 greeting 3 --> 4 <html ng-app="myApp"> 5 <head> 6 <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 7 </head> 8 <body ng-controller="GreetingController"> 9 <div ng-model="greeting"> 10 Hello {{greeting}}! 11 </div> 12 </body> 13 </html>
這是運行結果
AngularJs指令
通過內置的指令來為應用添加功能。。
下麵的是一些AngularJS的內置指令
我這裡主要講怎麼去自定義指令
1 var app = angular.module("myApp", []); 2 app.directive("runoobDirective", function() { 3 return { 4 restrict : "A", 5 template : "<h1>自定義指令!</h1>" 6 }; 7 });
restrict 值可以是以下幾種:
E 只限元素名使用
A 只限屬性使用
C 只限類名使用
M 只限註釋使用
restrict 預設值為 EA, 即可以通過元素名和屬性名來調用指令。
下麵是html代碼
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 5 </head> 6 <body ng-app="myApp"> 7 <my-directive></my-directive> 8 <div my-directive></div> 9 <script> 10 var app = angular.module("myApp", []); 11 app.directive("myDirective", function() { 12 return { 13 restrict : "EA", 14 template : "<h1>hello world!</h1>" 15 }; 16 }); 17 </script> 18 </html>
結果大家可以去試下，自定義編寫指令，主要用於重覆的html代碼，比如表單啥編寫一個指令，然後使用起來方便。
AngularJs 路由
AngularJS 路由允許我們通過不同的 URL 訪問不同的內容。
使用路由時，需要導入angular-route.js
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title></title> 5 </head> 6 <body ng-app='routingDemoApp'> 7 8 <h2>AngularJS 路由應用</h2> 9 <ul> 10 <li><a href="#/">首頁</a></li> 11 <li><a href="#/computers">電腦</a></li> 12 <li><a href="#/printers">印表機</a></li> 13 <li><a href="#/blabla">其他</a></li> 14 </ul> 15 16 <div ng-view></div> 17 <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 18 <script src="angular-route.js"></script> 19 <script> 20 angular.module('routingDemoApp',['ngRoute']) 21 .config(['$routeProvider', function($routeProvider){ 22 $routeProvider 23 .when('/',{template:'這是首頁頁面'}) 24 .when('/computers',{template:'這是電腦分類頁面'}) 25 .when('/printers',{template:'這是印表機頁面'}) 26 .otherwise({redirectTo:'/'}); 27 }]); 28 </script> 29 30 31 </body> 32 </html>View Code
AngularJS 服務(Service)
1 $http({ 2 url:'data.json', 3 method:'GET' 4 }).success(function(data,header,config,status){ 5 //響應成功 6 7 }).error(function(data,header,config,status){ 8 //處理響應失敗 9 });
當然我這裡只講了一些最基礎的也是最常用的簡單例子，大家想要瞭解還是要去看下視頻，因為我是屬於後臺開發目前設計到一些AngularJs技術，所以說我這篇主要是給自己幾天使用AngularJs的一些總結,當然也希望大家能夠一起學習交流。
