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紧密联系在一起,在应用程序中我们可以通过使用服务来共享代码, ...
随机推荐
- windows cmd启动heritrix
首先下载heritrix-1.14.4.zip文件,可以在http://sourceforge.net/projects/archive-crawler/files/heritrix3/下载.下载后解 ...
- tomcat配置多个虚拟主机
先修改默认端口(8080),http的默认端口是80,我们将8080改成80,这样域名就不用带上端口了 修改conf文件夹下的server.xml文件 添加多个主机(以下三个主机对应三个域名,三个域名 ...
- 通过Maven配置测试环境和开发环境连接不同的数据库
通过Maven配置测试环境和开发环境连接不同的数据库 作者及来源: 通灵宝玉 - 博客园 收藏到→_→: 此文来自: 马开东博客 网址:http://www.makaidong.com ...
- ios UITapGestureRecognizer 单指单击、单指多击、多指单击、多指多击事件操作
转自:http://blog.csdn.net/longzs/article/details/7457108 在ios开发中,需用到对于手指的不同操作,以手指点击为例:分为单指单击.单指多击.多指单击 ...
- Python Tools
[TOC] Python virtualenv.fabric 和 pip 是 pythoneer 的三大神器 pip pip pip是一个安装和管理Python包的工具,是easy_install的一 ...
- 关于C++数组的几点讨论
数组名为何物? int main() { , , , , }; int *pnumber = number; cout << sizeof(number) << endl; c ...
- Linux设置开机服务自动启动
[root@localhost ~]# chkconfig --list 显示开机可以自动启动的服务[root@localhost ~]# chkconfig --add *** 添加开机自 ...
- hdu_1074_Doing Homework(状压DP)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1074 题意:给你n个课程(n<=15)每个课程有限制的期限和完成该课程的时间,如果超出时间,每超 ...
- LeetCode OJ 104. Maximum Depth of Binary Tree
Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...
- List列表 OrderBy
一个条件排序情况 list.OrderBy(item => tem.State); 多个条件的情况下 list.OrderBy(item => new {item.State, item. ...