0

I recently started to work with AngularJS and got the hang of the basics for it, but in the examples I've seen around, I came to find two different approaches in them.

Making the variables and functions private:

function myController(){
  var controller = this;
  controller.myVar = 0;
  controller.myFunction = function(){...};
}

And making them public through the $scope:

function myController(){
  $scope.myVar = myVar;
  $scope.myFunction = function(){...}
}

I can understand the need to make something private, but to expose variables and functions as public doesn't add up to me since it feel like the Single Responsability Principle is broken in those instances.

Is there a good reason to make something public like that? Are there alternatives to making something public? Or am I worrying too much?

Uriel Arvizu
  • 1,876
  • 6
  • 37
  • 97
  • When you want to use the 2-way data binding use `$scope`. i.e. when you don't want to explicitly read/update DOM. – Tushar Apr 25 '16 at 14:00
  • Best information found here http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers – Joe Withey Apr 25 '16 at 14:16

2 Answers2

1

$scope is the older way of doing things in Angular. The new way is to use the controllerAs syntax -- which is when you bind the value of this to a variable.

They both work, but the newer controllerAs way of doing things was introduced for a number of reasons -- chief of which being because it was closer to what they were expecting the Angular 2 way of being. Further, the controller as way of doing things, allows people to have nested code scope in a view and have a better understanding of where the interpolated values are coming from. For example:

<div ng-controller="controller1">
   {{someVal}}
   <div ng-controller="controller2">{{anotherVal}}</div>
</div>

Since scope is inherited in Angular, it is difficult to tell whether the value for anotherVal is coming from controller1 or controller2. When using the controllerAs syntax, it clears that up a bit by being able to do something like this:

<div ng-controller="controller1 as ctrl1">
    {{ctrl1.someVal}}
   <div ng-controller="controller2 as ctrl2">
       {{ctrl2.anotherVal}}
   </div>
</div>

Now, it becomes obvious where those values are coming from.

However, to answer your question directly, you may still need to use the $scope object when you hope to access certain angular lifecycle hooks such as $scope.$watch, $scope.apply, etc.

I believe the main reason to make things public like that is for the purposes of testing and to let Angular "know" about certain data changes so it can have any "listening" views react and update to such changes.

Pytth
  • 4,008
  • 24
  • 29
  • in case I don't want to expose an element as public, what are my alternatives to this approach? Also to refer to this as the "old way" kinda bugs me, is there an appropiate way to call it? – Uriel Arvizu Apr 25 '16 at 19:42
  • If you do not want to publicly expose something, simply do not attach it to `$scope` or `this` and follow normal javascript scoping rules after that. Other than that, you can look into creating directive isolate scopes to more finely tune "who gets what" in your application. EDIT: The closest thing I could see to not referring to it as the "old way" would be to say "bound directly to the injected scope object." Kind of a mouth full. https://docs.angularjs.org/guide/directive – Pytth Apr 25 '16 at 19:51
  • I didn't work out my comment correctly, what I meant, if I need to make something accesible between controllers but don't want to use $scope to expose it, what alternatives do I have? – Uriel Arvizu Apr 26 '16 at 14:28
  • You could store the info/values you want in a service/factory and use that to communicate between controllers. – Pytth Apr 29 '16 at 17:05
0

You use $scope only when you do data-bindings or when you want to pass data between controllers, otherwise you don't have to do that.

Beslinda N.
  • 4,808
  • 5
  • 27
  • 33