当两个或几个controller中有重复的代码时,需要将其抽成一个服务,即service。
1、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...");
});
注:chrome有跨域问题,无法打开本地'data.json',解决方法可见另一篇博文。
2、自己编写一个服务
var myServiceApp = angular.module("MyServiceApp", []);
myServiceApp.factory('userListService', ['$http',//这里是自己编写的服务userListService
function($http) {
var doRequest = function(username, path) {
return $http({
method: 'GET',
url: 'users.json'
});
}
return {
userList: function(username) {
return doRequest(username, 'userList');
}
};
}
]);
//在下面很多controller中都可能用到上述服务,引用即可
myServiceApp.controller('ServiceController', ['$scope', '$timeout', 'userListService',
function($scope, $timeout, userListService) {
var timeout;
$scope.$watch('username', function(newUserName) {//封装了watch,可用于监测模型的变化
if (newUserName) {
if (timeout) {//该函数是防止页面抖动的处理(即不是键盘每输入一个字符就向后台发起一个请求)
$timeout.cancel(timeout);//延时350毫秒,当350毫秒没有输入时才发起请求
}
timeout = $timeout(function() {
userListService.userList(newUserName)//可调用服务中的方法
.success(function(data, status) {
$scope.users = data;
});
}, 350);
}
});
}
]);
//...
自定义服务的特点:
1、不以$符号开头进行命名
2、与内置服务一样需要注入,但是要放在最后一个
service的特点:
1、都是单例的(只有一个实例)
2、由$injector负责实例化(不需new等方法手动实例化)
3、service在整个应用的生命周期中都存在,可以用来共享数据
4、在需要使用的地方使用依赖注入机制注入service