CODEWITHSUNDEEP
javascriptangularjs
Montreal
Montreal

Reputation: 2623

What does '$' really mean in '$scope' angular varialble

Why this code does work

<div ng-app="my_app" ng-controller="my_ctrl">
    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{ firstName + " " + lastName }}
</div>

<script>
    var app = angular.module("my_app", []);

    function ScopeController($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Another John";
    }
    app.controller("my_ctrl", ScopeController);
</script>

And this doesn't

function ScopeController(scope) {
    scope.firstName = "John";
    scope.lastName = "Another John";
}

As far as I understand programming, $scope is just a local variable for ScopeController. And ScopeController itself is just a callback function. So why correct work of my code depends on how I name callback's local variable? If it's not just a local variable, then why it passed as an argument?

Upvotes: 0

Views: 88

Answers (4)

csschapker
csschapker

Reputation: 129

To expand on the answer deceze provided, this is true of any service. It all depends on how you do dependency injection. For example:

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

function MyService() {
    this.value = 'hi';
}
app.service('MyService', MyService);

function MyController(MyService) {
    var val = MyService.value; // 'hi'
}
app.controller('MyController', MyController);

function MySecondController(ms) {
    var val = ms.value; // 'hi'
}

// this is the key. if you use this method then you
// can call you parameter whatever you want in the controller
app.controller('MySecondController', ['MyService', MySecondController]);

// this will work similarly to the MySecondController
function MyThirdController(service) {
    var val = service.value; // 'hi'
}
MyThirdController.$inject(['MyService']);
app.controller('MyThirdController', MyThirdController);

Upvotes: 0

Jeremy Thille
Jeremy Thille

Reputation: 26400

$scope is an Angular keyword. Angular will look for specific variable names like $scope or $timeout and inject the corresponding services and modules.

It doesn't work with scope because Angular's core has no such thing as a scope service.

For that matter, it's a problem with minification : Since code minifiers mangle variable names to save up bytes, they transform function ScopeController($scope) into function a(b). And Angular is then lost. It doesn't know what b is.

In order to work around this, we use plain strings to inject the controllers : app.ScopeController([ "$scope", function($scope) { .... };] ). This gets then minified into app.a([ "$scope", function(b) { .... };] ) but it's okay because strings don't get minified and Angular knows that b refers to $scope.

Upvotes: 1

devastato
devastato

Reputation: 91

You should read about injecting dependencies in Angular. Yes, ScopeControllerist a function, but it is passed into app.controller() where it is registered as a new controller within your app. The name of this new controller is "my_ctrl". $scope is a Service, which will be injected into your my_ctrlon instantiation. You access the controllers Scope via $scope, after that, as you already do.

$scopetells angular -> use my internal $scope service, whereas scope might be something you wrote on your own.

Upvotes: 0

deceze
deceze

Reputation: 522587

It doesn't mean anything. $scope is simply the name of the scope service. Angular prefixes most of its stuff with a $ in order to avoid stepping on names that you choose, so you won't have to prefix all your clashing names with $ or something else. It ceases to work when you simply call it scope, since Angular figures out which services it should inject based on the name of the paramter; and it doesn't know any service called scope. To make the variable name arbitrary, use the annotated syntax to define your controller:

function ScopeController(scope) { ... }

app.controller('my_ctrl', ['$scope', ScopeController]);

Upvotes: 4

Related Questions