Can someone provide a use case for the $controller service in AngularJS?

Question

Angularjs docs give the usage of $controller service as: $controller(constructor, locals);

Can anyone focus some light on these 2 points:

1. When to use $controller service. Please provide some use case.
2. Details about 'locals' parameter passed to it.

Menu

Since you cannot really inject the controller and if you want to instantiate a controller anywhere you need to use $controller provider . Some information you can find here – Fredette

Answer 1

You can create common functions which are to be executed on $scope into one controller may be named 'CommonCtrl'.

angular.module('app',[]).controller('CommonCtrl', ['$scope', function($scope){
      var self = this;
      $scope.stuff1 = function(){

      }

      $scope.stuff2 = function(){

      }
      self.doCommonStuff = function(){
               // common stuff here
               $scope.stuff1();
               $scope.stuff2();

      };
      return self;
}]);

And inject this controller in other controllers let say 'TestCtrl1' like

angular.module('app',[]).controller('TestCtrl1', ['$scope','$controller', function($scope, $controller){
        var commonCtrl = $controller('CommonCtrl',{$scope: $scope}); // passing current scope to commmon controller
        commonCtrl.doCommonStuff();
}]);

Here, the in second argument of $controller service, we are passing dependencies that are required by CommonCtrl. So the doCommonStuff method will use TestCtrl1 controller's scope.

Philpot

Answer 2

To mention one, it is useful in creating the target controller during unit testing.

Lets say you have a controller with signature .controller('MainCtrl', function($scope, serviceA){..}).

In testing,

// ...

beforeEach(inject(function ($rootScope, $controller, serviceA) {

  // assign injected values to test module variables
  scope = $rootScope.$new();
  service = serviceA

  // create the controller, by passing test module variables values as dependencies
  $controller('MainCtrl', {'$scope': scope, 'serviceA': service});
}));

it('test on controller', function() {
  //...
});

For more info checkout: https://docs.angularjs.org/guide/unit-testing

Nara

Answer 3

You can also use this service to achieve controller inheritance.

angular.module('app',[]).controller('BaseCtrl', ['$scope', function($scope){
  $scope.action1 = function(){
    console.log('In BaseCtrl action1');
  }

  $scope.action2 = function(){
    console.log('In BaseCtrl action2');
  }

}]);

angular.module('app').controller('ChildCtrl', ['$scope', function($scope){

  angular.extend(this, $controller('BaseCtrl', {
      $scope: $scope
  }));

  $scope.action1 = function(){
    console.log('Overridden in ChildCtrl action1');
  }

  $scope.action2 = function(){
    console.log('Overridden in ChildCtrl action2');
  }

}]);

Codel