-1

No JS experience. Learning AngularJS

So I've read https://docs.angularjs.org/guide/scope, and I've looked at some stackoverflow.com answers on what the $ is used for in JavaScript. I understand the $ has a specific use in some libraries, like JQuery, and that in newer versions of JavaScript it is just seen as a standard character for variable names. So my question is...

Why is it common in AngularJS to see a scope object with a $ in front of it even though the $ isn't necessary?

An example of an AngularJS scope object without using a $

scope object without $

app.controller('MainController', ['$scope', function(withoutdollarsign){
    withoutdollarsign.title = 'string here';
}]);

or scope object with $

app.controller('MainController', ['$scope', function($withdollarsign){
    $withdollarsign.title = 'string here';
}]);
Community
  • 1
  • 1
cameron-f
  • 431
  • 1
  • 3
  • 15
  • that is what angular does provide a feature of Dependency injection.. And the way you using it is inline array annotation of DI.you need to look at here https://docs.angularjs.org/guide/di – Pankaj Parkar Jun 14 '15 at 18:10
  • 1
    @pankajparkar: I'm not sure it has anything to do with dependency injection. I think it just helps Angular identify "internal" properties. For example, properties that begin with "$" are handled differently when checking for changes to an object and those that begin with "$$" are ignored when serializing to JSON. In the example given in the question there's no point to using the "$". – Alvin Thompson Jun 14 '15 at 18:15
  • @pankajparkar Thanks for the link. So when using inline array annotation, why do some parameters begin with a $ and others do not? Like the this function example from your link: 'someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2))' – cameron-f Jun 14 '15 at 18:48
  • @cameron-f because the thing prefix with `$` are most of predefined provider of angular like `$scope`, `$rootScope`, `$timeout` , `$q`, etc. as Claies described in answer angular used it for internal purpose, example of `$` are public objects I mention in previous statement,,and the `$$` are used for private objects such as `$$watchers`, `$$listeners`, etc. which are internally message..you can found them inside `$scope` variable – Pankaj Parkar Jun 14 '15 at 19:34

2 Answers2

1

The Angular API documentation states:

Angular Prefixes $ and $$: To prevent accidental name collisions with your code, Angular prefixes names of public objects with $ and names of private objects with $$. Please do not use the $ or $$ prefix in your code.

In your code snippet, you are showing one method for dealing with Dependency Injection. In this method, an array of arguments are passed, and the array is matched, in order, to the parameters passed in to the function. It is customary, but not mandatory, to use the same name for the array value as the value being passed to the function. Using different names can create confusion in your code, especially for someone looking at your code later, who might not understand at first glance that withoutdollarsign is actually $scope.

In practice, the $ or $$ are used to help you as a developer identify objects which were created by the framework, vs. objects created in your own code. There is no special significance in the JavaScript language for this usage, it is only the convention used by the Angular contributors.

As is also stated here, it's recommended to not use $ or $$ in your own code when interacting with the Angular Framework.

Claies
  • 22,124
  • 4
  • 53
  • 77
0

You don't need to use the dollar sign here. Most people use $scope as function parameter since it is easy to recognize, you usually use the the name of the injected component as parameter name. But in general it's just a variable name and you can use whatever name you want.

The only case where the function parameter name matters, if you use it for dependency injection:

// This will work
app.controller('MainController', function($scope){
    $scope.title = 'string here';
});

// This will not work, angular tries to find a `abcdef` component to inject
app.controller('MainController', function(abcdef){
    abcdef.title = 'string here';
});

But since you use the array notation (which is recommended), you don't need this.

Numyx
  • 1,758
  • 2
  • 11
  • 16