The most popular wording when we learn about programming is Hello World. So let see how we can use our first AngularJS code to include those words. The first thing we need to do is to create a basic html document as shown below.
<!DOCTYPE html> <html> <head> <title>Learning AngularJS for beginners.</title> </head> <body> </body> </html>
There are two things we need to do, the first is to include the source path of the AngularJS file, we can either use Google Hosted file or if you have downloaded the file, you can use it by specifying the correct path of the script file. The second one is to add ng-app directive into the html element.
After adding those two options our new html code will look like below.
<!DOCTYPE html>
<html>
<head>
<title>Learning AngularJS for beginners.</title>
</head>
<body ng-app>
<p>Please enter your name <input type='text' ng-model='yourName'/></p>
<p>You say Hello World to {{yourName}}</p>
<p></p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>
The location of the ng-app determines where AngularJS script will manage or run its' code. If we specified the ng-app inside the body tag, it means we tell AngularJS to look into the body DOM. It is possible to have more than one ng-app directive, you just have to make sure that the directive is not nested within each other.
What is actually directive in AngularJS?
Directive in AngularJS means a new markup that is applied in html elements or attributes. When the AngularJS script is loaded, it will parse the new markup and then render into the html DOM.
Quick Demo
This is the actual example of above code, to test it please enter your name in the text box.
Please enter your name
You say Hello World to {{yourName}}
With the example above, hopefully you can understand the basic work flow on how AngularJS works.