从 $http 重写为 $resource

Question

我有以下代码（来自 Angular-Up-And-运行一书）：

angular.module('fifaApp')

  .controller('TeamListCtrl', ['FifaService',
    function(FifaService) {
      var self = this;
      self.teams = [];

      FifaService.getTeams().then(function(resp) {
        self.teams = resp.data;
      });
  }])

  .factory('FifaService', ['$http',
    function($http) {
      return {
        getTeams: function() {
          return $http.get('/api/team');
        },

        getTeamDetails: function(code) {
          return $http.get('/api/team/' + code);
        }
      }
  }])

  .config(function($routeProvider) {
    $routeProvider.when('/', {
      templateUrl: 'views/team_list.html',
      controller: 'TeamListCtrl as teamListCtrl'
    });
  });

然后在服务器上：

app.get('/api/team', function(req, res) {
  res.send(FIFA.TEAMS_LIST);
});

我试过这样改写，使用$resource，但是没有显示templateUrl views/team_list.html.

我的解决方案：

angular.module('fifaApp','ngResource')

  .controller('TeamListCtrl', ['FifaService',
    function(FifaService) {
      var self = this;
      self.teams = [];

      FifaService.query().$promise
      .then(function(resp) {
        self.teams = resp.data;
      });
  }])
//`$resource` now instead of `$http`
  .factory('FifaService', ['$resource',
    function($resource) {
      return $resource('/api/team');
  }])

  .config(function($routeProvider) {
    $routeProvider.when('/', {
      templateUrl: 'views/team_list.html',
      controller: 'TeamListCtrl as teamListCtrl'
    });
  });

为什么我看不到 views/team_list.html？最好的问候

<div class="team-list-container">
  <div class="team"
       ng-repeat="team in teamListCtrl.teams | orderBy: 'rank'">
     <div class="team-info row">
       <div class="col-lg-1 rank">
          <span ng-bind="team.rank"></span>
       </div>
       <div class="col-sm-3">
         <img ng-src="{{team.flagUrl}}" class="flag">
       </div>
       <div class="col-lg-6 name">
        <a title="Image Courtesy: Wikipedia"
           ng-href="#/team/{{team.code}}"
           ng-bind="team.name"
           style="color: cadetblue;"></a>
       </div>
     </div>
  </div>
</div>

Answer 1

试试 here

中的类似内容

angular.module('job.models', [])
    .factory('Job', ['$resource', function($resource) {
        var Job = $resource('/api/jobs/:jobId', { full: 'true', jobId: '@id' }, {
            query: {
                method: 'GET',
                isArray: false,
                transformResponse: function(data, header) {
                    var wrapped = angular.fromJson(data);
                    angular.forEach(wrapped.items, function(item, idx) {
                        wrapped.items[idx] = new Job(item);
                    });
                    return wrapped;
                }
            }
        });

        Job.prototype.getResult = function() {
            if (this.status == 'complete') {
                if (this.passed === null) return "Finished";
                else if (this.passed === true) return "Pass";
                else if (this.passed === false) return "Fail";
            }
            else return "Running";
        };

        return Job;
    }]);

Answer 2

试试这个。

  FifaService.query()
  .success(function(resp) {
    self.teams = resp.data;

或者删除 $promise 并仍然使用 .then.

从 $http 重写为 $resource

Rewrite from $http to $resource

angularjs

express

ngresource