首页 > 代码库 > angularjs model.service vs provider vs factory?

angularjs model.service vs provider vs factory?

2024-07-19 13:26:18   220人阅读

<!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?


联系
我们