AngularJS $resource custom urls not working - angularjs

Question

I have these 2 services:
.factory('HttpHandler', function() {
return {
loadData: function (promise) {
var self = {
data: [],
loading: true,
promise: promise
};
promise.then(function (data) {
self.data = data;
self.loading = false;
});
promise.finally(function () {
self.loading = false;
});
return self;
}
};
})
.factory('Order', ['$resource', '$filter', 'apiUrl', function ($resource, $filter, api) {
var Order = $resource(api + 'orders/:path', {
path: '#path'
}, {
recent: {
method: 'GET',
params: {
path: 'recent'
},
isArray: true
}
}, {
failures: {
method: 'GET',
params: {
path: 'failures'
},
isArray: true
}
}, {
exceptions: {
method: 'GET',
params: {
path: 'exceptions'
},
isArray: true
}
});
angular.extend(Order.prototype, {
getDescription: function () {
var rolls = 0,
cuts = 0,
skus = [],
lines = $filter('orderBy')(this.lines, 'sku');
for (var i = 0; i < lines.length; i++) {
var line = lines[i];
switch (line.type) {
case 0: // cut
cuts++;
break;
case 1: // roll
rolls++
break;
}
if (skus.indexOf(line.sku) == -1) {
skus.push(line.sku);
}
}
var description = '';
description += cuts > 0 ? cuts > 1 ? cuts + ' x cuts' : cuts + ' x cut' : '';
description += rolls > 0 && description.length > 0 ? ', ' : '';
description += rolls > 0 ? rolls > 1 ? rolls + ' x rolls' : rolls + ' x roll' : '';
description += skus.length == 1 ? ' of ' + skus[0] : '';
return description;
}
});
return Order;
}]);
As you can see, I have defined 3 different paths to use:
orders/recent
orders/failures
orders/exceptions
I have this controller:
.controller('CustomerServicesController', ['HttpHandler', 'Order', function (handler, Order) {
var self = this;
self.recent = handler.loadData(Order.recent({ limit: 30 }).$promise);
self.failures = handler.loadData(Order.failures({ limit: 30 }).$promise);
self.exceptions = handler.loadData(Order.exceptions({ limit: 30 }).$promise);
}])
When I run my application, I get an error stating:
undefined is not a function
on the line that states self.failures = handler.loadData(Order.failures({ limit: 30 }).$promise);.
If I comment out the 2 lines so the controller becomes:
.controller('CustomerServicesController', ['HttpHandler', 'Order', function (handler, Order) {
var self = this;
self.recent = handler.loadData(Order.recent({ limit: 30 }).$promise);
//self.failures = handler.loadData(Order.failures({ limit: 30 }).$promise);
//self.exceptions = handler.loadData(Order.exceptions({ limit: 30 }).$promise);
}])
Everything works fine....
I think it has something to do with the $resource but I can't figure it out.
Just for completeness sake, here is the template file:
<div class="row">
<a class="back" href="/"><i class="fa fa-arrow-circle-left"></i></a>
<section class="large-4 columns">
<h1 class="column-title">Orders <small>quick search</small></h1>
<form name="orderFrom" role="form" ng-submit="customerServices.orderSearch()">
<div class="row collapse">
<div class="small-10 columns typeahead-icon">
<input type="text" ng-model="customerServices.searchTerm" placeholder="Search" typeahead="item for items in customerServices.autoComplete() | filter:$viewValue" typeahead-loading="customerServices.loading" typeahead-min-length="2">
<i ng-show="customerServices.loading" class="fa fa-spinner fa-spin"></i>
</div>
<div class="small-2 columns">
<button type="submit" class="button postfix">Go</button>
</div>
</div>
</form>
</section>
<section class="tile-column large-8 columns" tile-column>
<h1 class="column-title">Recent orders</h1>
<div class="loading" ajax-loader ng-show="customerServices.recent.loading"></div>
<div class="alert alert-box" ng-show="!customerServices.recent.loading && customerServices.recent.data.length === 0">
No records have been found that match your search.
×
</div>
<a class="tile large" ng-href="/customer-services/view-order/{{order.orderNumber}}" tile ng-repeat="order in customerServices.recent.data" id="{{order.orderNumber}}">
<div class="text">
<strong ng-bind="order.account.accountNumber"></strong> <span ng-bind="order.account.name"></span><br />
<span ng-bind="order.raisedBy"></span><br />
<span ng-bind="order.orderNumber"></span><br />
<span ng-bind="order.getDescription()"></span><br />
</div>
</a>
</section>
<section class="tile-column large-8 columns" tile-column>
<h1 class="column-title">Sync failures</h1>
<div class="loading" ajax-loader ng-show="customerServices.failures.loading"></div>
<div class="alert alert-box" ng-show="!customerServices.failures.loading && customerServices.failures.data.length === 0">
No records have been found that match your search.
×
</div>
<a class="tile large" ng-href="/customer-services/view-order/{{order.orderNumber}}" tile ng-repeat="order in customerServices.failures.data" id="{{order.orderNumber}}">
<div class="text">
<strong ng-bind="order.account.accountNumber"></strong> <span ng-bind="order.account.name"></span><br />
<span ng-bind="order.raisedBy"></span><br />
<span ng-bind="order.orderNumber"></span><br />
<span ng-bind="order.getDescription()"></span><br />
</div>
</a>
</section>
<section class="tile-column large-8 columns" tile-column>
<h1 class="column-title">Exceptions</h1>
<div class="loading" ajax-loader ng-show="customerServices.exceptions.loading"></div>
<div class="alert alert-box" ng-show="!customerServices.exceptions.loading && customerServices.exceptions.data.length === 0">
No records have been found that match your search.
×
</div>
<a class="tile large" ng-href="/customer-services/view-order/{{order.orderNumber}}" tile ng-repeat="order in customerServices.exceptions.data" id="{{order.orderNumber}}">
<div class="text">
<strong ng-bind="order.account.accountNumber"></strong> <span ng-bind="order.account.name"></span><br />
<span ng-bind="order.raisedBy"></span><br />
<span ng-bind="order.orderNumber"></span><br />
<span ng-bind="order.getDescription()"></span><br />
</div>
</a>
</section>
</div>
Can anyone tell me why this isn't working?

Answer 1

Figured it out, it was a syntax error on my part in the Order service. It should be:
var Order = $resource(api + 'orders/:path', {
path: '#path'
}, {
recent: {
method: 'GET',
params: {
path: 'recent'
},
isArray: true
},
failures: {
method: 'GET',
params: {
path: 'failures'
},
isArray: true
},
exceptions: {
method: 'GET',
params: {
path: 'exceptions'
},
isArray: true
}
});
and NOT
var Order = $resource(api + 'orders/:path', {
path: '#path'
}, {
recent: {
method: 'GET',
params: {
path: 'recent'
},
isArray: true
}
}, {
failures: {
method: 'GET',
params: {
path: 'failures'
},
isArray: true
}
}, {
exceptions: {
method: 'GET',
params: {
path: 'exceptions'
},
isArray: true
}
});
subtle difference :)