Sharing Top Content from the Angular-sphere.

Using Controller-as-a syntax and why it’s important

  • Now would be a good time to understand of how “controller as a syntax” works, so that when the changes comes around you will be ready.
  • Typically you would define your controller as such:

    To use the new syntax, you would remove scope and define the controller in this fashion:

    and the way you declare your controller in the view would be :

    This helps in cleaning up the code, now we done have floating variables such as {{company}}, we know the variable company is defined in MainCtrl.

  • Take for instance this situation where we have three different nested controller :

    and now take a look at this same code, but done using controller as a syntax:

    Reading this makes it much more easier to understand what the developer was trying to do, and this is how controller as a syntax helps.

  • In Conclusion, the reason you should use “controller as a syntax” is so that you can make your code more efficient, maintainable, and readable.
  • Also, the fact that the current way of using $scope in your controller won’t exist by the time AngularJS 2.0 rolls aournd.

Gartner has predicted that worldwide information security spending will witness a growth of 7% in 2017, with the total amount spent reaching close to $93 billion in 2018. This in…

@thedigtalgroup: How to use the ‘Controller as a’ syntax in #AngularJS? Find answers in this T/DG #blog …

What is “controller as a” syntax ?

It’s a new way of defining your controller.  Instead of using $scope, we can use the ‘this‘ in its place.This helps with the architecture of the controller, having a clearer scoping and smarter controllers. This change specifically came about after the 1.2 release of AngularJS.

Why should I start using Controller as a syntax ?

AngularJS 2.0 is being talked about quite a bit.  One of the important discussion with AngluarJS 2.0 is how it will be quite different from the current version.

One of the major changes will be removing $scope.  The concept of scope will still remain, but it will be bounded to directives.  Now would be a good time to understand of how “controller as a syntax” works, so that when the changes comes around you will be ready.

How to do I use this syntax ?

Typically you would define your controller as such:

app.controller(‘MainCtrl’, function ($scope) { $scope.companyName = ‘The Digital Group’; });

To use the new syntax, you would remove scope and define the controller in this fashion:

app.controller(‘MainCtrl’, function () { var vm = this; vm.companyName = ‘The Digital Group’; });

and the way you declare your controller in the view would be :

This helps in cleaning up the code, now we done have floating variables such as {{company}}, we know the variable company is defined in MainCtrl.

Lets take another example where we have multiple controllers. Take for instance this situation where we have three different nested controller :

{{ company }}

Scope company: {{ company }} Parent company: {{ $parent.company }}

{{ company }} Parent company: {{ $parent.company }} Parent parent company: {{ $parent.$parent.company }}

and now take a look at this same code, but done using controller as a syntax:

{{ main.company }}

Scope company: {{ some.company }} Parent company: {{ main.company }}

Scope company: {{ someOther.company }} Parent company: {{ some.company }} Parent parent company: {{ main.company }}

Reading this makes it much more easier to understand what the developer was trying to do, and this is how controller as a syntax helps.

In Conclusion, the reason you should use “controller as a syntax” is so that you can make your code more efficient, maintainable, and readable.  Also, the fact that the current way of using $scope in your controller won’t exist by the time AngularJS 2.0 rolls aournd.

Using Controller-as-a syntax and why it’s important

Comments are closed, but trackbacks and pingbacks are open.