2

First of all, I apologize for the long and incredibly confusing title, but I was told that it is not polite to post questions with clickbait-y titles like "what's the difference between these two approaches", even though that would've been more appropriate in this case.

Anyhow, I was studying Angular and realized that there are two ways of creating variables:

  1. The first one of them is by passing $scope as a parameter to the controller function, and make $scope.variable = 5, for example. Like this:

angular.module("ex").controller("ExCtrl", function($scope){ $scope.variable = 5; });

And, in the HTML page, just make:

<div ng-controller="ExCtrl">{{variable}}</div>
  1. You can also make the variable local to the controller, like this:

angular.module("ex").controller("ExCtrl", function($scope){ var self = this; self.variable = 5; });

And, in the HTML page, just make:

<div ng-controller="ExCtrl as exc">{{exc.variable}}</div>

My question is: what are the key differences between these approaches? I suppose the place where the variable is stored is different between the two, with it being local to the scope in the first and being local to the controller in the second. Is that right? If it is, is there any other difference? Why would someone favor one over the other? And if it is not right, what are the differences then?

Thank you in advance.

ogabrielp
  • 89
  • 7
  • key points from my answer on the duplicate: `$scope` is a service that manages the watchers in HTML and matches them to JavaScript variables. Attaching a property to `$scope` is equivalent to creating a watcher. Using `Controller As` attaches the controller function as a property on `$scope` in the background, meaning you don't have to inject `$scope` into your controller or access it directly for this purpose (though you may need to use it for things like `$broadcast`). – Claies Mar 13 '17 at 15:25
  • effectively, `ExControl as exc` is equivalent to doing `$scope.exc = this;` in your controller. – Claies Mar 13 '17 at 15:27

1 Answers1

1

As the commenters have pointed out, the main difference is controller vs. controller as.

However, there's another, more subtle difference when you use $scope. $scope is injected into your controller, which means that the decision as to what you get in that variable is left to something higher up in the chain. You could be getting an ng-view $scope, an isolate $scope, an inherited $scope, or a $scope that is actually the very same object being used by a parent.

This means that $scope can come to you with its own properties and methods, and, in the shared $scope instance, you can add properties and methods that could be picked up by a parent. I personally think it's very good from an architectural POV to have the flexibility that DI offers to be able to change how a controller is used without changing the controller itself. It's a shame $scope isn't really well-appreciated (to the point it's gone in Angular 2).

I think maybe the reason it isn't appreciated as much as it could be is it's open to abuse (especially in the shared case) if you just use it thoughtlessly and willy-nilly. But that's pretty much the case with the entirety of JavaScript, so I don't see any reason to throw out the baby with the bathwater.

Amy Blankenship
  • 6,485
  • 2
  • 22
  • 45