前 言
AngularJS誕生於2009年，由Misko Hevery 等人創建，后為Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最為核心的是：MVC、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。它可通過 <script> 標簽添加到 HTML 頁面。AngularJS 通過 指令 擴展了 HTML，且通過 表達式 綁定數據到 HTML。AngularJS 是以一個 JavaScript 文件形式發布的，可通過 script 標簽添加到網頁中。
| 1、 什么是AngularJS？ |
AngularJS 使得開發現代的單一頁面應用程序（SPAs：Single Page Applications）變得更加容易。
- AngularJS 把應用程序數據綁定到 HTML 元素。
- AngularJS 可以克隆和重復 HTML 元素。
- AngularJS 可以隱藏和顯示 HTML 元素。
- AngularJS 可以在 HTML 元素"背后"添加代碼。
- AngularJS 支持輸入驗證。
| 2、 AngularJS中的常用指令和表達式 |
2.1AngularJS中的常用指令
AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-。
1、ng-app: 聲明AngularJS所管轄的區域。 一般寫在body或者html標簽上，原則上一個頁面只能有一個。
<body ng-app=""></body>
2、ng-model: 指令把元素值（比如輸入域的值）綁定到應用程序的變量中。綁定數據！
<input type="text" ng-model="name" />
3、 ng-bind: 把應用程序變量中的值，輸出到頁面HTML視圖中。可以與表達式{{}}互相替換。讀取數據！
<div ng-bind="name"></div>
4、 ng-init: 初始化AngularJS應用程序中的變量值；
<body ng-app="" ng-init="name='hahaha'">
應用程序初始化時， name變量就附有初值。
2.2AngularJS中的表達式
AngularJS使用雙大括號{{}}綁定表達式。用於將表達式的內容輸出到頁面中。
表達式中可以是文字、運算符、變量等，也可以在表達式中進行運算輸出結果。
<p>{{ 5+5+"Angular" }}</p>
如果Angular.js文件放在頁面下方，在頁面刷新的瞬間會看到{{}}表達式的原樣，所以可以使用ng-bind指令替代表達式。
上式可改寫為：
<p ng-bind="5+5+'Angular'"></p>
| 3、 AngularJS中的MVC與作用域 |
3.1AngularJS中的MVC三層架構
Model(模型層)：應用程序中用於處理數據的部分。 (包括將數據保存或者修改到數據庫、變量、文件中)。在AngularJS中,Model特指的是：應用程序中的各種數據。
View(視圖層)：用戶可以看到的用戶顯示數據的頁面。
Controller(控制器)：控制器是鏈接View與Model的橋梁。 負責從View讀取數據，接受用戶的操作輸入； 並將數據發送給Model層。 Model層對數據處理完畢之后，將結果返回給Controller，Controller再將結果返回給View層顯示。
3.2AngularJS中的模塊化開發和依賴注入
創建一個AngularJS的模塊。即ng-app=""所需要綁定的部分。需要接受兩個參數：
① 模塊名稱，即ng-app雙引號中需要綁定的名字。
<body ng-app="myApp">
② 數組。 表示需要注入的模塊名稱，不需要注入其他模塊可用空數組代替。
var app = angular.module("myApp",[]);
>>> AngularJS將常用的功能封裝到angular.js，創建主模塊時直接可以使用，無需注入。
>>> 而一些應用較少的功能，需要導入對應的JS文件，並且在[]中注入進這個模塊，才能夠使用。
在AngularJS的模塊上，創建一個控制器，需要傳遞兩個參數：
① 控制器名稱，即ng-controller需要綁定的名稱。
<div ng-controller="myCtrl">
② 控制器的構造函數，構造函數可以傳入多個參數。
>>> 如果要在函數中使用系統的內置對象，則必須通過函數的參數傳入，否則不能使用。
>>> AngularJS中的內置對象，都用$開頭，例如$scope,$rootScope
3.3AngularJS中的作用域
① $scope： 局部作用域，聲明在$scope上的屬性和方法。只能在當前Controller使用；
② $rootScope： 根作用域。聲明在$rootScope上的屬性和方法，可以在整個ng-app所包含的范圍使用。
>>> 如果沒有使用$scope聲明變量，而是直接使用ng-model在HTML標簽中綁定的數據的作用域為：
1.如果ng-model寫在某個Controller中，則這個變量會默認綁定到當前Controller的$scope上；
2.如果ng-model沒有寫在任何一個Controller，則這個變量會默認綁定到$rootScope上；
>>> AngularJS中的父子作用域(重點)！
1、AngularJS中，子作用域只能訪問父作用域中的變量，而不能修改父作用域的變量；
2、為了解決上述問題，可以將父作用域中的變量聲明為引用數據類型，例如對象等。 這樣可以在子作用域中，直接修改對象的屬性，而不需要修改對象本身保存的地址。
詳細案例
1 <body ng-app="myApp"> 2 <input type="text" ng-model="age" placeholder="age" /> 3 4 <div ng-controller="myCtrl"> 5 <input type="text" ng-model="name" placeholder="name" /> 6 <div ng-bind="name+'-----myCtrl的name'"></div> 7 <div ng-bind="age+'-----myCtrl的age'"></div> 8 </div> 9 10 <div ng-controller="myCtrl1"> 11 <div ng-bind="name+ '----myCtrl1的name'"></div> 12 <div ng-bind="age+'-----myCtrl1的age'"></div> 13 14 <input type="text" ng-model="test" /> 15 <input type="text" ng-model="obj.test" /> 16 <mark ng-bind="test+'myCtrl1-test'"></mark> 17 <mark ng-bind="obj.test+'myCtrl1-obj.test'"></mark> 18 </div> 19 <mark ng-bind="test+'全局-test'"></mark> 20 <mark ng-bind="obj.test+'全局-obj.test'"></mark> 21 22 <div ng-bind="name + '----全局的name'"></div> 23 <div ng-bind="age+'-----全局的age'"></div> 24 </body>
1 <script type="text/javascript"> 2 var app = angular.module("myApp",[]); 3 4 app.controller("myCtrl",function($scope,$rootScope){ 5 $scope.name = "zhangsan"; 6 $rootScope.age = "14"; 7 }); 8 9 app.controller("myCtrl1",function($rootScope){ 10 $rootScope.test = "aaa"; 11 $rootScope.obj = { 12 test:'bbb' 13 } 14 }); 15 </script>
| 4、AngularJS中的過濾器 |
過濾器可以使用一個管道字符（|）添加到表達式和指令中。
4.1系統內置的過濾器
①currency：將數字格式化為貨幣格式
<p>{{123456|currency}}</p>
②lowercase：格式化字符串為小寫。
uppercase：格式化字符串為大寫。
<p>{{"abcDeFg" | lowercase}}</p>
<p>{{"abcDeFg" | uppercase}}</p>
③filter：從數組項中選擇一個子集。
④orderBy：根據某個表達式排列數組。
4.2自定義過濾器
以下實例自定義一個過濾器 reverse，將字符串反轉：
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.msg = "Runoob"; }); app.filter('reverse', function() { //可以注入依賴 return function(text) { return text.split("").reverse().join(""); } });
| 5、 AngularJS中的服務（Service、factory、provider） |
5.1Service
1、內置服務
>>> 要用服務，必須要把服務名通過controller的構造函數的參數注入進來！！！
>>> 系統內置的服務，統一使用$開頭， 服務中的屬性和方法統一使用$$開頭！！！ 自定義服務時，需注意與系統服務的寫法區分開；
①$location： 返回當前頁面的URL地址信息，是一個對象；
可以返回當前頁面的 URL 地址：
var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl(); });
②$http： 向服務器發送請求，類似於JQuery中的Ajax；
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm").then(function (response) { $scope.myWelcome = response.data; }); });
③$timeout： 相當於 setTimeout();
兩秒之后顯示數據：
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $timeout) { $scope.myHeader = "Hello World!"; $timeout(function () { $scope.myHeader = "How are you today?"; }, 2000); });
④$interval： 相當於setInterval();
每一秒顯示信息：
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $interval) { $scope.theTime = new Date().toLocaleTimeString(); $interval(function () { $scope.theTime = new Date().toLocaleTimeString(); }, 1000); });
2、自定義服務
第一個參數是服務名：
第二個參數是自定義服務的構造函數。 我們自定義的服務，本質是一個對象。
對象的屬性 ，可以在構造函數中，使用this.屬性 表示；
對象的方法 ，可以在構造函數中，使用this.方法 表示；
.service("hexafy",function(){
this.gongneng = "將十進制數轉化為16進制";
this.func = function(num){
return num.toString(16);
}
})
5.2factory
factory服務在使用上沒有太大差距。唯一的不同點，是聲明服務時，factory服務是在函數中先聲明一個對象，然后使用return將對象返回。而service服務，則是直接在函數中使用this將屬性和方法添加到對象上面。
1 <body ng-app="app" ng-controller="ctrl"> 2 <h1>{{gongneng}}</h1> 3 <p>10轉為16進制為：{{num1}}</p> 4 </body>
angular.module("app",[])
.controller("ctrl",function($scope,hexafy){
$scope.gongneng = hexafy.gongneng;
$scope.num1 = hexafy.func(10);
})
.factory("hexafy",function(){
var obj = {
gongneng : "將十進制數轉化為16進制",
func : function(num){
return num.toString(16);
}
}
return obj;
})
.service("hexafy1",function(){
this.shuxing = "shuxing";
this.func = function(){}
})
5.3provider
1、在angularJS中，service服務，factory服務都是基於provider服務實現的。
2、在定義provider時，可以使用this.$get方法，接收一個函數，函數里面采用與factory完全相同的寫法！！
.provider("hexafy",function(){
this.$get = function(){
var obj ={
gongneng : "333"
}
return obj;
}
})
3、在三種服務中，provider服務時唯一一個可以寫進config配置階段的服務。所以說，如果服務需要在配置階段，也就是在聲明controller之前執行的話，則可以使用provide，否則一般使用service或者factory