We now have a youtube channel. Subscribe!

AngularJS | First Application

AngularJS First Application


Hello folks! welcome back to a new edition of our tutorial on AngularJS. In this tutorial, we are going to be creating our AngularJS First Application.

Before creating a real AngularJS HelloWorld! application, let us take a look at the parts of an AngularJS application.

Parts of an AngularJS Application

An AngularJS application is made up of the following three vital parts -

  • ng-app - The ng-app directive defines and links an AngularJS application to HTML.
  • ng-model - ng-model directive binds the values of AngularJS application data to the HTML input controls.
  • ng-bind - ng-bind directive binds the AngularJS Application data to HTML tags.

Creating AngularJS Application

Step One: Load framework

Being a pure JavaScript framework, it can be added via the <Script> tag.

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

Step Two

Define AngularJS using ng-app directive.

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


Step Three

Define a model name using the ng-model directive.

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

Step Four

Bind the value of the above model defined using ng-bind directive.

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

Executing AngularJS Application

Use the above mentioned three steps in an HTML page.

Create a HTML page testAngularJS.html -

<html>
   <head>
      <title>AngularJS First Application</title>
   </head>
   
   <body>
      <h1>Sample Application</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 = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

Output

Open the file testAngularJS.html in any web browser of your choice. Input your name to see the result -

Sample Application

Enter your Name: 

Hello !


How AngularJS Integrates with HTML

  • The ng-app directive indicates the start of AngularJS application.
  • ng-model directive creates an model variable named name, which can be used with the HTML page and within the div tag having ng-app directive.
  • The ng-bind directive then makes use of the name model to be shown in the HTML <span> tag anytime user enters input in the text box.
  • Closing <div> tag indicates the end of AngularJS application.


Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we are going to be studying about AngularJS Directives.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2022 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain