Learn Complete AngularJS in 5 Steps (Step 1 of 5)

Learn Complete AngularJS in 5 Steps (Step 1 of 5)

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


and for Angular we will write

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

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.

  •  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

in below this is active on a specific div.

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 .

  • http://wayou.github.io/ Wayou Liu

    nice work!

    • http://www.maddyzone.com/ Maddyzone

      Thanks for giving your time @wayouliu:disqus

  • MohamedJubair
    • http://www.maddyzone.com/ Maddyzone


  • Ramesh Raj

    Superb Job !!! i have nothing to say about it.

  • freddy

    Thanks still on the progress learn angular js