AngularJS: Tricks with angular.extend()

AngularJS has this built-in method for doing object to object copies called angular.extend(). It is a very powerful function that has many uses.

The documentation can be found here:

https://docs.angularjs.org/api/ng/function/angular.extend

Let’s consider a mythical ThingController that looks like this using traditional AngularJS code:

app.controller(‘ThingController’, [ ‘$scope’, function($scope) {
   $scope.thingOne = ‘one’;
   $scope.thingTwo = ‘two’;
   $scope.getThings = function() { 
       return $scope.thingOne + ‘ ‘ + $scope.thingTwo; 
   };
}]);

Lots of assignment to $scope to create member variables (models) and methods. This is how it would look if we used angular.extend():

app.controller(‘ThingController’, [ ‘$scope’, function($scope) {
    angular.extend($scope, {
        thingOne: ‘one’,
        thingTwo: ‘two’,
        getThings: function() { 
            return $scope.thingOne + ‘ ‘ + $scope.thingTwo; 
        }
    });
}]);

Using angular.extend() seems like a cleaner way to express all these assignments to $scope. The only nit I have with this is that models and methods are mixed in some arbitrary order. We could clean it up with code looking something like this:

app.controller(‘ThingController’, [ ‘$scope’, function($scope) {
    // models
    angular.extend($scope, {
        thingOne: ‘one’,
        thingTwo: ‘two’
    });

    // methods
    angular.extend($scope, {
      // in HTML template, something like {{ getThings() }}
       getThings: function() { 
            return $scope.thingOne + ‘ ‘ + $scope.thingTwo; 
        }
    });
}]);

What if we don’t want application code to be able to store directly to thingOne and thingTwo unless the values are valid? We can implement getters and setters for these and use private variables to hold the valid values:

app.controller(‘ThingController’, [ ‘$scope’, function($scope) {
    // private
    var _thingOne = ‘one’,
        _thingTwo = ‘two’;

    // models
    angular.extend($scope, {
        get thingOne() {
        return _thingOne;
        },
        set thingOne(value) {
           if (value !== ‘one’ && value !== ‘two’) {
             throw new Error(‘Invalid value (‘+value+‘) for thingOne’);
        },
        get thingTwo() {
        return _thingTwo;
        },
        set thingTwo(value) {
           if (value !== ‘two’ && value !== ‘three’) {
             throw new Error(‘Invalid value (‘+value+‘) for thingTwo’);
        }
   });

    // methods
    angular.extend($scope, {
       // in HTML template, something like {{ things }}
       get things() { 
            return _thingOne + ‘ ‘ + _thingTwo; 
        }
    });
}]);

We can also use angular.extend() to implement mixins. Consider this contrived logging class:

var debug = true,
    Logger = {
        print: function(s) {
            return debug ? s : ‘’ 
       }
    };

We can “mixin” this Logger class to our $scope in multiple controllers using angular.extend().

app.controller(‘ControllerOne’, [ ‘$scope’, function($scope) {
    // mixin $scope
    angular.extend($scope, Logger);
    // define our $scope
    angular.extend($scope, {
        myVar: 1,
        log: function() { this.print(this.myVar); }
    });
}]);

app.controller(‘ControllerTwo’, [ ‘$scope’, function($scope) {
    // mixin $scope
    angular.extend($scope, Logger);
    // define our $scope
    angular.extend($scope, {
        myVar: 2,
        log: function() { this.print(this.myVar); }
    });
}]);

In a view controlled by ControllerOne, {{ log() }} will render “1” into the DOM (the value of myVar). In a view controlled by ControllerTwo, {{ log() }} will render “2” into the DOM. We only had to define the mixin once and were able to use it twice. We could use it as many times as we want, obviously. If we change the debug variable to false, none of the values will be inserted into the DOM at all.

One caveat to all this. As I write this, the implementation of angular.extend(), jquery.extend(), and jqlite.extend() are all broken. They do not copy getter and setter methods. There is this bug report filed for AngularJS now: https://github.com/angular/angular.js/issues/8573.