After reading various sources, including a few discussions on Stack Overflow, I have come to understand that the ControllerAs syntax is gaining popularity as it aligns with how things are done in Angular 2.
Therefore, I decided to delve deeper into understanding how the syntax with vm. works.
Regardless of personal opinions on this approach, I am interested in pointers on why this method may not be effective,
//controllerAs with vm. syntax
var app = angular.module('myApp', []);
app.controller('MyCtrl', function () {
var vm = this;
vm.like = likeIt;
vm.dislike = dislikeIt;
vm.flag = flagIt;
function likeIt() {
alert('liked');
},
function dislikeIt() {
alert('disliked');
},
function flagIt() {
alert('flagged');
}
});
compared to using $scope as shown below:
var app = angular.module('myApp', []);
app.controller('MyCtrl', function ($scope) {
$scope.like = function () {
alert('liked');
};
$scope.dislike = function () {
alert('disliked');
};
$scope.flag = function () {
alert('flagged');
}
});
HTML
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MyCtrl as vm">
<button ng-click="vm.like()">Like</button>
<button ng-click="vm.dislike()">Dislike</button>
<button ng-click="vm.flag()">Flag</button>
</body>
</html>