AngularJS - First Application

Steps to create AngularJS Application

Let's create a simple AngularJS web application step by step.

Step 1 - Load library

Add following script tag in head section of your html document to load AngularJS library.

<script type="text/javascript" src="//"> </script> 

Step 2 - Bootstrap AngularJS:

An AngularJS application is bootstrapped using ng-app directive. This is the most important directive in AngularJS. It refers to the part of your HTML which will be controlled/managed by AngularJS. In this example, we used it on html tag, that means AngularJS will control the whole document. You can also put this tag on a specific element. In that case, only that element and it’s child elements will be controlled by AngularJS. Anything outside will remain inaccessible to AngularJS.

<html ng-app="">

Step 3 - Define a model using ng-model directive

Enter your Name: <input type="text" ng-model="name">

In the above code consider the input tag, it has directive named ng-model. The ng-model directive is used with input fields to get access to the user input into JavaScript variables. Here, we are storing this field value in a javaScript variable called name.

Step 4 - Bind the value of model by using ng-bind directive

         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>...</p>

In the above code ng-bind directive is used to get the value from the variable referred by ng-model.

Final Code

Putting all together the final code is given below.

See the Pen AngularJs First App by Mukesh (@mrajpolaris) on CodePen.

The above example is plain HTML code with couple of AngularJS directives such as ng-app, ng-model, and ng-bind. As of now don't think much about these directives,We will discuss each and every directives in separate article.

References :- AngulaJS Documentation

Related Articles

  1. Maven Overview

comments powered by Disqus