AngularJS services for APIs in large applications
it seems more and more impractical with as interconnected as the app is


You mentioned 30+ APIs. Let's start with that. If all of a sudden, someone from the API team decides to change the semantics for several of the APIs, where would you be starting your end of the change?

Another scenario would be if your manager told you to scrap your code because you'll have to start a new project... using the same API. You'll of course throw away the template and controller because they're app-specific. But the way you wrote your code, you'll also be throwing away all your API. Nothing is spared.

The Angular Way™ of doing this is that anything data-related should live in factories/services while anything UI related lives in the controller, templates and directives. Reasons for doing so includes:


You write the data source just once.
You can easily share data sources across different controllers.
You can easily throw away the UI layers without involving the data layer.


I normally start writing Angular apps by defining my data sources. Once that's done, I build the UI layers and just pull in the dependencies I need. If I want user info in this controller as well as another controller, I don't have to write 2 AJAX calls. All I would need is to pull in the same factory and call the same function in both controllers.

In your app, start by writing every single one of those APIs in its own factory . This means the following code should be gone from the controller:

$http.get('/api/qryListingAPI/?project=' + $scope.project.ProjectID)


Now if you were thinking of writing every single API as an $http call, that's where you got it wrong. Angular has this thing called $resource. Hand it a REST-compliant endpoint and it provides you an object with REST methods. A factory could even be as simple as:

app.factory('QueryListing', function(){
  return $resource('/api/qryListingAPI/');
});


If you did it with factories, no matter how many grids you have, you only need to write the API just once in the service, and just pull in the service. Additionally, resources expose promises. You can easily pop in a then.

app.controller('MainController', function($scope, ..., QueryListing){
  QueryListing.get(...).$promise.then(function(){
    ...
  });
});