Sunday 5 June 2016

Model binding in Angular js

In this post we are going to see how to use the angular js for model binding. First download the angular js from the official website

var app = angular.module('app', []);

app.controller('main'function ($scope) {

    $scope.Title = "Sample Angular Application";   

});


<html>
<head>
    <script src="scripts/angular.min.js" type="text/javascript"></script>
    <script src="scripts/angular-route.min.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
</head>
<body>
    <div ng-app="app">
        <div ng-controller="main">
            <h1>{{Title}}</h1>
     <input type="text" ng-model="name" />
<div>
   <label> {{name}} </label>
</div>
        </div>
    </div>
</body>
</html>



in this sample you can see the model Title is binded with the html view using a double curly braces, and also you can see the model name which under goes two way binding using ng-model, it is coupled with a textbox , so every time whenever there is a  change takes place in the Textbox it is changes the value of model name , we can see the changes in the label also, Angular Render the view of label, when ever name changes, another thing here we are not declare the model name in the controller, but it is automatically creates in the scope by the ng-model.

No comments:

Post a Comment