Skip to content

Modus-Logo-Long-BlackCreated with Sketch.

  • Services
  • Work
  • Blog
  • Resources

    OUR RESOURCES

    Innovation Podcast

    Explore transformative innovation with industry leaders.

    Guides & Playbooks

    Implement leading digital innovation with our strategic guides.

    Practical guide to building an effective AI strategy
  • Who we are

    Our story

    Learn about our values, vision, and commitment to client success.

    Open Source

    Discover how we contribute to and benefit from the global open source ecosystem.

    Careers

    Join our dynamic team and shape the future of digital transformation.

    How we built our unique culture
  • Let's talk
  • EN
  • FR

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.


NEW RESEARCH: LEARN HOW DECISION-MAKERS ARE PRIORITIZING DIGITAL INITIATIVES IN 2024.

Get Report


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.

Posted in Application Development
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…

Want more insights to fuel your innovation efforts?

Sign up to receive our monthly newsletter and exclusive content about digital transformation and product development.

What we do

Our services
AI and data
Product development
Design and UX
IT modernization
Platform and MLOps
Developer experience
Security

Our partners
Atlassian
AWS
GitHub
Other partners

Who we are

Our story
Careers
Open source

Our work

Our case studies

Our resources

Blog
Innovation podcast
Guides & playbooks

Connect with us

Get monthly insights on AI adoption

© 2025 Modus Create, LLC

Privacy PolicySitemap
Scroll To Top
  • Services
  • Work
  • Blog
  • Resources
    • Innovation Podcast
    • Guides & Playbooks
  • Who we are
    • Careers
  • Let’s talk
  • EN
  • FR