AngularJS – Why use “Controller as vm”?

by

One advantage of using the controller as syntax is that it allows you to define your controllers as a simple javascript constructor function with properties and functions exposed directly from the instantiated object rather than the $scope.

For example:

function MyController() {

    var ctl = this;

    ctl.message="You have not clicked anything yet.";

    ctl.onClick = function() {
        ctl.message="You clicked something.";
    };

    return ctl;
}

...

myModule.controller('MyController', MyController);

...

<div ng-controller="MyController as vm">
    <span>{{vm.message}}</span>
    <button ng-click="vm.onClick()">Click Me</button>
</div>

Notice that we are able to use a controller that is plain old javascript without even being tied to angular. For scenarios where you need additional dependencies such as $scope or other services, you can still easily pass them in to your constructor, but this pattern encourages less clutter directly on your $scope and also solves the problem of variable hiding when variables are set directly on the scope.

Ultimately it really comes down to a matter of preference, but for me I really like not having to define everything directly on the scope and to treat my controllers as any old javascript object as much as possible.

Here’s an excellent article on the usage of controller as:
http://www.johnpapa.net/angularjss-controller-as-and-the-vm-variable/

More Related Contents:

  1. How to use a filter in a controller?
  2. CORS with spring-boot and angularjs not working
  3. Use of ng-src vs src
  4. Should I use `this` or `$scope`?
  5. How to format a date using ng-model?
  6. How can I define my controller using TypeScript?
  7. Descending order by date filter in AngularJs
  8. How to write a debounce service in AngularJS
  9. $provide outside config blocks
  10. Angularjs wrong $index after orderBy
  11. Call a method of a controller from another controller using ‘scope’ in AngularJS
  12. How to read binary data in AngularJS in an ArrayBuffer?
  13. Adding http headers to window.location.href in Angular app
  14. How do I sequentially chain promises with angularjs $q?
  15. Mongo Giving ‘duplicate key error’ on non-unique fields
  16. Using ng-repeat to generate select options (with Demo)
  17. What are the differences between ng-repeat and ng-options and why do they not behave the same way?
  18. How do I increase modal width in Angular UI Bootstrap?
  19. Angularjs ng-options using number for model does not select initial value
  20. How do I enable Webstorm intellisense for AngularJS when writing CoffeeScript
  21. Why form undefined inside ng-include when checking $pristine or $setDirty()?
  22. Npm start issues in AngularJS phonecat application
  23. How to use owl-carousel in Angular2?
  24. angularjs getting previous route path
  25. React dependency injection or similar?
  26. Create a simple Bootstrap Yes/No confirmation or just notification alert in AngularJS
  27. How to share data between two modules in AngularJS?
  28. AngularJS ng-model-options getter-setter
  29. When to use double braces {{}} in angularJS
  30. Angular reload current route and reload the current template

Leave a Comment