ionic准备之angular基础———服务provider 和 factory
Posted Mr.Tan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ionic准备之angular基础———服务provider 和 factory相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body ng-app="myApp"> <div ng-controller="firstController"> <ul> <li ng-repeat="item in name">{{item}}</li> </ul> </div> </body> <script src="angular/angular.js"></script> <script type="text/javascript"> var app=angular.module("myApp",[],function($provide){ /*创建服务factory*/ $provide.factory("myFactory",function(){ var server={}; server.getMessage=function(){ return "this is a message"; } return server; }); /*用provider创建服务*/ $provide.provider("myprovider2",function(){ this.$get=function(){ var server={}; server.getMessage=function(){ return "this is provider2"; } return server; } }); }); /*也可以再config中定义服务*/ app.config(function($provide){ /*自定义服务*/ $provide.provider("myProvider",function(){ this.$get=function(){ var server={}; server.getName=function(){ var name={ name:"tanxu", nickName:"xuxu" } return name; } return server; } }); }); app.controller(‘firstController‘,function($scope,$filter,myProvider,myprovider2,myFactory){ //用provider $scope.name=myProvider.getName(); console.log($scope.name); $scope.name1=myprovider2.getMessage(); console.log($scope.name1); // //用factory $scope.msg=myFactory.getMessage(); console.log($scope.msg); }); </script> </html>
我们可以再config中创建服务，或者在module中直接创建，利用provider创建需要this.get()匿名函数，而factory可以直接返回字符串或者对象，建议基于对象去返回。
那么这样会不会太乱，当然还有更好更直观的创建方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="myApp">
<div ng-controller="firstController">
<ul>
<li ng-repeat="item in name">{{item}}</li>
</ul>
</div>
</body>
<script src="angular/angular.js"></script>
<script src="service.js"></script>
<script type="text/javascript">
var app=angular.module("myApp",[‘myService‘]); //引入服务依赖
/*定义服务*/
app.service("service1",function(){
return {
message:"qwewe"
}
})
/*定义服务，用provider必须使用get方法*/
app.provider("provider1",function(){
this.$get=function(){
return {
message:"q34234324"
}
}
})
/*定义服务*/
app.factory("myfactory",function(){
return {
message:"myfactory"
}
})
/**/
app.controller(‘firstController‘,function($scope,service1,provider1,myfactory,getMessageFactory){
console.log(service1);
console.log(provider1);
console.log(myfactory);
/*引入外置文件的服务getMessageFactory*/
console.log(getMessageFactory.getMessage());
});
</script>
</html>
上面案例引入了一个外部的js，该js专用于定义各种服务
/**
* Created by Administrator on 2016/3/28.
*/
var service=angular.module(‘myService‘,[]);
service.service(‘getMessageFactory‘,function(){
var service={};
service.getMessage=function(){
return "这是外置文件的js服务";
}
return service;
})
service.service(‘getMessageFactory1‘,function(){
var service={};
service.getMessage=function(){
return "这是外置文件的js服务1";
}
return service;
})
service.service(‘getMessageFactory2‘,function(){
var service={};
service.getMessage=function(){
return "这是外置文件的js服务2";
}
return service;
})
在html中的mudule要记得引入依赖关系，引入依赖之前当然你要确保你的service.js已经引入进页面中来了
以上是关于ionic准备之angular基础———服务provider 和 factory的主要内容，如果未能解决你的问题，请参考以下文章
Angular/Ionic/Phonegap 应用程序与 Rails API Web 服务 Auth
Angular 4 / Ionic 3 - 使用量角器创建模拟服务