重寫從$ HTTP到$資源

Question

我有以下代碼（從書角向上和運行）：

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，但它不顯示templateUrlviews/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

試試這個。

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

或刪除$ promise並仍然使用.then。

Answer 2

嘗試這樣的事情從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; 
    }]);