Angular JS Tutorial

When we start learning Angular JS. The first question that comes in our mind is,

1)What is Angular JS and how to use it?

Since it contains the word JS, so it is a framework that is written in Javascript. It is basically a library that is written in javascript. So first thing in order to start coding in angular js is to include the angular js in your file.

You can add angular js in your file using the script tag, that we normally use for all the javascript programming.

In javascript also in order to include any javascript file or implementing any function in javascript we use script tag.

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

2) Once you have included the angular js file in your document, now you can use all the directives of angular js.

The directive in angular js starts with ng prefix.

The example of directives used are as follows

ng-click Defines the behavior when an element is clicked.
ng-app it initializes an angular js application

Ex:

<div ng-app=”” ng-init=”firstName=’Ben obrien'”>

<p>Name: <input type=”text” ng-model=”firstName”></p>
<p>You wrote: {{ firstName }}</p>

</div>

3) Angular expression:

All the angular expressions are written within double bracess {{ }}
Example :
<p> The sum of 20 and 10 is : {{ 20 + 10 }}

4) you can use ng-model to bind the data from your application to your html controls.

if you want to show dynamic data on your app, you will be usinng ng-model directive to show the data in your app.
<div ng-app=”” ng-init=”myapp=’testing my app'”>

<p>Name: <input type=”text” ng-model=”myapp”></p>
<p>output : {{ myapp }}</p>

</div>
in the above example we are using the ng-model to bind the textbox to the myapp variable. so the output will be

Testing my app.

For the div in which you want to show angular js output, you have to use ng-app.

5) Array definition :
you can define an array in the ng-app directive

<div ng-app=”” ng-init=”marks=[
{mark:’40’},
{mark:’90’},
{mark:’100′}]”>

</div>
The above example shows an array marks , in order to bind this array with an html control and show its value we will use

ng-repeat directive , since it is an array, so we have to traverse the error using ng-repeat directive.
<ul>
<li ng-repeat=”x in marks”>
{{ x.mark}}
</li>
</ul>

The full html code is as follows

<!DOCTYPE html>
<html>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”></script>
<body>

<div ng-app=”” ng-init=”marks=[
{mark:’40’},
{mark:’90’},
{mark:’100′}]”>

<ul>
<li ng-repeat=”x in marks”>
{{ x.mark}}
</li>
</ul>

</div>

</body>
</html>

Angular JS Part Two