angularjs 五種服務用法
每個controller層控制著不同的html，修改其中一個controller中資料資訊不會影響另外的controller裡的資料資訊（每個控制層之間不會相互影響），如果想每個控制層都有共用的方法，可以把共用的寫到angular的服務裡，這些服務都要注入到controller中，在控制器中使用 。下邊先簡單介紹value，constant,factory,service,provider,這5種服務的的基本用法，然後舉個例子。
value
用來定義值。與 constant 的區別是：value可以被修改(被後邊的值覆蓋)，可以被 decorator 裝飾，不能被注入到 config 中。
//第一種------第一個引數是服務名稱，第二個是常量
app.value('myValue', '11111111')
//第二種----第一個引數是服務名稱，第二個是obj物件
app.value('myValue',{
name:'kk',
age:12,
getId:function(){
return 1;
}
});constant
用於定義常量。一般一旦定義就不能被改變。可以被注入到任何地方，但是不能被裝飾器(decorator)裝飾。
//第一種------第一個引數是服務名稱，第二個是常量 app.constant('myConstant', '11111111') //第二種----第一個引數是服務名稱，第二個是obj物件 app.constant('myConstant',{ name:'kk', age:12, getId:function(){ return 1; } });
factory
factory 返回一個物件。app.factory('name',function(){return obj}) ----- name是服務名
比如使用$http來獲取一些資料.我們就在factory建立的服務裡抓取資料,最後返回.
它和constant,value最大的區別是,factory服務是有一個處理過程,經過這個過程,才返回結果的.
//第一種方式----看得出來，factory 的第二個引數就是provider中$get要對應的函式實現。 app.factory('myFactory', function(){ return { a ： 'hello'; b ：function(){}; } }) //第二種方式 app.factory('myFactory', function(){ var f = {}; f.a = 'hello'; f.b = function(){}; return f; }) //第三種方式-------相當於service服務寫法 app.factory('myFactory',function(){ return new conFun() }); function conFun(){ this.name ="lili"; this.age = 12; this.getId = function(){ return 1; } }
service
service 類似於一個構造器， 通過 new 關鍵字例項化物件，將一些屬性和方法直接新增到 this 上，在建立 service 物件時， this 會被作為返回值返回。
//第一種格式
app.service('myService',function(){
this.name ='lili';
this.age =12;
this.getId = function(){
return 1;
}
});
//第二種格式---------跟factory的方法類似，只是不需要寫new新物件
app.service('myService',consFun);
function consFun(){
this.name ="lili";
this.age = 12;
this.getId = function(){
return 1;
}
}
provider
只有provder是能注入到.config() 函式中；在config函式裡注入provider時，名字應該是：providerName+Provider，比如provider的服務名叫myProvider，注入時: .confige('',myProviderProvider'')。 你可以在Provider物件傳遞到應用程式的其他部分之前在app.config函式中對其進行修改（這也是與factory不同的地方，factory不能修改）。 provider服務的第二個引數的返回值中必須要有$get方法(除了$get,還可以有其它方法),$get方法就相當於factory服務的第二個引數,最後要返回一個物件,這個物件就是真正被注入的服務。也就是說當你使用Provider建立一個服務時，唯一的可以在你的控制器中訪問的屬性和方法是通過$get()函式返回內容。
app.provider('服務名稱',function(){
....
return { //return一定要寫
...
$get:function(){ //$get一定要寫，真正被注入的就是$get
...
return obj物件
}
}
})事例：
html程式碼：
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>服務</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<div ng-controller="ctrl1" id="d1">
<h4>控制器:：：：：：{{ctrl}}</h4>
<h4>value::：：：：：{{va}}</h4>
<h4>constant:：：：：：{{cons}}</h4>
<h4>factory.name:：：：：：{{name}}</h4>
<h4>factory方法返回值:：：：：：{{fid}}</h4>
<h4>service.age:：：：：：{{age}}</h4>
<h4>性別:：：：：：{{sex}}</h4>
<h4>provider.$get:：：：：：{{p_fun}}</h4>
</div>
</body>
</html>js程式碼：
angular.module("app",[])
.value("v",'value1')
.value("v",'value2')
.constant("c",'cons111')
.constant("c",'cons222')
.factory("f",function () {
return{
name:"張三",
getId:function () {
// console.log("factory方法")
return 1;
}
}
})
.service("s",function () {
this.age=12;
this.getFun=function () {}
})
.provider('myProvider',function () {
var a=666;
//一定要有return,否則報錯
return{
//真正被注入到控制器的是$get裡的資料，所以sex在頁面打印不出來
sex:'男',
$get:function () {
return{
setp:function () {
return a;
}
}
}
}
})
.config(function(myProviderProvider){
myProviderProvider.sex = '女';
})
.controller("ctrl1",['$scope','v','c','f','s','myProvider',function ($scope,v,c,f,s,myProvider) {
$scope.ctrl="ctrl1";
$scope.va=v;
$scope.cons=c;
$scope.name=f.name;
//getId()是方法，一定要帶著括號
$scope.fid=f.getId();
$scope.age=s.age;
$scope.sex=myProvider.sex;
$scope.p_fun=myProvider.setp();
}])輸出結果：
