$resource function wrapper angularjs

$resource function wrapper angularjs

本文关键字：angularjs wrapper function resource      更新时间：2023-09-26

目前，我正在做这样的事情:

var albumList = $resource('https://api.imgur.com/3/account/guy123/albums').get(function () {
    albumList.data.forEach(function (album) {
        albums.push(album);
    });
});

我如何把它变成一个可以在我的服务和控制器中调用的函数呢?

factory('Imgur', function($resource, $http) {
    var albumsService = {};
    var albums = [];
    albumsService.getAlbumList = function() {
        var albumList = $resource('https://api.imgur.com/3/account/guy123/albums').get(function () {
            albumList.data.forEach(function (album) {
                albums.push(album);
            });
        });
    };
    albumsService.albumList = function() {
        albumsService.getAlbumList();
        return albums;
    };
    return albumsService;
});

.controller('Filters', ['$scope','Imgur', function($scope, Imgur) {
    $scope.imgur = Imgur;
    $scope.imgur.albumList();
    //OR
    $scope.imgur.getAlbumList();
    //Some good context here is what if a user wanted to "refresh" the data.
    $scope.updateFilter = function() {
        $scope.imgur.getAlbumList();
    }; 

}]);

这里的最终目标是能够尽可能多地调用资源服务。

这个服务应该是一个可以在服务内部和控制器内部调用的函数。
angular.module("MyApp", ['ng-resource']).
  service("Database", function() {
    return {
      albums : $resource('https://api.imgur.com/3/account/guy123/albums')
    }
  }).
  controller("MyCtrl", function(Database) {
    $scope.albums = Database.albums.query();
  })

然后在Html

中
<html ng-app="MyApp">
<head></head>
<body ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="album in albums">
      {{album.name}}
    </li>
  </ul>
</body> 
</html>

服务

var service = angular.module("yourApp.service", ['ngResource']);
service.factory('albumsService', [$resource',function ($resource){
    return $resource('https://api.imgur.com/3/account/guy123/albums',{},{
         query: {method: "GET", isArray:true}
    });
}]);

然后在控制器

$scope.albumList = albumsService.query();
相关文章：