Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Scopes in Angular JS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 93
    Comment on it

    Scope is a  JavaScript object that connects Controller and View. Scope contains information of model, its properties and methods.

     

    Characteristics of scope:

    1. Scope acts as a connection between Controller and View and available in both controller and view.
    2. Scope is the first argument passed in controller constructor.
    3. In MVC, scope can be act as ViewModel.
    4. Scope contains data and methods from Controller that executed in View
    5. We can define property and methods in scope.
    6. For each controller new scope is created. 
    7. It contains data and functionality render in View.
    8. It provides an execution context for DOM and expression
    9. $rootScope is the top-most scope in DOM element and parent of all $scope.
    10. $scope can access their parent scope
    11. Only ng-controller and  ng-repeat have their own scope.

     

    How to Use the Scope?

    When we create controllers in AngularJS, we pass $scope object as a parameter.

     

    Example of Scope

    <h2>Scope Example</h2>
    
    @Styles.Render("~/Content/css")
    
    <div ng-app="myApp" ng-controller="ctrl">
    
        <input ng-model="name">
    
        <h1>Hello {{name}}</h1>
    
    </div>
    
    @Scripts.Render("~/bundles/angularjquery")
    <script>
    
        var app = angular.module('myApp', []);
        app.controller('ctrl', function ($scope) {
            $scope.name = "World!";
        });
    
    </script>

    OUTPUT :

     

    Root Scope

    $rootScope is the top-most scope in DOM element and parent of all $scope. All applications have a scope created on HTML element is called $rootScope. It contains ng-app directive. The rootScope can access from entire application. If same variable is present in both current scope and rootScope, then application use the current scope variable.

     

    Example:

    <h2>Root Scope Example</h2>
    
    @Styles.Render("~/Content/css")
    
    <div ng-app="myApp">
    
      
        <div>
            <strong>Root Scope :</strong> <br />
        {{name}}
        </div>
    
        <div ng-controller="ctrl">
            <strong>Current Scope : </strong> <br />
            <div>{{name}}</div>
        </div>
    
        <div>
           <strong> Root Scope :</strong> <br />
        {{name}}
        </div>
    </div>
    
    @Scripts.Render("~/bundles/angularjquery")
    <script>
        var app = angular.module('myApp', []);
        app.run(function ($rootScope) {
            $rootScope.name = 'root scope variable';
        });
        app.controller('ctrl', function ($scope) {
            $scope.name = "currrent scope variable";
        });
    
    </script>

     

    OUTPUT :

     

    Hope, this sample will help you. Thanks

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: