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="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </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


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

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


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

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