Skip to content
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
September 11, 2014

AngularJS: Tricks with angular.extend()

Angular

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

AngularJS: Tricks with 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.

Posted in Angular
Share this

Mike Schwartz

Mike Schwartz is a Solutions Architect at Modus Create. He is the designer of DecafJS and other JavaScript frameworks, such as SilkJS, a command shell belt on top of Google's V8 JavaScript engine and optimized for server-side applications. Mike has a deep history in developing games and web applications.
Follow

Related Posts

  • Rapid Prototyping with AngularJS
    Rapid Prototyping with AngularJS

    Building great web applications is challenging and all great web applications start with a proof…

  • Three issues with AngularJS
    Three issues with AngularJS

    AngularJS is all the rage these days, and for good reason. It’s a lightweight and…

Subscribe to the Modus Newsletter

Receive the latest blog articles and insights every month from the Modus team.

Let's Chat

If forms aren’t your thing, you can always call us (+1-855-721-7223).

Modus-Logo-Primary-White.svg
  • Services
  • About
    • Newsroom
  • Partners
  • Work
  • Insights
    • Blog
    • Modus Labs
  • Careers
Virginia (US)

12100 Sunset Hills Road
Suite 150
Reston, Virginia, 20190
Tel: +1-855-721-7223

California (US)
12130 Millennium Dr

Los Angeles, CA 90094

Missouri (US)
609 E High St

Jefferson City, MO 65101

Romania

Str. Mihai Veliciu, no. 17
Cluj-Napoca, Romania
Tel: +40-0786-887-444

Costa Rica

2nd Floor, Plaza Koros, Av 3
San José, Santa Ana, Costa Rica

© 2021 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

This website uses cookies.
These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

Scroll To Top