Creating an Angular API Service to provide access to all Web APIs - angularjs

Question

I want to create an Angular service that will allow me to access a number of $resources, each that access a given API. For example, I want all of my API calls to be generated from a single service using syntax like
var data = API.Products.query(function() {
$scope.products = data.Products;
});
OR
var data = API.Customers.get({id:123}, function() {
$scope.customer = data;
});
Where Products and Customers are Angular $resources that reside within my API service. Currently I am trying to do this
var app = angular.module('myApp', ['ngRoute', 'ngSanitize', 'ngResource', 'API']);
var APIService = angular.module("API", ["ngResource", function ($resource) {
this.Products = $resource('/WebApi/Products/:type/:id', {id:'all'},
{
systemUpdate: { method: 'GET' },
});
this.Customers = $resource('/WebApi/Customers/:type/:id', {id:'all'},
{
systemUpdate: { method: 'GET' },
});
}]);
But I am getting an error during the compilation of this Service. Uncaught Error and when I look at the same page in Firefox, the error does not give any more detail about what is going wrong. What is the correct way to give this kind of functionality?
Here is my factory now:
app.factory("API", ["ngResource", function ($resource) {
return {
API: {
Alerts: $resource('/WebApi/Alert/:type/:id', { id: 'all' },
{
systemUpdate: { method: 'GET' },
autoArchive: { method: 'POST', url: '/WebApi/Alert/Template/:type' }
})
}
}
}]);

Answer 1

Just make it a factory and return the necessary resources:
var app = angular.module("myApp");
app.factory("API", ["$resource", function($resource) {
return {
API: {
Customers: $resource('/WebApi/Customers/:type/:id', {id:'all'},
{
systemUpdate: { method: 'GET' },
});
}
}
}]);
Inject when needed:
app.controller("myController", ["API", function(API) {
API.Customers.Get({}, function(data) {
//sample get call from Customers
});
}]);