Inheriting angular controller objects

Question

I don't really understand how to inherit controller objects in angular (not using $scope), when we're surrounding them in a IIFE.

So assume we have 2 controller files:

Animal.js

(function() {
    'use strict';
    angular.module('myApp').controller('animalCtrl', function() {
        this.strength = 3;
        this.speed = 3;
});
})();

Beaver.js

(function() {
    'use strict';
    angular.module('myApp').controller('beaverCtrl', function() {
        //How do I inherit the parent controllers stats?
});
})();

How can I inherit from animalCtrl using my beaverCtrl?

possible duplicate of Can an AngularJS controller inherit from another contoller in the same module? — Shomz
– Shomz, Commented Nov 12, 2014 at 20:47

Rorschach120 · Accepted Answer · 2014-11-12 21:44:55Z

The best way to share data on any angularjs site is by using services. In this case I would create a factory that will store strength and speed and share it with beaverCtrl.

angular.module('<yourappname>', [])
  .factory('dataService', function() {
    $scope = this;

    $scope.strength = null;
    $scope.speed = null;

    $scope.setStrength = function(value) {
      $scope.strength = value;
    }

    $scope.setSpeed = function(value) {
      $scope.speed = value;
    }
    return $scope;
})

Then in the controllers you would call the service like this

.controller('animalCtrl', function(dataService) {
  this.strength = 3;
  this.speed = 3;

  dataService.setStrength(this.strength);
  dataService.setSpeed(this.speed);

});

.controller('beaverCtrl', function(dataService) {
  this.strength = dataService.strength;
  this.speed = dataService.speed;
});

Jeremy Elbourn · Accepted Answer · 2014-11-12 22:08:02Z

2

It's important to realize that an AngularJS controller is just a normal javascript "class". The only catch is invoking the base constructor with dependency injection.

// Create some base class.
BaseController = function($scope, $route) {
  // Do some stuff here.
};

// The base class has some behavior.
BaseController.prototype.someMethod = function() { /* do something */ };

// Create some child class.
ChildController = function($scope, $injector) {
  // Invoke the base constructor.
  $injector.invoke(this, BaseController, {$scope: $scope});
};

// Inherit from the base class.
ChildController.prototype = Object.create(BaseController.prototype);

// Add more specific behavior.
ChildController.prototype.someChildMethod = function() { /* do something */ };

Then you can register your controller as

angular.module('myApp').controller('ChildController', ChildController);

Keep in mind that using inheritance like this will be problematic if overused. It should only be used for sharing behavior. Additionally, using composition of different "classes" is generally going to be much more flexible than using inheritance.

From a code organization standpoint, I would also recommend that you declare your controllers in one place (one file per controller) and register them onto modules in another place (one file per module).

answered Nov 12, 2014 at 22:08

Jeremy Elbourn

2,7401 gold badge19 silver badges15 bronze badges

2 Comments

user1413969 Over a year ago

I'm a bit confused how you can call $injector.invoke(this, BaseController, {$scope: $scope}); If the controllers are in different files with an IIFE surrounding them, then the BaseController isn't visible to the ChildController. I guess this is more of a javascript issue than an angular one, but your response was helpful.

Jeremy Elbourn Over a year ago

I omitted the organization parts to keep the example simple. In a real application, you'd want to have some kind of load-time module system. Angular modules deal with run-time dependencies (i.e., configuring the dependency injector and html compiler).

Collectives™ on Stack Overflow

Inheriting angular controller objects

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related