Rewrite from $http to $resource - angularjs

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>

Answer 1

Try this.
FifaService.query()
.success(function(resp) {
self.teams = resp.data;
or remove the $promise and still use .then.

Answer 2

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