Steps To Bind Data Using AngularJS

[Neha]

AngularJs is perfect to design the single page applications.

Before learning AngularJS you must have knowledge of the following language:

1. HTML
2. CSS
3. Javascript

AngularJS is basically the Javascript file which adds the script tag such as

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

HTML view:

The HTML container where the AngularJS application is displayed is called view.

We can use ng-bind directive which will bind the innerHTML of the element.

 <p ng-bind="firstname"></p>

To display content we can use {{ }}

 <p>First name: {{firstname}}</p>

ng-app directive define an AngularJS application.

ng-model directive define an AngularJS model and bind the value of HTML control to application data.

eg. To bind data with HTML using AngularJS

Take the blankpage angularjs.html and the page looks like this:



Now add the HTML control




3. Now add the script to the library and add directive to the HTML controls:



In above code I have defined the module name as MyApp then created a function for binding textbox values with given value and returned all and showed it on HTML page.

Please see above code output:


We can also change the values in the textbox the result will get reflected automatically



This how we can bind the data in AngularJS