Monday , October 23 2017
Home / angularjs / Step by Step Tutorials AngularJs Example

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>

Or

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


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></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" /> <br>
        <br> <span>Welcome To {{name}}</span>
    </div>
</body>
</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 angular
  • 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 🙂

About chandrashekhar

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Recommended

AngularJs Data Binding Example

One of the important feature of AngularJs is Data Binding. Data binding makes the AngularJs …

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *