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.
Scope($)
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 =
</ 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 =
</ 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 = "Geeks";
$scope.middleName = "for";
$scope.lastName = "Geeks";
});
</ 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 =
</ 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 =
</ 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 = "Geeks";
$$scope.middleName = "for";
$$scope.lastName = "Geeks";
});
</ 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 $$.
Last Updated :
31 Jul, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...