自定義服務 factory 和 service
阿新 • • 發佈：2017-05-26
控制器 ctr div ava json對象 html src com 沒有
1、使用factory 方法
必須有返回值 即return ，factory只是調用普通的function，可以返回任何東西。
HTML 代碼
<body ng-app="myApp">
<div ng-controller="myCtrl">
<ul>
<li>{{data.name}}</li>
<li>{{data.age}}</li>
<li>{{data.phone}}</li>
</ul>
<p>{{strfun("hello")}}</p>
<p>{{array(1)}}</p>
</div>
</body>
JS代碼
<script type="text/javascript">
var app=angular.module(‘myApp‘,[]);
//返回一個JSON對象
app.factory(‘$outData‘, function(){
var data={
‘name‘:‘Tom‘,
‘age‘:18,
‘phone‘:‘1234678901‘
}
return data;
//返回一個函數
}).factory(‘$myFun‘, function(){
return {
str:function(text){
return "自定義服務"+ text;
}
}
//返回一個數組
}).factory(‘$myArray‘,function(){
return [‘1‘,‘12‘,‘123‘];
});
//控制器層 註入服務
app.controller(‘myCtrl‘,[‘$scope‘,‘$outData‘,‘$myFun‘,‘$myArray‘,function($scope,$outData,$myFun,$myArray){
$scope.data=$outData;
$scope.strfun=function(text){
return $myFun.str(text);
}
$scope.array=function(i){
return $myArray[i];
}
}]);
</script>
運行結果
2、service 方法自定義服務
這個方法可以接受一個構造函數，不用返回東西，在註入服務時，angular會檢測到是service創建的服務，會自動調用new關鍵字來實例化這個服務，生成服務對象。service是一個構造器。
HTML 代碼
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>{{name}}</p>
<p>{{age}}</p>
<p>{{phone}}</p>
<p>{{fun()}}</p>
</div>
JS 代碼
<script type="text/javascript">
var app=angular.module(‘myApp‘,[]);
//返回一個構造函數
app.service(‘mydata‘,function(){
this.name=‘Tom‘,
this.age=18,
this.phone=‘12346789021‘,
this.fun=function(){
return "service ";
}
});
//註入服務
app.controller(‘myCtrl‘,function($scope,mydata){
$scope.name=mydata.name;
$scope.age=mydata.age;
$scope.phone=mydata.phone;
$scope.fun=function(){
return mydata.fun();
}
});
</script>
運行結果
這是今天自己的學習筆記，分享給大家啦，有些地方不足希望大家多多提出，不知道大家有沒有好的學習方法可以分享給我。。。
自定義服務 factory 和 service