四大特性
- 使用MVC設計模式
- 雙向數據綁定
- 依賴注入
- 采用模塊化設計
一、控制器的作用域
- 每次調用ng-controller都會創建一個新的Controller對象
- 每個Controller對象都有唯一的$scope對象，表示當前控制器對象的有效范圍/作用域
- 聲明在某個$scope中的模型數據，一般情況下不能被其他的控制器所使用
- 若想在多個控制器間共享數據、傳遞數據，可以聲明在根作用域--$rootScope--每個Angular應用只有一個唯一的$rootScape對象
- 控制器的本質用途：用于劃分一個大型頁面中的不同的DIV塊- 每個塊中都有自己專用的數據，以及可以跟其他塊共享的數據
二、雙向數據綁定
-
方向1 Model綁定到view，此后不論何時只要Model發生改變，數據會立即自動同步更新
實現方法：{{}} ng-bind ng-if ng-Repeat 幾乎所有的顯示數據的指令都實現了方向1的綁定
實例：
1.創建一個點擊計數器，有一個按鈕，只要點擊一次，立即顯示出點擊次數
2.輪播圖的前進后退按鈕
<--html代碼--!>
<body ng-app="myModule">
<div class="container" ng-controller="myControl">
<button class="btn btn-danger" ng-click="add()">有種點我啊</button>
<br />
點擊次數：<span>{{count}}</span>
<h1>輪播圖</h1>
<button class="btn btn-success" ng-click="pre()">上一張</button>
<button class="btn btn-warnning" ng-click="next()">下一張</button>
</div>
</body>
//js代碼部分
<script type="text/javascript">
angular.module("myModule",["ng"]).controller("myControl",function ($scope){
var count=0;
$scope.count=count;
$scope.add=function() {
$scope.count++;
}
var index=1;
$scope.index=index;
$scope.pre=function() {
$scope.index--;
if($scope.index==0){
$scope.index=9;
}
}
$scope.next=function() {
$scope.index++;
if($scope.index==10){
$scope.index=1;
}
}
});
</script>
-
方向2 view綁定到model，把視圖中可以修改的HTML元素，即表單控件的值綁定到模型變量上。此后，只要用戶修改了表單控件的值后，后臺模型變量的值會立即隨之改變
實現： 只有ngmodel指令可以，為了監視到Model變量真的被改變了可以使用$scope.$watch()函數對Model數據的值進行監視,
實例：將用戶名和密碼實時顯示出來，復選框顯示婚否，單選框顯示當前選擇的性別，下拉框顯示選擇的城市，簡易版購物車計算器計算實時總價
<body ng-app="myModule" >
<div class="container" ng-controller="myControl">
<h1>單行文本輸入框</h1>
名字：<input type="text" ng-model="name"/>
<span>{{name}}</span><br />
密碼：<input type="password" ng-model="password"/>
<span>{{password}}</span>
<br />
<h2>復選框</h2><br />
婚否：<input type="checkbox" ng-model="marry"/><span>{{marry}}</span><br />
<h2>單選框</h2><br />
<input type="radio" value="男" ng-model="sex"/>男
<input type="radio" value="女" ng-model="sex"/>女
<span>{{sex}}</span><br />
<h2>下拉框</h2>
<select name="" ng-model="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="廣州">廣州</option>
</select>
<span>{{city}}</span>
<br />
<h2>簡易版購物車計算器</h2>
單價：<input type="text" ng-model="price" />
數量：<input type="text" ng-model="number" />
總價：{{price*number}}
</div>
</body>
angular.module("myModule",["ng"]).controller("myControl",function ($scope){
$scope.$watch("name+password",function() { //兩個監聽對象之間用+連接即可
console.log($scope.name);
console.log($scope.password);
})
})
三、依賴注入
被動注入方式（Injection）方式
angular.module("myModule",["ng]).controller("myControl",function($scope,$interval));
angular中的ngController指令在實例化控制器對象時，會根據指令的形參名，創建出控制器所依賴的對象，并注入進來---依賴注入（Dependency Injection）
注意：
- angular在創建控制器對象時，會根據形參列表中的每個形參依賴的對象的名稱來創建，故控制器聲明函數不能聲明angular無法識別的形參名 angular只提供了一種依賴注入方式-根據形參名來注入依賴的對象
- 若項目js文件使用了類似yuicompressor等壓縮程序，默認會把函數的形參名精簡為一個字母的形式，會導致Angular的依賴注入失敗
解決辦法
module.controller("控制器名"，[
"$scope",
"$interval",
"$http",
function(a,b,c){
}
]);
- 可以被注入的對象-所有的service對象都可以被注入
- $rootScope 在多個控制器間共享數據的服務
- $interval 提供周期性定時器服務
- $timeout 提供一次性定時器服務
- $log 體用五個基本的日志輸出服務
- $http 提供異步HTPP請求（AJAX）的服務
$http{method:"GET",url:""}.then(fun).catch(fun) $http.get("url").then(fn); $http.post("url",data).then(fn);
- $location
實例：使用定時器interval實現秒鐘
<body ng-app="myModule">
<div class="container" ng-controller="myControl">
<p>{{num}}</p>
</div>
</body>
<script>
angular.module("myModule",["ng"]).controller("myControl",function($interval){
$scope.num=0;
$interval(function(){
$scope.num++;
},1000);
</script>
#####ng模塊中提供的過濾器
-
filter:把model中的數據在顯示時以某種特定的格式來呈現
-
lowercase
語法：{{表達式 | lowercase}
-
uppercase
語法：{{表達式 | uppercase}
-
number
語法：{{表達式 | number}}
{{表達式 | number:小數位數}} -
currency
{{表達式 | currency}}
{{表達式 | currency:'貨幣符號'}} -
date
{{表達式 | date }}
{{表達式 | date | "yyyy-MM-dd"}}
-
#####四、單頁應用
angularjs提供的模塊---ngroute
1）概念：
route：路由，通過某條線路找到目標內容
ngroute：模塊的目標，就是根據瀏覽器url中的一個特殊的地址標記，查到到該標記所對應的模板頁面，并異步加載到ng-view上
2）使用步驟：
1) 創建唯一完整的HTML頁面，其中聲明一個容器，ngview指令。引入angular.js angular-routejs
<div ng-view></div>
2）創建多個模板頁面(習慣上放在一個特別的目錄下，如tpl)
3) 創建Module,聲明依賴于ng/ng-route兩個模板
var app = angular.module("module",["ng","ngRoute"]);
4）在Module中配置路由字典
app.config(function($routeProvider){
$routeProvider.when("/start",{
templateUrl:xxx,
controller:"" //此處聲明的控制器可供當前目標頁面所有元素使用
})
})
5）使用瀏覽器做測試
http:IP地址/index.html#/路由地址
實例
<body ng-app="myModule">
<ul>
<li><a href="#/page1">page1</a></li>
<li><a href="#/page2">page2</a></li>
</ul>
<div ng-view>
</div>
</body>
<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular-route.js" type="text/javascript" charset="utf-8"></script>
<script src="js/singlePage.js" type="text/javascript" charset="UTF-8"></script>
//singlePage.js文件內容
var module = angular.module("myModule",["ng","ngRoute"]);
module.config(function ($routeProvider){
$routeProvider.when("/page1",{
templateUrl:"temp/page1.html"
}).when("/page2",{
templateUrl:"temp/page2.html"
})
})
ngroute中的頁面跳轉有兩種方式：
- 通過超鏈接訪問href="#/main"
- 通過js跳轉$location.path("/main")