AngularJS First Application with Examples

In every programming language the first application that we learn is the "Hello World" application. Same is the case with AngularJS as well. Before we start creating our first AngularJS application, we need to know the actual parts of the AngularJS application. Any application comprises of three crucial components

  • ng-app- This is a directive defines and links the AngularJS application to HTML.
  • ng-app This is a directive defines and links the AngularJS application to HTML.
  • ng-app This is a directive defines and links the AngularJS application to HTML.

Let us see how we can use these directives with HTML and create our first application.

How to create an AngularJS application?


Step 1- Load framework

Since any AngularJS framework is completely based on JavaScript, this can be added by using the <Script> tag.

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

Step 2- Define AngularJS application by using the ng-app directive.

<div ng-app = "">
   ...
</div>

Step 3- Using the ng-model directive, define a model name.

							
 <p>Enter your Name: <input type = "text" ng-model = "name"></p>

Step 4- Using the ng-bind directive, bind the value of the above model.


 <p>Hello <span ng-bind = "name"></span>!</p>
 

How to run an AngularJS application

To run your AngularJS application use the above mentioned steps in an HTML page as shown in the code below.

<html>
   
   <head>
      <title>AngularJS First Example </title>
   </head>
   
   <body>
      <h1>Sample Application of JavaTportal </h1>
      
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
     </div>
      
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
   </body>
</html>

Output

Open the HTML file in a web browser. Enter your name in the input field and see the result.


Integration of AngularJS with HTML-

The directives used in the code help in the integration of AngularJS with HTML. Let us see the operations performed by each of them one by one.

  • ng-app directive specifies the beginning of the AngularJS application.
  • After the application has been created, ng-model directive creates a model variable called "name". This variable is used with the html page; specifically within the div tag which contains the ng-app directive.
  • Then the ng-bind directive uses the name model to be displayed in the html span tag, whenever the user inputs something in the text box. It basically instructs AngularJS to replace the text of the specified HTML element with the value that is given as input by the user and also update the text content when the value of that expression changes.
  • The closing div tag i.e. </div> indicates that the AngularJS application ends here.

Thus, we learned how to create a basic "Hello World" application in Angular JS using directives. In the tutorials further, we will be learning more about AngularJS directives and their uses in creating AngularJS applications.