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 ?
Before you start what would you need to know ?
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?
and for Angular we will write
<!DOCTYPE html> <html ng-app="Test"><!-- here we say to angular that start from this tag--> <head> <title></title> </head> <body ng-controller="hello"> <!-- here angular take a command from us that it should execute hello function and it 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
<!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, !</h1> </div> </body> </html>
Type In Below input Box and See Angular Magic
Hello Test, !
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.
=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.
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
<!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.
<!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.
we will come it one by one.
So first start with $scope
so see my next article Role of $scope in AngularJS.
The Demo repository is available on Git https://github.com/riturajratan/learn-complete-angularjs-in-5-steps.
form here download source code for demo or clone it like below
git clone https://github.com/riturajratan/learn-complete-angularjs-in-5-steps.git
Please give your comments for your suggestion Thanks .