Hi Here i am sharing my experience that how i learn Angular JS.This is a all about that how to learn AngularJS. So First…What is angularJS ?

It is a JavaScript framework which provide interactivity with HTML.

Before you start what would you need to know ?

HTML, CSS and JavaScript is necessary to work with AngularJS and if you know jQuery that will be good else no worry.

Why you use this ?

For single page application it is too good.

easily work with jQuery.

easy to test.

provide a modular approach to your code.

and one and most good feature you need to write very small code for its two way data binding feature(we will discuss it no worry).

In the Angular Main thing is Directives

What is Directive?

In our html when we add this ,as a tag then AngularJS know that it work on this place for JavaScript code.like a demo

in our Normal Work we call JavaScript function like below

1

2

3

4

5

<script type="text/javascript">

functionhello(){

alert("hello");

}

</script>

1

2

3

4

5

6

7

8

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body onload="hello()">

</body>

</html>

and for Angular we will write

1

2

3

4

5

6

7

8

<!DOCTYPE html>

<html ng-app="Test"><!--here we say toangular that start from thistag-->

<head>

<title></title>

</head>

<body ng-controller="hello"><!--here angular takeacommand from us that it should execute hello functionandit alert"hello"-->

</body>

</html>

OK Now let’s come to the point

How you will start with work in AngularJS ?

ng-app (Angular Module)

say to AngularJS active on which portion of page

First in your html like below

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body ng-app="">//Now it Tells to AngularJS to be active in this portion of the page. In this case the entire document.(due to we apply on html tag )

<div>

<input type="text"ng-model="testName"placeholder="Enter a name here">

<h1>Hello,{{testName}}!</h1>

</div>

</body>

</html>

Type In Below input Box and See Angular Magic

Hello Test, {{ myName }}!

Here we see two way data binding( bi-directional data binding )without any work this is the feature of AngularJS .When you will change in back-end changes are shown on view . this is the magic of AngularJS .

Here we see three things

ng-app= here we say to start Angular js on our page

ng-model=”testName” = by this we say two way data binding start on this testName model on this page.

{{ testName}} =here angular show changes on testName model on this directive

Module is a collection of function which is initiate when this module is called.

Now we make a module in AngularJS.

1

varTestModule=angular.module("myModule",[]);

myModule= is the name of module by which module is made

[] = this is use for dependency like this module depends on which module right now don’t worry about it we will discuss it

Now how will we use this module ?

Simple now in our html we will put in ng-app=”myModule”

in below module active on all page

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

<html ng-app="myModule">// active on all html element

<head>

<title></title>

</head>

<body>

</body>

</html>

in below this is active on a specific div.

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<div ng-app="myModule">// active on div element

</div>

</body>

</html>

After initialize module we will need to write our all logic by which we play with angular for this we need $scope, ng-controller,directive ,service,routing.