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紧密联系在一起,在应用程序中我们可以通过使用服务来共享代码, ...
随机推荐
- 查看mms UA/profile
查看彩信的UA/profile信息,当然可以通过打印log来看. 但还有一个比较简便的方法: 直接抓取一个MMS包,用网络包分析工具打开,找到承载该MMS信息的HTTP协议包即可查看:
- sql标识符和格式
数据库名是一个标识符,表名也是一个标识符,在SQL SERVER中标识符分为两类: (1).常规标识符;(2).分隔标识符两者重要的区别:常规标识符必须严格遵守命名的规定,而分隔标识符则可以不遵守命名 ...
- Android jni编辑.so库
引自:http://www.cnblogs.com/sevenyuan/p/4202759.html 1. 在Eclipse中创建项目:TestJNI 2. 新创建一个class:TestJNI.ja ...
- 《剑指Offer》算法题——替换空格
题目:请实现一个函数,将一个字符串中的空格替换成“ % 20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are % 20Happy. class Solution ...
- 递归解析任意层的json
package com.sun.test; import java.util.Iterator; import net.sf.json.JSONArray;import net.sf.json.JSO ...
- hdu_1072_Nightmare(BFS)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1072 题意:给你一个地图,让你在炸弹爆之前找到出口,最初炸弹设定为6,每走一格需要1,中途有地方能让炸 ...
- SSH登录很慢问题的解决方法
用ssh连其他linux机器,会等待10-30秒才有提示输入密码.严重影响工作效率. 关闭ssh的gssapi认证 用ssh -v user@server 可以看到登录时有如下信息: debug1: ...
- Postgres数据库在Linux中的I/O优化
I/O 优化1 打开 noatime方法: 修改 /etc/fstab2 调整预读方法: 查看 sudo blockdev --getra /dev/sda 设置 sudo blockdev --se ...
- 在Windows上安装Python
首先,从官网下载 最新版本 的Python 2.7.可通过 Python官网 的”Windows Installer”链接保证下载到的版本是最新的. Windows版本是MSI文件格式,双击它即可开始 ...
- Jquery.Linq用法
下载:http://linqjs.codeplex.com/ LINQ Pad Enumerable.Range(0, 20).Where("$ % 3 == 0").Select ...