Rewrite from $http to $resource

Question

I have the following code (from the book Angular-Up-And-Running):

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'
    });
  });

And then on the server:

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

I tried to rewrite it like this, to use $resource, but it does not show templateUrl views/team_list.html.

My solution:

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'
    });
  });

Why can't I see views/team_list.html? Best Regards

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

score 1 · Accepted Answer · answered Oct 21 '15 at 14:44

1

Try this.

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

or remove the $promise and still use .then.

answered Oct 21 '15 at 14:44

venturz909

330
2
12

why remove `$promise` ? var User = $resource('/user/:userId', {userId:'@id'}); User.get({userId:123}) .$promise.then(function(user) { $scope.user = user; }); works for example. From Angular documentation. – user1665355 Oct 21 '15 at 18:56
Maybe you mean $q.defer(). I have never seen $promise used, and even googling it came back to $q. – venturz909 Oct 22 '15 at 02:17
Ok, well see this answer for example http://stackoverflow.com/questions/19490560/angularjs-resource-promise or https://docs.angularjs.org/api/ngResource/service/$resource – user1665355 Oct 22 '15 at 07:57

score 0 · Answer 2 · answered Oct 21 '15 at 12:26

try something like this from 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;
    }]);

Well it seems that the above solution is unnecessary complicated:) And does not answer my question. — user1665355, Oct 21 '15 at 12:32

Rewrite from $http to $resource

2 Answers2