Hi rani,
The syntax Controller as tells AngularJS to instantiate the controller and save it in a variable in the current scope.
There migth be nested controllers and when reading the html it is pretty clear where every property comes.
For this you can avoid some of the dot rule problems.
For example you have two controllers both with the same name Greetings then in that case conflict occure.
HTML
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller("ParentController", function ($scope) {
this.Greetings = "Welcome to ASPSnippets.com";
});
app.controller("ChildController", function ($scope) {
this.Greetings = "Welcome to ASPForums.net";
});
</script>
<div ng-app="MyApp" ng-controller="ParentController">
<h4>{{Greetings}}</h4>
<div ng-controller="ChildController">
<h4>{{Greetings}}</h4>
</div>
</div>
To avoid this problem use Controller as syntax.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller("ParentController", function ($scope) {
this.Greetings = "Welcome to ASPSnippets.com";
});
app.controller("ChildController", function ($scope) {
this.Greetings = "Welcome to ASPForums.net";
});
</script>
<div ng-app="MyApp" ng-controller="ParentController as parent">
<h4>
{{parent.Greetings}}</h4>
<div ng-controller="ChildController as child">
<h4>
{{child.Greetings}}</h4>
</div>
</div>
Demo
