Is access to a service inherited by child controllers? - angularjs

Question

If a parent controller has a service injected, do the controller's children inherit the service implicitly or do they have to have the service injected explicitly?

Answer 1

You need to inject the service explicitly. The child controller inherits the scope, but of course the service is not on the scope object (unless you put it there)
see this jsfiddle to prove it: http://jsfiddle.net/HB7LU/11596/
var myApp = angular.module('myApp',[]);
myApp.factory('serviceId', function() {
var a = 1;
return {
a: a
};
});
myApp.controller('Ctrl',['$scope', 'serviceId' ,function($scope, serviceId) {
$scope.name = 'Superhero' + serviceId.a;
}])
myApp.controller('ChildCtrl',['$scope',function($scope) {
// the next line throws an undefined error because of serviceId
$scope.name = 'Superhero' + serviceId.a;
}])

Answer 2

If you do prototypical inheritance then you can have a field from the parent controller as something that can be used within the derived controller. In order to make angular js controllers inheritable you have to do a few things. Hopefully the following explanation will be more clear.
Prototypical inheritance in JavaScript
So to start off with lets define how we are going to prototypically inherit from an object. In javascript prototypical inheritance can be done as follows:
function Foo(some_param)
{
this.some_param = some_param
}
function Bar(some_param, some_specialized_param)
{
/**
* Call the super class constructor
*/
Foo.call(this, some_param);
this.some_specialized_param = some_specialized_param;
}
/**
* Now that you have defined the constructor, you need to
* define the prototypical inheritance
*/
Bar.prototype = Object.create(Foo.prototype);
/**
* Now you have to set the constructor
*/
Bar.prototype.constructor = Bar;
So using this example you can create angularjs controllers. There is one problem however. If for example The class Bar is in a different module or directory, you need to import the definition. You could use some other tool like RequireJS to load the module/controller/class definition in the file where Bar is defined and then inherit as follows. You could however also use angularjs constructs as follows:
Controller inheritance in AngularJS
So you could use two angularjs constructs to define a controller's instantiation point (angular.module(..).constructor) and the definition of a controller (angular.module(..).factory). AngularJS factories can be used for controller's class definition.
angular.module('some_module')
.factory('BaseCtrlClass', ['aService', function(aService)
{
function BaseCtrl($scope)
{
/**
* Assign a reference to "aService"
* which is injected whithin this factory
*/
this.aService = aService;
this.$scope = $scope;
}
return BaseCtrl;
}]);
Now you can define a controller definition so that you can instantiate it using ngController like:
angular.module('some_module')
.controller('BaseCtrl', [$scope, 'BaseCtrlClass', function($scope, BaseCtrlClass)
{
return new BaseCtrlClass($scope);
}]);
Notice that in the factory I have defined it as BaseCtrlClass because that is the class definition. In the controller construct I have defined BaseCtrl which is something that you can use externally as mentioned using ngController. The BaseCtrlClass name should be used internally in derived controllers as we will see below. So as I mentioned the problem comes when you are trying to import the definition of BaseCtrlClass in another file/module ideally a file defining a DerivedCtrl class. Lets define the DerivedCtrl Class as follows:
angular.module('a_different_module')
.factory('DerivedCtrlClass', ['BaseCtrlClass', function(BaseCtrlClass)
{
function DerivedCtrl($scope, aDifferentService)
{
BaseCtrlClass.call(this, $scope);
this.aDifferentService = aDifferentService //Specialized resource
}
DerivedCtrl.prototype = Object.create(BaseCtrlClass.prototype);
DerivedCtrl.prototype.constructor = DerivedCtrl;
return DerivedCtrl;
}])
.controller('DerivedCtrl', ['$scope', 'aDiferentService', 'DerivedCtrlClass', function($scope, aDifferentService, DerivedCtrlClass)
{
return new DerivedCtrlClass($scope, aDifferentService);
}]);
So here you can see that I have defined DerivedCtrl in a factory called DerivedCtrlClass. This essentially defines the controller class definition. So any other module or class trying to inherit from this can utilise this factory. In the constructor I have called the BaseCtrlClass's constructor passing "this" and "$scope" as arguments as it requires. Later on I defined the prototype constructions and default constructor similar to the javascript example I mentioned earlier. For convenience as well I have defined a controller construct which can be used with ngController as well.
The main point that I want to highlight is that an instance of DerivedCtrl can now use
this.aService
which is something that is defined in BaseCtrl. Basically anything that is defined within the scope of BaseCtrl and DerivedCtrl can now be used within an instance of DerivedCtrl. This works quite well in html when you are trying to define a DerivedCtrl you can just do
<div ng-controller="DerivedCtrl">
......
</div>
Scoped inheritance
If you want to however have scoped inheritance you can use something like this:
<div ng-controller="BaseCtrl">
<div ng-controller="DerivedCtrl">
...
</div>
</div>
The problem with this is that you need to communicate fields using $scope. In the constructor for BaseCtrl you need to do the following:
$scope.aService = aService
And then from DerivedCtrl you can use $scope.aService. This doesn't work that well because it breaks encapsulation. For maintainability you might want to not export this service and make it pseudo protected only to be accessed by classes that inherit from BaseCtrl. In that case the solution I provided works great, at least I have been using that way.
Hope this helps.