自定义服务 factory 和 service
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义服务 factory 和 service相关的知识，希望对你有一定的参考价值。
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的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS中的Provider们：Service和Factory等的区别