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.
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 -
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.
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.