AngularJS $scope Hierarchy

Here in this article, we will discuss AngularJS $scope Hierarchy. One of these important concepts is scopes.

In an AngularJS application, the controller and view share an object called a scope; this object is at the core of its amazing two-way data binding. The controller sets properties on the scope, and the view binds to those properties.

AngularJS takes responsibility for keeping the two in sync. A controller is responsible for setting model properties and functions. This can be done only through $scope.

Whatever function or model you apply in View (HTML file), that is accessed in controller using scope.

Only methods defined on this $scope object are accessible from the HTML/view.

Example – from ng-click, filters, etc. AngularJS extended the raw JavaScript objects with custom methods and properties. These objects, also known as scope in AngularJS terms, work as a glue between the view and other parts ( directives, controllers and services ) inside the AngularJS application.

For Example:

Below is the controller.js code app.controller(‘MySimpleController’, function($scope) { $scope.message = ‘Hello Raj!’; });

Below is the HTML part

In this example, the controller sets a property, message, on the scope.

When AngularJS processes the ng-model directive in the view, it starts listening for change events on that input element and on the scope’s message property. If the value of message changes, the input will update, and if the input changes, message updates.

You may like following angularjs & SharePoint 2013 tutorials:

Hope this Angularjs tutorial help you to learn AngularJS $scope hierarchy.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.