AngularJs $scope parameter name

Question

I'm quite new to AngularJs. In initial chapters itself I see $scope being used, like inside a controller.

<script>
var app = angular.module('app1', []);
app.controller('ctrl1', function($scope) {
    $scope.fn = "John";
    $scope.ln = "Parker";
});
</script>

If I replace the function parameter $scope with $s or so, then the code doesn't work. Why is that?

I mean it looks like we are passing a callback function or so, then why does the parameter name matter?

Please help.

Thanks in advance
Balu

As $scope is an angular variable. you can't change it with another name. — Tammy
– Tammy, Commented Feb 7, 2018 at 6:15

Amir Popovich · Accepted Answer · 2018-02-07 06:12:50Z

1

You can rename the $scope, but you will need to add some string mapping (so angularjs will figure out how to inject the correct item). This feature is used mainly on minification:

var app = angular.module('app1', []);

app.controller('ctrl1', ['$scope', function($s) {
    $s.fn = "John";
    $s.ln = "Parker";
}]);

JSFIDDLE.

By the way, it's better to stop using $scope and start using the controlleras functionality. Read about it here.

var app = angular.module('app1', []);

app.controller('ctrl1', function() {
    this.fn = "John";
    this.ln = "Parker";
});

<div ng-app="app1" ng-controller="ctrl1 as vm">
   {{vm.fn}}
</div>

JSFIDDLE.

answered Feb 7, 2018 at 6:12

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Balu Over a year ago

This is something that I do not understand. Like I have some Java programming background. Over there, the parameter name doesn't matter at all when passed as callbacks. As I know, in Javascript also it is the same. So why do we need a mapping? I also had the same question for JQuery where $ is used as shortcut or so. So we have to use noConflict to change it. Someone gave a me a neat explaination, although I don't remember it completely now.

Amir Popovich Over a year ago

JavaScript is not a strongly typed framework and therefore, in order to achieve dependency injection, it will need you to pass strings as unique identifiers. In java, DI could be achieve via type mappings, attributes etc.

Balu Over a year ago

Thanks. I think I understand it now.

PSK · Accepted Answer · 2018-02-07 06:11:23Z

1

Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.

$scope is object provided by AngularJS, it is the binding part between the HTML (view) and the controller, and you can't change it the way you are expecting.

I suggest you please read the manual

answered Feb 7, 2018 at 6:11

PSK

18k5 gold badges35 silver badges44 bronze badges

1 Comment

Balu Over a year ago

Thanks. I guess it'll start making sense to me after I go in deep a bit more.

binariedMe · Accepted Answer · 2018-02-07 06:12:05Z

1

Angular recompiles the code and do dependency injection on the basis of demand. However a better practice is to write controller in this way :

app.controller('testCtrl', ['$scope', function($scope){}]);

This code will work even with obfuscation of file. You can try following link to have a better understanding of this.

Understanding dependency injection

answered Feb 7, 2018 at 6:12

binariedMe

4,3291 gold badge20 silver badges34 bronze badges

2 Comments

Balu Over a year ago

Thanks, I'll go through the link.

binariedMe Over a year ago

Yes, angular uses possibly toString method on ctrl functions definition to find out all dependency list and inject tyem accordingly

Collectives™ on Stack Overflow

AngularJs $scope parameter name

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related