Simple Two Way Data Binding Using AngularJS

Submitted by razormist on Tuesday, January 31, 2017 - 15:16.
In this tutorial, we will try to create a Simple Two Way Data Binding Using AngularJS. AngularJS is a structural framework for dynamic web apps. It is a kind of template that extends HTML to a new level of coding techniques. It is mostly used by other well known site for creating a template. So let's get started. Creating A Mark-up This a form for displaying the value when the user input a value. To do that open any kind of text editor(notepad++, etc..)
  1. <!DOCTYPE html>
  2. <html lang = "en">
  3.         <head>
  4.                 <meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1"/>
  5.                 <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/>
  6.                 <script src = "js/angular.js"></script>
  7.                 <script src = "js/script.js"></script>
  8.         </head>
  9. <body ng-app = "myModule">
  10.         <nav class = "navbar navbar-default">
  11.                 <div class = "container-fluid">
  12.                         <a class = "navbar-brand" href = "https://www.sourcecodester.com">Sourcecodester</a>
  13.                 </div>
  14.         </nav>
  15.         <div class = "col-md-3"></div>
  16.         <div class = "col-md-6 well" ng-controller = "myController">
  17.                 <h3 class  = "text-primary">Simple Two Way Data Binding Using AngularJS</h3>
  18.                 <hr  style = "border-top:1px dotted #000;"/>
  19.                 <textarea class = "form-control" style = "resize:none;" ng-model = "result"></textarea>
  20.                 <br />
  21.                 <div style = "float:left; margin:10px;">{{result}}</div>
  22.                 <div style = "float:left; margin:10px;">{{result}}</div>
  23.                 <div style = "float:left; margin:10px;">{{result}}</div>
  24.                 <div style = "float:left; margin:10px;">{{result}}</div>
  25.                 <div style = "float:left; margin:10px;">{{result}}</div>
  26.                 <div style = "float:left; margin:10px;">{{result}}</div>
  27.                 <div style = "float:left; margin:10px;">{{result}}</div>
  28.                 <div style = "float:left; margin:10px;">{{result}}</div>
  29.                 <div style = "float:left; margin:10px;">{{result}}</div>
  30.                 <div style = "float:left; margin:10px;">{{result}}</div>
  31.                 <div style = "float:left; margin:10px;">{{result}}</div>
  32.                 <div style = "float:left; margin:10px;">{{result}}</div>
  33.                 <div style = "float:left; margin:10px;">{{result}}</div>
  34.                 <div style = "float:left; margin:10px;">{{result}}</div>
  35.                 <div style = "float:left; margin:10px;">{{result}}</div>
  36.                 <div style = "float:left; margin:10px;">{{result}}</div>
  37.                 <div style = "float:left; margin:10px;">{{result}}</div>
  38.                 <div style = "float:left; margin:10px;">{{result}}</div>
  39.                 <div style = "float:left; margin:10px;">{{result}}</div>
  40.                 <div style = "float:left; margin:10px;">{{result}}</div>
  41.                 <div style = "float:left; margin:10px;">{{result}}</div>
  42.                 <div style = "float:left; margin:10px;">{{result}}</div>
  43.                 <div style = "float:left; margin:10px;">{{result}}</div>
  44.                 <div style = "float:left; margin:10px;">{{result}}</div>
  45.                 <div style = "float:left; margin:10px;">{{result}}</div>
  46.                 <div style = "float:left; margin:10px;">{{result}}</div>
  47.                 <div style = "float:left; margin:10px;">{{result}}</div>
  48.                 <div style = "float:left; margin:10px;">{{result}}</div>
  49.                 <div style = "float:left; margin:10px;">{{result}}</div>
  50.                 <div style = "float:left; margin:10px;">{{result}}</div>
  51.                 <div style = "float:left; margin:10px;">{{result}}</div>
  52.                 <div style = "float:left; margin:10px;">{{result}}</div>
  53.                 <div style = "float:left; margin:10px;">{{result}}</div>
  54.                 <div style = "float:left; margin:10px;">{{result}}</div>
  55.                 <div style = "float:left; margin:10px;">{{result}}</div>
  56.                 <div style = "float:left; margin:10px;">{{result}}</div>
  57.                 <div style = "float:left; margin:10px;">{{result}}</div>
  58.                 <div style = "float:left; margin:10px;">{{result}}</div>
  59.                 <div style = "float:left; margin:10px;">{{result}}</div>
  60.                 <div style = "float:left; margin:10px;">{{result}}</div>
  61.         </div>
  62. </body>
  63. </html>
The code above will display the result when you enter a value in the textarea ng-model - directive binds an input , select , textarea to a property on the scope using ng-myController which is created and exposed by this directive {{result}} - after the data is bind, it will display the exact value that has been input Creating A Script To Make AngularJS Worked This script will make the angularJS to work with the mark-up form
  1. var myApp = angular.module("myModule", [])
  2.                                 .controller("myController", function($scope){
  3. });
The script above will typically create a module name "myModule" that will associate with controller function when included in the mark-up form. There you have it we create a simple two way data binding using angularjs. I hope that this tutorial help you to your project. For more updates and tutorials, just kindly visit this site. Enjoy Coding!!
Tags
AngularJS

Add new comment

About text formats
  • 13 views