Quick tip: Set the default controllerAs to vm for .component() in Angular 1.5+

Alex Peattie

/

15 Feb, 2016

1 minute read

/ comments

One of the most exciting features in the newly released Angular 1.5 is the new .component() helper method (see Todd Motto’s excellent, detailed write-up for a full walkthrough). It’s now considered best practice to use controllerAs - a best practice which .component() enofrces. If you don’t provide a value for controllerAs it will default to $ctrl.

Why $ctrl? You can see the original (well-reasoned) discussion on Github. However, John Papa recommends using vm (short for view-model) and if you’re like me, you’ll find yourself doing this a lot:

.component('myCoolComponent', {
  controllerAs: 'vm',
  bindings: { ... }
})

Luckily it’s quite easy to override the .component() helper in your application, to default to something other than $ctrl. You’ll want to do this at the point you’re defining your application’s module:

angular.module('myApp', ['ngAnimate', 'ngTouch'])

Becomes:

var app = angular.module('myApp', ['ngAnimate', 'ngTouch'])

var _component = app.component
app.component = function (name, options) {
  return _component(name, angular.extend({ controllerAs: 'vm' }, options))
}

Pretty straightforward - we save the original .component() helper method to a variable, then replace it with a modified method that call the original, but firsts calls angular.extend on our options object to set our preferred controllerAs default.

This modified method will only apply to any components defined for our app’s module - any 3rd party plugins shouldn’t be affected. You can see a Plunkr demonstrating this here.

If you found this helpful, or if you have a neater way to do this, let me know in the comments 😊.