一.$http服务
示例:通过$http服务,请求服务器端数据。
<div ng-controller="LoadDataCtrl">
<ul>
<li ng-repeat="user in users">
{{user.name}}
</li>
</ul>
</div>
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...");
});
}]);
[{
"name": "《用AngularJS开发下一代WEB应用》"
},{
"name": "《Ext江湖》"
},{
"name": "《ActionScript3.0游戏设计基础(第二版)》"
}]
二.factory服务
自定义service,得以在多个controller中复用,这也是service的本质。
<div ng-controller="ServiceController">
<label>用户名</label>
<input type="text" ng-model="username" placeholder="请输入用户名" />
<pre ng-show="username">{{users}}</pre>
</div>
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);
}
});
}
]);
《Ext江湖》
《ActionScript3.0游戏设计基础(第二版)》
《用AngularJS开发下一代WEB应用》
三.$fiter服务
示例:
{{ 1304375948024 | date }}
<br>
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
<br>
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}
<br>
自定义$filter
{{'Jason'|filter1 }}
var myModule=angular.module("MyModule",[]);
myModule.filter('filter1',function(){
return function(item){
return item + 'o(∩_∩)o';
}
});
以上部分内容来自慕课网大漠穷秋老师的视频截图