My First Application In AngularJS



  • Welcome to AngularJS first Tutorial, let’s create our first Angular JS Application.
  • First, we should include AngularJS JavaScript source file from googleapis.com into our HTML document.
  • The basic program consists of following three directives.
    • ng-app directive defines the root element of AngularJS application.
    • ng-model directive bind the <input> fields of HTML value to the application variable by name.
    • ng-bind directive to bind the application variable value to the HTML Element.
  • Now let’s see our first program using AngularJS.

Let’s see the Example :

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>My First Program in AngularJS - Wikitechy</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular.min.js"> </script>
    </head>
    <body ng-app="" >
        Enter Text : <input ng-model="text" >
        <h2 ng-bind="text"></h2>
    </body>
</html>

Code Explanation for my first Application in AngularJS:

Code Explanation for My First Application In AngularJS

  1. The <script> tag is used to include AngularJS JavaScript source file from googleapis.com into our HTML document.
  2. The ng-app specifies the root element (e.g. <body> or <html> or <div> tags) to define AngularJS application.
  3. The ng-model bind an input field value to AngularJS application variable (“text”).
  4. The ng-bind is used to bind the AngularJS values to the HTML Document. AngularJS will automatically update the text from the “text” variable.

Sample Output for my first Application in AngularJS:

    Sample Output1 for my first application in angularjs

  1. The output displays the textbox.
  2. Sample Output2 for my first application in angularjs

  3. When we try to enter text in the textbox that will be automatically synchronized in the <h2> tag.

Tips and Notes:

  • If you want to make your page HTML valid. Use data-ng-,instead of ng-.


Related Searches to my first application in angularjs