AngularJS global controller

Question

In my Angular application I have a few functions which I think should be in a global controller. In server-side MVC frameworks there's usually a global controller that all other controllers extend, which is where I'd put these functions. I'm wondering if there's anything like that for Angular.

So at the moment I have this in app.js:

'use strict';

// Declare app level module
var app = angular.module('app', ['ngRoute']).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    // Possible routes can go here

}]);

And this in controllers.js:

app.controller('DownloadsController', function ($scope) {

});

I want to be able to add downloads in my application, so I'd write a $scope.addDownload = function() { ... } in the DownloadsController. That will work, however I'd like to be able to add downloads anywhere in my application, which means calling that addDownload() function no matter what controller I'm in.

Can I define a global controller that holds the addDownload() function and be able to call that function from all of my controllers?

Answer 1

There are a few different approaches I could recommend. First, even in a server side based MVC type application, this would not be a "global" controller, rather an Aspect Oriented service... or a "decorator". Angular is really no different in that regard, in that you have the ability to decorate your scope with the desired functionality. Your options here would be:

• create a download directive
• create a download provider/service/model
• extend the scope with a decorator to add the method to all of your controllers

Depending on how you need to this functionality to be invoked, will determine your method of developing this feature. The most robust and portable, would be to create your own module, and register a provider that is a factory for this functionality. That would allow you to easily inject the functionality into any controller you choose, and configure some common settings across your module or application:

myApp.provider('download', function DownloadProvider() {
  var configurableSetting = false;

  this.setConfigurableSetting = function(value) {
    configurableSetting = !!value;
  };

  this.$get = ["customArgument", function addDownload(customArgument) {

    return new Download(customArgument, configurableSetting);
  }];
});

function Download(customArgument, configurableSetting){
  //download code
  return {
     addDownload:function(){
        //code for method
     }
   }
}

Then in your controller:

app.controller('whatever',['download',function(download){
      var download1 = download(); //creates a new download instance
      download.addDownload(); //executes method available on function

}])

Using this pattern allows you to configure a provider for your newly created factory, so that you could set your configurableSetting during the config phase, easily adding common functionality across your module or application without having to explicitly define it in every call.

For more details on how this works, check out the Angular Developer guide on providers: http://docs.angularjs.org/guide/providers