标签：style blog http color io ar art div cti
<!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?
标签：style blog http color io ar art div cti
原文地址：http://www.cnblogs.com/yujian-bcq/p/3936917.html
