使用$http服務
<html ng-app="MyModule">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="HTTPBasic.js"></script>
</head>
<body>
<div ng-controller="LoadDataCtrl">
<ul>
<li ng-repeat="user in users">
{{user.name}}
</li>
</ul>
</div>
</body>
</html>
有ng-controller叫做LoadDataCtrl,
這個ng-controller有個列表ng-repeat
將數(shù)組循環(huán)出來。
ng-repeat="user in users"
這里的users
數(shù)據(jù)不再是像前面寫列子一樣寫死在代碼里面,希望通過后臺去加載進來,
var myModule=angular.module("MyModule",[]);
myModule.controller('LoadDataCtrl', ['$scope','$http', function($scope,$http){
$http({
method: 'GET',
url: 'data.json'
}).success(function(data, status, headers, config) {
console.log("success...");
console.log(data);
$scope.users=data;
}).error(function(data, status, headers, config) {
console.log("error...");
});
}]);
調用AngularJS里面的$http
這個服務,
method: 'GET',
數(shù)據(jù)交互方式GET或POST
url: 'data.json'
要請求哪個地址。
success
成功后執(zhí)行函數(shù)
error
請求錯誤執(zhí)行函數(shù)
這里請求的是json
文件
[{
"name": "《用AngularJS開發(fā)下一代WEB應用》"
},{
"name": "《Ext江湖》"
},{
"name": "《ActionScript3.0游戲設計基礎(第二版)》"
}]
拿到這些數(shù)據(jù)以后把他$scope.users
上面去
$scope.users=data;
創(chuàng)建自己的Service
<html ng-app="MyServiceApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.css">
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="MyService1.js"></script>
</head>
<body>
<div ng-controller="ServiceController">
<label>用戶名</label>
<input type="text" ng-model="username" placeholder="請輸入用戶名" />
<pre ng-show="username">{{users}}</pre>
</div>
</body>
</html>
有一個inout
他的ng-model
等于username
要實現(xiàn)的效果是當輸入項內容發(fā)生變化的時候就去向后臺發(fā)起請求,
var myServiceApp = angular.module("MyServiceApp", []);
myServiceApp.factory('userListService', ['$http',
function($http) {
var doRequest = function(username, path) {
return $http({
method: 'GET',
url: 'users.json'
});
}
return {
userList: function(username) {
return doRequest(username, 'userList');
}
};
}
]);
myServiceApp.controller('ServiceController', ['$scope', '$timeout', 'userListService',
function($scope, $timeout, userListService) {
var timeout;
$scope.$watch('username', function(newUserName) {
if (newUserName) {
if (timeout) {
$timeout.cancel(timeout);
}
timeout = $timeout(function() {
userListService.userList(newUserName)
.success(function(data, status) {
$scope.users = data;
});
}, 350);
}
});
}
]);
//...
AngularJS封裝了叫$watch
用來監(jiān)控一個數(shù)據(jù)模型的變化,這里利用$watch
來監(jiān)聽,
監(jiān)聽username
他發(fā)生變化以后執(zhí)行一個匿名函數(shù),這個函數(shù)里面來檢測是不是拿到新的newUserName
如果拿到新的值就向后臺去發(fā)送請求,
那么調用誰去發(fā)請求呢?就調用自己封裝的userListService
這個地方有一個比較繞的東西叫做'$timeout'
這個'$timeout'
就是說當我們在頁面上進行輸入的時候不是說我們每次按下減排他就去請求后臺,如果這樣的話會發(fā)現(xiàn)頁面會抖動,假如說每按下一個鍵他就去向后臺發(fā)起請求,很顯然頁面會不斷地狂刷,
這個時候加一個防止抖動的處理,這是比較常見的動作,只有當你350
毫秒不再按下一個按鍵的時候,就是說延遲350毫秒沒有按下,這個時候他才會去向后臺發(fā)起請求。
當你連續(xù)按鍵的時候,并不會向后臺連續(xù)發(fā)送請求,
最后調用的函數(shù)是userListService.userList
這個函數(shù),
自己定義的Service
和AngularJS內置的Service
有兩點不同點,
一種是我們自己定義的Service
他的命名不要用$
打頭,
第二我們自己定義的Service
也是可以向AngularJS內置的服務一樣去進行注入的,但是注入的時候有一個不同的地方,就是說我們自己定義的Service
是必須放在最后一個的,
有了這個Service
以后,假設要做相同的操作就可以去一直去調用它,很多的controller
控制器都可以去共用的,從而實現(xiàn)了這個功能的復用,
比如說我要把userListService
抽出作為自己的服務,這個Servuce里面會去返回userList
用戶列表數(shù)據(jù)。
把它抽成一個服務之后,其他的控制器就可以調用它,
項目中控制器會有很多,如果有控制器之間有代碼相同,那么就可以抽到Servuce服務里面,方便調用。