What's the recommended way to extend AngularJS controllers?

javascript angularjs dry

84,802

Solution 1

Perhaps you don't extend a controller but it is possible to extend a controller or make a single controller a mixin of multiple controllers.

module.controller('CtrlImplAdvanced', ['$scope', '$controller', function ($scope, $controller) {
    // Initialize the super class and extend it.
    angular.extend(this, $controller('CtrlImpl', {$scope: $scope}));
    … Additional extensions to create a mixin.
}]);

When the parent controller is created the logic contained within it is also executed. See $controller() for for more information about but only the $scope value needs to be passed. All other values will be injected normally.

@mwarren, your concern is taken care of auto-magically by Angular dependency injection. All you need is to inject $scope, although you could override the other injected values if desired. Take the following example:

(function(angular) {

	var module = angular.module('stackoverflow.example',[]);

	module.controller('simpleController', function($scope, $document) {
		this.getOrigin = function() {
			return $document[0].location.origin;
		};
	});

	module.controller('complexController', function($scope, $controller) {
		angular.extend(this, $controller('simpleController', {$scope: $scope}));
	});

})(angular);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>

<div ng-app="stackoverflow.example">
    <div ng-controller="complexController as C">
        <span><b>Origin from Controller:</b> {{C.getOrigin()}}</span>
    </div>
</div>

Although $document is not passed into 'simpleController' when it is created by 'complexController' $document is injected for us.

Solution 2

For inheritance you can use standard JavaScript inheritance patterns. Here is a demo which uses $injector

function Parent($scope) {
  $scope.name = 'Human';
  $scope.clickParent = function() {
    $scope.name = 'Clicked from base controller';
  }    
}

function Child($scope, $injector) {
  $injector.invoke(Parent, this, {$scope: $scope});
  $scope.name = 'Human Child';
  $scope.clickChild = function(){
    $scope.clickParent();
  }       
}

Child.prototype = Object.create(Parent.prototype);

In case you use the controllerAs syntax (which I highly recommend), it is even easier to use the classical inheritance pattern:

function BaseCtrl() {
  this.name = 'foobar';
}
BaseCtrl.prototype.parentMethod = function () {
  //body
};

function ChildCtrl() {
  BaseCtrl.call(this);
  this.name = 'baz';
}
ChildCtrl.prototype = Object.create(BaseCtrl.prototype);
ChildCtrl.prototype.childMethod = function () {
  this.parentMethod();
  //body
};

app.controller('BaseCtrl', BaseCtrl);
app.controller('ChildCtrl', ChildCtrl);

Another way could be to create just "abstract" constructor function which will be your base controller:

function BaseController() {
  this.click = function () {
    //some actions here
  };
}

module.controller('ChildCtrl', ['$scope', function ($scope) {
  BaseController.call($scope);
  $scope.anotherClick = function () {
    //other actions
  };
}]);

Blog post on this topic

Solution 3

Well, I'm not exactly sure what you want to achieve, but usually Services are the way to go. You can also use the Scope inheritance characteristics of Angular to share code between controllers:

<body ng-controller="ParentCtrl">
 <div ng-controller="FirstChildCtrl"></div>
 <div ng-controller="SecondChildCtrl"></div>
</body>

function ParentCtrl($scope) {
 $scope.fx = function() {
   alert("Hello World");
 });
}

function FirstChildCtrl($scope) {
  // $scope.fx() is available here
}

function SecondChildCtrl($scope) {
  // $scope.fx() is available here
}

Solution 4

You don't extend controllers. If they perform the same basic functions then those functions need to be moved to a service. That service can be injected into your controllers.

Solution 5

Yet another good solution taken from this article:

// base controller containing common functions for add/edit controllers
module.controller('Diary.BaseAddEditController', function ($scope, SomeService) {
    $scope.diaryEntry = {};

    $scope.saveDiaryEntry = function () {
        SomeService.SaveDiaryEntry($scope.diaryEntry);
    };

    // add any other shared functionality here.
}])

module.controller('Diary.AddDiaryController', function ($scope, $controller) {
    // instantiate base controller
    $controller('Diary.BaseAddEditController', { $scope: $scope });
}])

module.controller('Diary.EditDiaryController', function ($scope, $routeParams, DiaryService, $controller) {
    // instantiate base controller
    $controller('Diary.BaseAddEditController', { $scope: $scope });

    DiaryService.GetDiaryEntry($routeParams.id).success(function (data) {
        $scope.diaryEntry = data;
    });
}]);

View more solutions

84,802

vladexologija

ENTREPRENEURIAL start-up focused TECH LEAD

Updated on March 20, 2020

Comments

vladexologija about 4 years

I have three controllers that are quite similar. I want to have a controller which these three extend and share its functions.
vladexologija almost 11 years

Thanks, but I have 4 functions that already use services (save, delete, etc..) and same exist in all three controllers. If extending is not an option, is there a possibility for a 'mixin' ?
vladexologija almost 11 years

Also there are variables that I also don't want to define three times.
Bart almost 11 years

Don't mix. You could create another service that handles those service methods (save, delete, ...). The more application logic you can move out of your controller the better.
vladexologija almost 11 years

Share same variables and functions across controllers that do similar things(one is for editing, another creating etc...). This is definitely one of the solutions...
ganaraj almost 11 years

@vladexologija I agree with Bart here. I think services are mixin's. You should attempt to move as much of the logic out of the controller as possible ( into services ). So if you have 3 controllers that need to do similiar tasks then a service seems to be the right approach to take. Extending controllers doesnt feel natural in Angular.
vladexologija almost 11 years

Ok, I can put functions in a service, no problem. What about variables, scope sharing etc..
ganaraj almost 11 years

@vladexologija Can you post an example of a scenario?
vladexologija almost 11 years

@ganaraj nothing special to post. I just have variables that are used both in views and controllers and will be used in new service. I was wandering what's the best way for sharing, rootScope?
Bart almost 11 years

@vladexologija Here's an example of what I mean: jsfiddle.net/ERGU3 It's very basic but you'll get the idea.
vladexologija almost 11 years

Thanks! What do you suggest if my functions use lot of $scope reference in them and this scope isn't available in the service?
Bart almost 11 years

You give me the impression that you are coupling the controller too tightly into your service. If you wan't a real answer you will have to provide some example code to illustrate your problem.
Bart almost 11 years

@vladexologija If you have a lot of variables to (re)set on $scope you can create a helper. It can do some dedicated tasks that don't fit well inside a service or are needed in more then one location. See jsfiddle.net/mFhge/1
TaylorMac over 10 years

Yup. No need to extend, just invoke with the context
M K about 10 years

By far the quickest, cleanest, and easiest solution for this! Thanks!
snez almost 10 years

$scope inheritance is by far the best way to do it, much better than the accepted answer.
Kamil Lach almost 10 years

perfect, awesome solution !
tomraithel over 9 years

I think you don´t need that $.extend(), you can simply call $controller('CtrlImpl', {$scope: $scope});
schellmax over 9 years

@tomraithel not using angular.extend (or $.extend) actually means extending the $scope only, but if your base controller also defines some properties (e.g. this.myVar=5), you only have access to this.myVar in the extending controller when using angular.extend
mwarren over 9 years

In the end this seemed the most angular way to go. I have three very brief parentControllers on three different pages which just set a $scope value which the childController can pick up. The childController, which I originally thought about extending, contains all the controller logic.
mwarren over 9 years

Presumably if your extended controller has a lot of arguments, you will have to repeat all the arguments in the extending controller method signature, which in the end seemed a bit complicated to me.
Michael Trouw almost 9 years

I have been wanting to reduce the complexity of my controllers by having them 'inherit' shared functionality, I had no idea this was so easy to do. AngularJS is great! Using this for Ionic apps is also great, as you can add shared behaviour like hiding/showing common things, $Ionicloading for example.
ewahner over 8 years

Bart is absolutely correct. If you find yourself needing to extend a controller, then most likely you have a design issue. If you have 3 controllers all interacting with common elements then if it is via the UI, you need more of a child view implementation. If they are exchanging data then you should really be doing that from a service that can be shared. Controllers should not be tightly coupled to other controllers and they should not be tightly coupled to Services as well. You want the smallest testable components.
a better oliver over 8 years

The answer is pretty useless without any arguments and further explanation. I also think that you somewhat miss the OP's point. There already is a shared service. The only thing you do is to directly expose that service. I don't know if that's a good idea. Your approach also fails if access to the scope is needed. But following your reasoning I would explicitly expose the scope as a property of the scope to the view so that it can be passed as an argument.
tobylaroni over 8 years

A classic example would be when you have two form-driven reports on your site, each of which depend on a lot of the same data, and each of which use a lot of shared services. You could theoretically try and put all of your separate services into one big service with dozens of AJAX calls, and then have public methods like 'getEverythingINeedForReport1' and 'getEverythingINeedForReport2', and set it all to one mammoth scope object, but then you're really putting what is essentially controller logic into your service. Extending controllers absolutely has a use case in some circumstances.
ya_dimon almost 8 years

here is a problem with delayed initialization of simpleController. E.g. you have a promise, that sets some property later. The property will be set to simpleController, after extend (because initialization is run). So its probably easier to create simpleController instance, extend it with new properties, then return it.
Aakash over 7 years

wouldn't $scope.$parent.fx( ) be a much cleaner way to do it, since that is where it is actually defined?
Justin Kruse almost 7 years

This is great! Just make sure to remember to extend all needed functions, i.e. I had something like: handleSubmitClick which would call handleLogin which in turn had a loginSuccess and loginFail. So, in my extended controller I then had to overload the handleSubmitClick, handleLogin, and loginSucess for the correct loginSuccess function to be used.
Petr Averyanov almost 7 years

Not something you can do in comfortable way.
Eli Albért over 6 years

This worked extremely well for me. It has the advantage of easy refactoring from a situation where you started with one controller, created another very similar one, and then wanted to make the code DRYer. You don't need to change the code, just pull it out and be done.