The complete AngularJS tutorial for beginners. We provide an easy way to learn AngularJS in this tutorial.

Sunday, 17 July 2016

AngularJS Scopes

with 0 Comment
AngularJS Scope With Example

Angularjs scope is a javascript object which is used to merge the controller with view or HTML page.
All controllers have an associated angular scope object.  A controller function is responsible for assigning model properties and functions. This can be done through angularjs scope. Whatever you apply in the view (HTML page), that is accessed in the controller using the scope. So this angularjs scope object has the main role in combining controller and view.

angularjs scopes
      angularjs scopes                   


angularjs scopes
angularjs scopes
                                  
In other words, we can say the scope is an object that binds to DOM element where you apply controller.

How to use angularjs scope?


The advantage in this angularjs scope is if we defined nested controllers then the child controller will inherit the scope from the parent controller.
angularjs scopes
angularjs scopes
                                              
Not at all like the other MVC frameworks, AngularJS doesn't have particular classes or functions to make model objects. Rather, AngularJS developed the crude JavaScript objects with custom strategies and properties. These objects, otherwise called scope in AngularJS, act as a paste between the view and different parts (mandates, controllers, and services) inside the AngularJS application.

Step by step process of scope for the below example


  • During the constructor definition of a controller,  angularjs scope is passed as the first argument to it.
  • $scope.username is called model which is to be used in the HTML page. 
  • We have set the value to the model (username) which will be available or reflected in the application module whose controller is My controller.

<script>
function MyController($scope) {
 $scope.username = "Money";
 };
</script>


In a larger application, it is very difficult to find a correct scope for the DOM so knowing your scope is very important.
From the above example, you can understand how to create an angularjs scope. In the above example, we are defining an attribute called username with value as money and we can bind that value in HTML like the below code.

<body>
<div ng-controller="MyController">
<h1>{{data.username}}</h1></div>
</body>


The above code will automatically get the value from the controller and make it display in the HTML page where the expression is mention.

Best Example for AngularJS Scope

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
 <div>
    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <hr>
    <h1>Hello {{yourName}}!</h1>
  </div>

  <div ng-controller="AppCtrl">
    <h1>Message: {{message}}</h1>
  </div>

<script>
angular.module('myApp', [])

//The following can also be in another file as long as it is loaded afterwards

angular.module('myApp').controller("AppCtrl", ["$scope", function($scope){

   $scope.message = "This is a message";

}]);
</script>

<p>Notice that controller's color variable does not overwrite the rootScope's color value.</p>

</body>
</html>


AngularJS Root Scope


All applications have a $rootScope which is the extension made on the HTML component that contains the ng-application mandate. The rootScope is accessible in the whole application.

On the off chance that a variable has the same name in both the present extension and in the rootScope, the application utilizes the one in the present degree. At whatever point the AngularJS application is bootstrapped, a rootScope item is made. Every degree made by controllers, mandates and administrations are prototypical acquired from rootScope. AngularJS documentation is one of the best assets to figure out how scope legacy functions: see Scopes in AngularJS. Seeing how scope legacy functions will be helpful in taking after areas.



0 comments:

Post a Comment