-
$:
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><scriptsrc=</script></head><bodyng-app="Ng"><h1>$scope</h1><divng-controller="myController">Message: <br/>{{message}}<br/><spanng-bind="message"></span> <br/><inputtype="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><scriptsrc=</script><body><divng-app="myApp"ng-controller="myCtrl">First Name: <inputtype="text"ng-model="firstName"/><br/>Middle Name: <inputtype="text"ng-model="middleName"/><br/>Last Name: <inputtype="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><scriptsrc=</script></head><bodyng-app="Ng"><h1> $watch </h1><divng-controller="Controller">Enter Message: <inputtype="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><scriptsrc=</script><body><divng-app="myApp"ng-controller="myCtrl">First Name: <inputtype="text"ng-model="firstName"/><br/>Middle Name: <inputtype="text"ng-model="middleName"/><br/>Last Name: <inputtype="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 $$.