Steps To Bind Data Using AngularJS

Discussion in 'JavaScript and AJAX' started by persysweb, Jul 9, 2018.

  1. persysweb

    persysweb Member

    Joined:
    Aug 1, 2017
    Messages:
    98
    Likes Received:
    18
    Trophy Points:
    8
    Location:
    India
    Home Page:
    httpS://persys.in/
    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:

    [​IMG]

    Now add the HTML control

    [​IMG]

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

    [​IMG]

    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:

    [​IMG]
    [​IMG]

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


    [​IMG]

    This how we can bind the data in AngularJS
     
    shabbir likes this.

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice