2

I'm new to UI. I do have confusion between $scope's in AngularJS. Please refer below snippet. 

var mainApp = angular.module("mainApp", []);

mainApp.controller(['$scope', function($scope) {

    $scope.name = "John";

}]);

So, what's the difference between $scope and function($scope)? Also how can we relate both? Is it required to have $scope parameter? Please explain me with an example. I really appreciate that.

Thanks, John

lealceldeiro
  • 14,342
  • 6
  • 49
  • 80
John
  • 21
  • 1

2 Answers2

1

1.When you apply Minification of Following Angular JS code:

var mainApp = angular.module("mainApp", []);
mainApp.controller(['$scope','$log', function($scope,$log) {
$scope.name = "John";
$log.log("John");
}]);

Minified Version :

var mainApp=angular.module("mainApp",
[]);mainApp.controller(["$scope","$log",function(n,o)
{n.name="John",o.log("John")}]);

2.When you apply Minification of Following Angular JS code:

var mainApp = angular.module("mainApp", []);
mainApp.controller(function($scope,$log) {
$scope.name = "John";
$log.log("John");
});

Minified Version :

var mainApp=angular.module("mainApp",[]);mainApp.controller(function(n,a)
{n.name="John",a.log("John")});

3.When you apply Minification of Following Angular JS code:

var mainApp = angular.module("mainApp", []);
mainApp.controller(function($log,$scope) {
$scope.name = "John";
$log.log("John");
});

Minified Version :

var mainApp=angular.module("mainApp",[]);mainApp.controller(function(n,a)
{n.name="John",a.log("John")});

You will Notice in Ex-2 and Ex-3 that you have interchanged the Dependency place of $scope and $log then also your minified version is the same ,this will give you dependency Injection error ,so we place a String value as String Value can't be minified as you can see in Ex-1.

It is not required to have $scope each time you define your controller but $scope provides important functionality like binding the HTML (view) and the JavaScript (controller). . https://docs.angularjs.org/guide/scope

prabhat mishra
  • 202
  • 2
  • 14
0

what's the difference between $scope and function($scope)?

When you do

  mainApp
  .controller(
    ['$scope', //line 1
      function($scope) //line 2
      {
      }
    ]);
  • In line 1 it refers to $scope, which is an object that refers to the application model
  • In line 2 it is the variable (conveniently called $scope too) in which the (mentioned above) $scope object is injected. This variable can have any other name, $scope is used as a way to keep a suggestive reference through the whole code.

For instance, your example would work too if I change its name to myFunnyScope like this:

var mainApp = angular.module("mainApp", []);

mainApp.controller(['$scope', function(myFunnyScope) {
    myFunnyScope.name = "John";
}]);

Also how can we relate both?

Taking as reference my previously posted snippet, you can tell the $scope object is being injected in the myFunnyScope variable, it means you use myFunnyScope as if it were $scope itself.

Is it required to have $scope parameter?

As long as you need to get access to all benefits provided by the mentioned $scope object, when you do minification it is required to inject the object ([$scope, ...) into the holder (function($scope) { ...) in order to not get the AngularJS application broken. Otherwise, no, you don't need to inject the object, but then you have to explicitly call it $scope in the function parameter so AngularJS knows it has to inject the $scope object inside it. This rule applies not only to $scope, but to all other AngularJS related services, factories, etc such as $timeout, $window$, $location, etc.

You might want to read about the AngularJS injection mechanism and consider using the controller as syntax for reasons explained here if you do not want to use $scope directly.

lealceldeiro
  • 14,342
  • 6
  • 49
  • 80