服務(wù)用來(lái)提供公用類庫(kù)
http://blog.csdn.net/zcl_love_wx/article/details/51404390（參考）
一、3種創(chuàng)建自定義服務(wù)的方式
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{r}}</p>
</div>
1、Factory
factory方式創(chuàng)建的服務(wù)丁鹉，作用就是返回一個(gè)有屬性有方法的對(duì)象魏保。相當(dāng)于：var f = myFactory();
var app = angular.module('myApp', []);
//通過(guò)工廠模式創(chuàng)建自定義服務(wù)
app.factory('myFactory', function() {
var service = {};//定義Object對(duì)象
service.name = "wy";
var age;//定義一個(gè)私有化的變量
//對(duì)私有屬性寫getter和setter方法
service.setAge = function(newAge){
age = newAge;
}
service.getAge = function(){
return age;
}
return service;//返回這個(gè)Object對(duì)象
});
//創(chuàng)建控制器
app.controller('myCtrl', function($scope, myFactory) {
myFactory.setAge(20);
$scope.r =myFactory.getAge();
alert(myFactory.name);
});
在自定義服務(wù)里可以注入服務(wù)安岂，但不能注入http,$q)`
2涯雅、Service
通過(guò)service方式創(chuàng)建自定義服務(wù)撑柔，相當(dāng)于new的一個(gè)對(duì)象：var s = new myService();瘸爽，把屬性和方法添加到this上才可以在controller里調(diào)用。
var app = angular.module('myApp', []);
app.service('myService', function($http,$q) {
this.name = "service";
this.myFunc = function (x) {
return x.toString(16);//轉(zhuǎn)16進(jìn)制
}
this.getData = function(){
var d = $q.defer();
$http.get("ursl")//讀取數(shù)據(jù)的函數(shù)铅忿。
.success(function(response) {
d.resolve(response);
})
.error(function(){
alert(0)
d.reject("error");
});
return d.promise;
}
});
app.controller('myCtrl', function($scope, myService) {
$scope.r = myService.myFunc(255);
myService.getData().then(function(data){
console.log(data);//正確
},function(data){
alert(data)//錯(cuò)誤
});
});
3剪决、Provider
只有provder是能傳 .config() 函數(shù)的 service,若想在 service 對(duì)象啟用之前，先進(jìn)行模塊范圍的配置，那就應(yīng)該選擇 provider昼捍。
4、在過(guò)濾器中注入自定義服務(wù)
<div ng-app="myApp">在過(guò)濾器中使用服務(wù): '<h1>{{255 | myFormat}}'</h1></div>
<script>
var app = angular.module('myApp', []);
app.service('ser', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.filter('myFormat',['ser', function(ser) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
</script>
二肢扯、service與controller妒茬、directive交互
<button add-book-button>Add book</button>//自定義指令
<ul ng-controller="books.list">
<li ng-repeat="i in books">書名：{{i.title}}，作者：{{i.author}}</li>
</ul>
var appModule = angular.module(‘a(chǎn)pp‘, []);
// service 單例蔚晨，共享數(shù)據(jù)
appModule.service(‘Book‘, [‘$rootScope‘, function($root){
var service = {
books: [
{
"title": "書名1",
"author": "作者1"
},
{
"title": "書名2",
"author": "作者2"
}
],
addBook: function(book){
service.books.push(book);
// 給root下所有books.update派發(fā)事件
$root.$broadcast(‘books.update‘);
}
};
return service;
}]);
(1)
// 在控制器里使用Book服務(wù)
appModule.controller(‘books.list‘, [‘$scope‘, ‘Book‘, function(scope, Book){
scope.books = Book.books;
scope.$on(‘books.update‘, function(){
scope.$apply(function(){
scope.books = Book.books;
});
});
}]);
// (2)在指令里使用Book服務(wù)
appModule.directive(‘a(chǎn)ddBookButton‘, [‘Book‘, function(Book){
return {
restrict: ‘A‘,
link: function(scope, el){
var n = 0;
el.bind(‘click‘, function(){
Book.addBook({
"title": "新書"+(++n),
"author": "新作者"+n
});
});
}
};
}]);
