Step by Step Tutorials AngularJs Example

AngularJs is a Java script framework. It is used to perform all client side activities easily. In this tutorial, we are going to implement the step by step AngularJs example and also understand the execution process of AngularJs framework.

Like JQuery, in order to use the AngularJs functionality, we need to download the AngularJs framework (.js file) from the angularjs.org or we can directly use the AngularJs CDN (Content Delivery Network) in our application.

Here is the step by step AngularJs Example:

AngularJs Example :

Step 1:

Download the angular.min.js and include the AngularJs script file in html file.

<script src="angular.min.js"></script>

Include the AngularJs CDN like below:

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

Step 2 :

Create a web page (.html) to display welcome message.

welcome.html

[html]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20%C2%A0%C2%A0%20%C2%A0src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<title>Step by Step AngularJs Example</title>
</head>
<body>

<h1>AngularJs Example Demo</h1>

<div ng-app="" ng-init="name=’OnlineTutorialsPoint’">
       <input type="text" ng-model="name" />

<span>Welcome To {{name}}</span>
   </div>

</body>
</html>

[/html]

Step 3:

Run the welcome.html fiile.

On the above example, we have used some of the AngularJs directories, which are explained below.

Execution process of AngularJS :

Here are the step by step of execution process of a typical AngularJs Application.

When we access the above .html file from browser, the browser initially loads the html elements (DOM)
While loading the AngularJs, it creates the AngularJs global object [highlight color=”green”]angular[/highlight]
This angular object will compile and executes the AngularJs related elements.
AngularJS framework generates dynamic content, based on the directives(ng-app, ng-model) which we used in the html file.
AngularJs directives are the special attributes, which can be understand by the AngularJs framework.
In the above example, we use ng-app and ng-model directives.
ng-app directory is used to specify the region on which we can apply the AngularJs. It initializes the AngularJs application.
ng-init directory is used to initialize the AngularJs application data.
ng-model directive represents to bind the input value in html with AngularJs variables. It represents the two way binding in AngularJs.
{{x}} is a AngularJs expression, it represents one way binding in AngularJs

Keep Learning 🙂