Collapse

Announcement

Collapse
No announcement yet.

Steps To Bind Data Using AngularJS

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Steps To Bind Data Using AngularJS

    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
    Code:
     <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.
    Code:
     <p ng-bind="firstname"></p>
    To display content we can use {{ }}
    Code:
     <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:

    Click image for larger version  Name:	html-form.jpg Views:	1 Size:	36.5 KB ID:	717

    Now add the HTML control

    Click image for larger version  Name:	HTML-control.jpg Views:	1 Size:	20.7 KB ID:	718


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

    Click image for larger version  Name:	script.jpg Views:	1 Size:	77.2 KB ID:	719

    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:

    Click image for larger version  Name:	output.jpg Views:	1 Size:	28.8 KB ID:	720
    We can also change the values in the textbox the result will get reflected automatically

    Click image for larger version  Name:	output2.jpg Views:	1 Size:	33.0 KB ID:	721

    This how we can bind the data in AngularJS
    Last edited by Neha; 07-03-2018, 01:25 PM.
Working...
X