Wednesday, June 24, 2015

Role of $scope in Data Binding

The $scope object is the default model object provided by AngularJS, the $scope acts as the model between the controller and the view layers.

The $scope is a JavaScript object which binds the controller and the view in an AngularJS MVC application. Both the controller and the view can access the $scope object, 2 way binding between the model and view is enabled using the $scope object.

In complex applications where we have the view and controller in different files we explicitly use the $scope object in the view to refer to the properties and methods defined in the model object.

The below example demonstrated the use of $scope object to bind between the model and the view.
<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
    <script>
      function nameController($scope){
              $scope.FName = 'FirstName';
              $scope.LName = 'LastName';
      }
    </script>
  </head>
  <body>
          <div ng-controller="nameController">
                   First Name: <input type="text" ng-model="FName"><br/><br/>
                   Last Name: <input type="text" ng-model="LName"><br/><br/>
                   Your Name is :{{FName}}, {{LName}}
          </div>
  </body>
</html>

Output




Search Flipkart Products:
Flipkart.com

No comments: