服务的功能：提供数据和对象
模块的方法创建自定义指令
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>
运行结果
结果.png
2、service 方法自定义服务
这个方法可以接受一个构造函数，不用返回东西，在注入服务时，angular会检测到是service创建的服务，会自动调用new关键字来实例化这个服务，生成服务对象。service是一个构造器。
用它在Controller中通信或者共享数据都很合适
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>
运行结果
运行结果.png
网友评论