angularjs model.service vs provider vs factory?
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="MyCtrl">
{{serviceOutput}}
<br/><br/>
{{factoryOutput}}
<br/><br/>
{{providerOutput}} <script> var app = angular.module( 'app', [] ); var MyFunc = function() { this.name = "default name"; this.$get = function() {
this.name = "new name"
return "Hello from MyFunc.$get(). this.name = " + this.name;
}; return "Hello from MyFunc(). this.name = " + this.name;
}; // returns the actual function
app.service( 'myService', MyFunc ); // returns the function's return value
app.factory( 'myFactory', MyFunc ); // returns the output of the function's $get function
app.provider( 'myProv', MyFunc ); function MyCtrl( $scope, myService, myFactory, myProv ) { $scope.serviceOutput = "myService = " + myService;
$scope.factoryOutput = "myFactory = " + myFactory;
$scope.providerOutput = "myProvider = " + myProv; } </script> </body>
</html>
生成结果：
myService = [object Object] myFactory = Hello from MyFunc(). this.name = default name myProvider = Hello from MyFunc.$get(). this.name = new name
app.factory扩展：
factory('AttendersService', function ($q, $http, $rootScope) {
var service = {};
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
service.setArtist = function(artist){
_artist = artist;
}
service.getArtist = function(){
return _artist;
}
service.callItunes = function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
}
return service;
}
controller 引用：app.controller('myFactoryCtrl', function($scope, myFactory){
$scope.data = {};
$scope.updateArtist = function(){
myFactory.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myFactory.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
});app.service扩展：
app.service('myService', function($http, $q){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
this.setArtist = function(artist){
_artist = artist;
}
this.getArtist = function(){
return _artist;
}
this.callItunes = function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
}
});
conrroller 引用：
app.controller('myServiceCtrl', function($scope, myService){
$scope.data = {};
$scope.updateArtist = function(){
myService.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myService.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
});
app.provider扩展：
app.provider('myProvider', function(){
var baseUrl = 'https://itunes.apple.com/search?term=';
var _artist = '';
var _finalUrl = '';
//Going to set this property on the config function below
this.thingFromConfig = '';
var makeUrl = function(){
_artist = _artist.split(' ').join('+');
_finalUrl = baseUrl + _artist + '&callback=JSON_CALLBACK'
return _finalUrl;
}
this.$get = function($http, $q){
return {
callItunes: function(){
makeUrl();
var deferred = $q.defer();
$http({
method: 'JSONP',
url: _finalUrl
}).success(function(data){
deferred.resolve(data);
}).error(function(){
deferred.reject('There was an error')
})
return deferred.promise;
},
setArtist: function(artist){
_artist = artist;
},
getArtist: function(){
return _artist;
},
thingOnConfig: this.thingFromConfig
}
}
});
controller引用:
app.controller('myProviderCtrl', function($scope, myProvider){
$scope.data = {};
$scope.updateArtist = function(){
myProvider.setArtist($scope.data.artist);
};
$scope.submitArtist = function(){
myProvider.callItunes()
.then(function(data){
$scope.data.artistData = data;
}, function(data){
alert(data);
})
}
$scope.data.thingFromConfig = myProvider.thingOnConfig;
});
angularjs model.service vs provider vs factory?的更多相关文章
- Service vs provider vs factory 转自：http://stackoverflow.com/questions/15666048/service-vs-provider-vs-factory
请看此链接:http://stackoverflow.com/questions/15666048/service-vs-provider-vs-factory
- AngularJS 笔记之创建服务方式比较 ： factory vs service vs provider 。
首先说一下服务这个东西是用来干嘛的.很多时候我们把太多的数据和逻辑都一股脑儿地往 controller 里放.这样我们的 controller 原来越臃肿.从它们的生命周期可以发现,其实 contro ...
- angularjs中provider，factory，service的区别和用法
angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...
- AngularJS 之 Factory vs Service vs Provider【转】
英文原文:AngularJS: Factory vs Service vs Provider 当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一 ...
- AngularJS 中的 factory、 service 和 provider区别，简单易懂
转自:http://blog.csdn.net/ywl570717586/article/details/51306176 初学 AngularJS 时, 肯定会对其提供 factory . serv ...
- angularJs 解析factory、service、provider
了解angular js factory可以认为是设计模式中的工厂方法,就是你提供一个方法,该方法返回一个对象的实例:对于angularJs的factory,就是先定义一个对象,给这个对象添加属性和方 ...
- AngularJS之Factory vs Service vs Provider
原文 http://www.linuxeden.com/html/news/20140509/151538.html 当你初试 Angular 时,很自然地就会往 controller 和 scop ...
- [转载]AngularJS之Factory vs Service vs Provider
http://www.oschina.net/translate/angularjs-factory-vs-service-vs-provider http://tylermcginnis.com/a ...
- AngularJS之Service（四）
前言 前面我们讲了控制器.过滤器以及指令,这一节我们来讲讲重大内容之一服务和其中涉及到的工厂. 话题 AngularJS中服务可以说是和DI紧密联系在一起,在应用程序中我们可以通过使用服务来共享代码, ...
随机推荐
- Openjudge-计算概论（A）-字符串排序
描述 参考整数排序方法,设计一种为字符串排序的算法,将字符串从小到大输出 输入 第一行为测试数据组数t, 后面跟着t组数据.每组数据第一行是n,表示这组数据有n行字符串,接下来是要排序的n行字符串.每 ...
- Table获取checkbox选中行数据
//检测勾选值 function checkEnter() { var Ivalue = ""; $("#dataTable tr").each(functio ...
- javascript动画效果之匀速运动
html和css写在一起方便看,div通过定位设置为-200隐藏,span也是通过定位定在div靠左的中间 <!DOCTYPE html> <html> <head> ...
- js事件冒泡和捕捉
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
- Spring 表单提交，后台自动封装有集合对象的对象
from表单: <form action="${pageContext.request.contextPath}/vote/save" method="post&q ...
- mongoDB5--mongoDB增删改查
之前我们探讨了mongodb的"增删改查",要知道,我们的增删改其实都离不开查询表达式,所以查询表达式在mongodb是非常重要的.关于查询其实我们只是介绍了以小部分.关于mong ...
- Android中的shape
在Android程序开发中,我们经常会去用到Shape这个东西去定义各种各样的形状,shape可以绘制矩形环形以及椭圆,所以只需要用椭圆即可,在使用的时候将控件比如imageview或textview ...
- 一个有用的shell脚本
#!/bin/bash #if [ $1 -eq null ]; then # echo "please input params1!" # exit #fi #if [ $2 - ...
- CSS BFC(Block Formatting Context)
BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提 ...
- 第二十六节，Python内置函数
Python3.0内置函数 abs() 取数字的绝对值,也就是无论是正数还是负数取它的绝对值格式:abs(目标变量)返回:数字类型 #!/usr/bin/env python # -*- coding ...