0

see the code

<div ng-app="myApp" ng-controller="ctrlCarLists as cars">
<button ng-click="cars.showCars()">
Cars
</button>

<button ng-click="alert(cars.data)">
Test
</button>
</div>


var app = angular.module('myApp', []);
app.controller("ctrlCarLists", function () {

this.data = 'hello';
this.showCars = function () {
    alert("Ford, Toyata, Mercedes");
    };
});

i am new in angular so not being able to understand when people do not like to have $scope in controller. so please tell me or show me few scenario with example when people create controller without scope.

what is the meaning of this ctrlCarLists as cars ?

many people may say by this code ctrlCarLists as cars we are creating instance of controller to access property of controller but when we use $scope then controller instance is created too.

please help me to understand..

thanks

Mou
  • 15,673
  • 43
  • 156
  • 275
  • 1
    Possible duplicate of [AngularJs "controller as" syntax - clarification?](http://stackoverflow.com/questions/21287794/angularjs-controller-as-syntax-clarification) – JLRishe Apr 05 '16 at 14:09
  • why we should use this short hand ? when we work with $scope then this kind of short hand is not required why ? – Mou Apr 05 '16 at 14:09

2 Answers2

3

This is known as the 'controller as' pattern. For more info, check this and this link.

Community
  • 1
  • 1
fikkatra
  • 5,605
  • 4
  • 40
  • 66
  • can u tell me with example and code that in what kind of scenario people would think to avoid to work with $scope. – Mou Apr 05 '16 at 15:17
  • what would be the advantage if we avoid working with $scope in ng? – Mou Apr 05 '16 at 15:18
  • 1
    A lot of people like to use the controller-as pattern because you don't have to explicitly add functions and variables to the scope. You just have to add them to the controller using the 'this' keyword, which makes for cleaner an more readable code. In addition, it allows you to easily track where you explicitly use $scope, e.g. when using things like $watch, because these things are usually a code smell. – fikkatra Apr 05 '16 at 17:12
2

You can refer the this to a variable, just see the following code

var app = angular.module('myApp', []);
  app.controller("ctrlCarLists", function () {
  var self = this;

 self.data = 'hello';
 self.showCars = function () {
   alert("Ford, Toyata, Mercedes");
  };
});

and change your html to this 

<div ng-app="myApp">
<div  ng-controller="ctrlCarLists as cars">
<button ng-click="cars.showCars()">
Cars
</button>
</div>
</div>

'this' will an object in side the controller. you can see the data by write {{cars.data}}

in your example
self.showCars is a function smiler to $scope.showCars ,$scope.showCars smiler to $scope.data a variable can access in the controller.

Mohamed Nizar
  • 780
  • 9
  • 30
  • tell me what is meaning of this line `ctrlCarLists as cars` when we work with $scope then we never has to write code like this `ctrlCarLists as cars` – Mou Apr 05 '16 at 14:43
  • we use $scope some thing like global variable , if you use $scope you have to define the model on the controller before use in side any functions. – Mohamed Nizar Apr 05 '16 at 14:49
  • nizar you said "if you use $scope you have to define the model on the controller before use" not very clear. would u explain more on it with example code what u try to say. – Mou Apr 05 '16 at 14:51
  • we use $scope some thing like global variable , if you use $scope you have to define the model on the controller before use in side any functions. We can't avoid $scope at all, some time we need it. In your example you refer this.data = "", but if you using inside a function the variable data you don't need to initiate the variable before use. But when we use $scope you cant do this, you will get an error the variable not defined. – Mohamed Nizar Apr 05 '16 at 14:56