While reading through the angularJS api, I came across some code that looked like this:
myApp.controller('MyController', ['$scope', function($scope) {
var vm = $scope.vm = {name:'savo'};
}
]);
Initially, this multiple assignment seemed simple enough to understand. However, things got more complex when I tried coding something like this:
myApp.controller('MyController', ['$scope', function($scope) {
var vm = $scope.vm = {name:'savo'};
vm.age = 18;
}
]);
Accompanied by HTML similar to the following:
<div ng-controller="MyController">
<pre>{{vm}}</pre>
<pre>{{vm.name}}</pre>
<pre>{{vm.age}}</pre>
</div>
Upon viewing the results in my browser, I noticed that the vm object in the $scope also reflected the added attribute age.
This brought up a question for me:
Why does adding an attribute to vm within the controller affect the vm object in the $scope as well?
In regular JavaScript, this behavior wouldn't be expected. Renaming either of the vm variables doesn't alter anything.
As someone new to angularJS, this aspect is quite perplexing for me. Any insights or assistance would be greatly appreciated!
Lastly, I'm curious about the choice of naming conventions in angularJS, particularly the use of vm. Could it possibly stand for an abbreviation of some sort?