Angular js scope
$scope is a glue between the View and the Controller. It connects a Controller with the View,'
$scope serves as the glue between the Controller and the View.
The $scope is the connection between the HTML and the View.
The View and the model both have access to the $scope.
In the context of MVC, $scope can be seen as the ViewModel.
$scope provides the execution context for the DOM and the expression.
$scope provides an execution context in which the DOM element is bound.
$scope is the source of the truth.
$scope is modified when the View changes and the View is modified when $the scope changes its value.
The $scope object is a plain JavaScript object. We can add and remove a property as required.
$scope holds data and functions from the Controller that should be displayed and executed in the View.
The $rootScope is the eventual parent of all the $scope.
$rootScope is the top-most scope in a DOM element with the ng-app directive.
In angular all the $scope are created with prototypal inheritance.
$scope has access to their parent scope.
$scope contains data and the functionality to be used to render the View.
For each Controller created a new $scope is created.
It is ideal to contain the application logic in the Controller and the data in the $scope of the Controller.
When $the scope object is not needed in the View, the scope will be cleaned up and destroyed.
Directives do not have their own scope but with some exceptions ng-controller and ng-repeat do.
When angular starts running all the $scope are attached to the View.
$scope passes data and behavior to the View.
Sometimes controller become complex by using $scope for providing data and behavior to view, in that situation we can use scopeless controller.
But if you have designed your AngularJS application perfectly, there is no need to go for scopeless controllers.
Creating scope-less controller
angular module(app.js):
angular.module('myApp', []);
var app = angular.module("myApp");
app.controller("myController", function()
{
this.title = 'scopeless Controller Test';
this.name = 'Anupam';
this.sayHello = function()
{
alert('Hello ' + this.name);
}
});
$rootScope helps in communication between different controllers of an application. AngularJS can have only one rootScope for an app.
AngularJs is an MVC based framework, where Model for a controller contains data, the controller for a view contains the logic to manipulate that data, and the view is the HTML that displays the data.
A $scope can be considered as a model, whereas the functions written in angular controller modifies the $scope and HTML display the value of the scope variable.
$scope is a model for a controller and helps the controller in interacting with the view.
(This is a super short answer to this question, but it is complete in every sense. Try not to put any additional angular terms).
$rootScope helps in communication between different controllers of an application. AngularJS can have only one rootScope for an app.
Both $scope and scope are instances of scope object. The difference lies in the name that is used for them. In order to explain the difference between $scope and scope, we need to know about directives with an isolated scope.
.directive('testDirective', function() {
return {
scope: {},
link: function(myScopeVar, elem,attr) {
console.log(scope)
}
}
})
})
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
templateUrl: 'my-customer.html'
};
});
$scope in AngularJS is an object which refers to an application model. It is an object that binds view (DOM element) with the controller. In controller, model data is accessed via $scope object. As we know, AngularJS supports MV* pattern, $scope object becomes the model of MV*.
The $scope is a special JavaScript object. Both View and controller have access to the scope object. It can be used for communication between view and controller. Scope object contains both data and functions. Every AngularJS application has a $rootScope that is the top most scope created on the DOM element which contains the ng-app directive. It can watch expressions and propagate events.
