The var keyword is pure javascript, and that is how you declare variables in javascript. For instance:
var myName = 'Nikolaj'; var myAge = 1700;
If you are new to var , you should start by exploring Javascript before entering Angular, as the Angular learning curve can be pretty steep.
Having said that, I will try to explain other concepts.
Using controllerAs
Using the recommended controllerAs syntax, you get a reference to the controller instance in your template. This happens when you use <div ng-controller="myController as ctrl"></div> ;
Your controller is basically “updated” and stored in a variable called ctrl , which is provided in the angular template. This allows you to access your controller members (public functions and variables) in the template as follows:
<div ng-controller="myController as ctrl"> <p>{{ctrl.name}}</p> </div>
For the variable name be available in the template, it must first be declared as an open member / variable of your controller. This is where this -keyword comes in. When you create your controller to make the name variable public, you would do it like this:
angular.module('app').controller('myController', function(){ this.name = 'My name variable'; });
Here, this is a special concept in Javascript that refers to a function context, but only to basic Javascript.
Using $ scope
When you instead use your controller as follows: <div ng-controller="myController"></div> you do not have direct access to the controller instance in your template. Instead, every time you use something in an Angular expression, such as {{name}} , Angular implies that the name variable exists in the $ scope variable. Each controller has a $ scope variable associated with it when it is associated with a template. To access this variable inside your controller body, you will access it as follows:
angular.module('app').controller('myController', function($scope){ $scope.name = 'My name variable'; });
The reason the controllerAs syntax is recommended is partly because when using $ scope, it can be difficult to determine which area you are accessing when you have multiple nested areas (i.e. nested controller). Like in this example:
<div ng-controller="FirstController"> <h1>{{firstControllerVariable}}</h1> <div ng-controller="SecondController"> <h2>{{whereDoIBelong}}</h2> </div> </div>
With the syntax of controllerAs, it is pretty clear which variable belongs to that controller:
<div ng-controller="FirstController as first"> <h1>{{first.firstControllerVariable}}</h1> <div ng-controller="SecondController as second"> <h2>{{second.iKnowWhereIBelong}}</h2> </div> </div>
Another reason for using controllerAs syntax is to make it easier to upgrade to ES2016 and higher.