How AngularJS prefixes $ and $$ are used?
-
$:
The $ in AngularJs is a built-in object.It contains application data and methods.
The scope($) acts as a link between controller and view.
Inside the controller function the properties and the methods to the scope($) can be attached. Expression, ng-model, or ng-bind directive can be used to display the scope data in the view.
<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"
>
</
script
>
</
head
>
<
body
ng-app
=
"Ng"
>
<
h1
>$scope</
h1
>
<
div
ng-controller
=
"myController"
>
Message: <
br
/>
{{message}}<
br
/>
<
span
ng-bind
=
"message"
></
span
> <
br
/>
<
input
type
=
"text"
ng-model
=
"message"
/>
</
div
>
<
script
>
var ngApp = angular.module('Ng', []);
ngApp.controller('myController', function ($scope) {
$scope.message = "GFG!";
});
</
script
>
</
body
>
</
html
>
Output:
Example 2:
<!DOCTYPE html>
<
html
>
<
script
src
=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"
>
</
script
>
<
body
>
<
div
ng-app
=
"myApp"
ng-controller
=
"myCtrl"
>
First Name: <
input
type
=
"text"
ng-model
=
"firstName"
/><
br
/>
Middle Name: <
input
type
=
"text"
ng-model
=
"middleName"
/><
br
/>
Last Name: <
input
type
=
"text"
ng-model
=
"lastName"
/><
br
/>
<
br
/>
Full Name: {{firstName +middleName+ " " + lastName}}
</
div
>
<
script
>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.firstName = "Beginner";
$scope.middleName = "for";
$scope.lastName = "Beginner";
});
</
script
>
</
body
>
</
html
>
Output:
$rootScope:
The AngularJS application consists of a single $rootScope. All the other $scope are child objects.$rootscope has properties and methods attached to it which will be available be to all the controllers.
Method Description
$new It is used to create new Child Scope $watch It is used to Register a callback which is to be executed whenever the model property changes. $watchGroup It is used to register a callback which is to be executed whenever model properties changes.
We specify an array of properties in this.
$watchCollection It is used to register a callback which is to be executed whenever model object or array property changes. $digest It processes all of the watchers of the current scope and its children. $destroy Remove the current scope from parent scope. $eval Execute expressions on the current scope. $emit It is used to dispatch the specified event upwards till $rootScope. $broadcast It is used to dispatch the specified event downwards till child Scope. Example 3:
<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"
>
</
script
>
</
head
>
<
body
ng-app
=
"Ng"
>
<
h1
> $watch </
h1
>
<
div
ng-controller
=
"Controller"
>
Enter Message: <
input
type
=
"text"
ng-model
=
"message"
/> <
br
/>
New : {{newMessage}} <
br
/>
Old : {{oldMessage}}
</
div
>
<
script
>
var ngApp = angular.module('Ng', []);
ngApp.controller('Controller', function ($scope) {
$scope.message = "GFG!";
$scope.$watch('message', function (newValue, oldValue) {
$scope.newMessage = newValue;
$scope.oldMessage = oldValue;
});
});
</
script
>
</
body
>
</
html
>
Output:
-
$$
$$ in this are treated as private variables. We use $$ to avoid the internal variable conflicts and not to expose for external use.
Some of them are listed below:-
$$observers, $$watchers, $$childHead, $$childTail, $$ChildScope etc.
Method
Description
$$watchers It contains all of the watches associated with the scope $$asyncQueue It is a async task queue.It is consumed on every digest $$postDigest(fn) It executes fn after the next digest cycle. $$destroyed It destroys the scope. Syntax:
$$('.selector');
or
element.all(by.css('.selector'));
A common ways of communication between modules of application, with the help of core AngularJS functionality is establishing a connection between controllers using $parent, $$childHead, $$nextSibling.
Example:
<!DOCTYPE html>
<
html
>
<
script
src
=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"
>
</
script
>
<
body
>
<
div
ng-app
=
"myApp"
ng-controller
=
"myCtrl"
>
First Name: <
input
type
=
"text"
ng-model
=
"firstName"
/><
br
/>
Middle Name: <
input
type
=
"text"
ng-model
=
"middleName"
/><
br
/>
Last Name: <
input
type
=
"text"
ng-model
=
"lastName"
/><
br
/>
<
br
/>
Full Name: {{firstName +middleName+ " " + lastName}}
</
div
>
<
script
>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$$scope.firstName = "Beginner";
$$scope.middleName = "for";
$$scope.lastName = "Beginner";
});
</
script
>
</
body
>
</
html
>
Output:
The above output will be produced when we add $$, since, it acts as private object.
So, to prevent accidental name collisions while writing your code angular prefixes public objects with $ and private objects with $$.