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
Let us see how we can use these directives with HTML and create our first application.
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"/>
<div ng-app = ""> ... </div>
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
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>
Open the HTML file in a web browser. Enter your name in the input field and see the result.
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.
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.