Learning AngularJS step-by-step

A few months back, I have a requirement to build some kind of dashboard reporting system using angularjs. It is a very for me I did not know much about this.

I started learning angularJS, here under I am sharing my learning using very first example, I have created during my learning days of angularJS. I bet, you will find this as simplest as you can think. Also, I am planning to write as much as I can on angularJS so, I can share my learning with all 🙂

What is angularJS

Here is all what I read from wiki: angularJS:

angularJS is a JavaScript framework and maintained by Google and is based on MVC framework like BackboneJS and EmberJS, (interesting thing is “this is an opensource”) you can see, amend angularJS source code and ask its owner to review your changes.

Purpose of angularJS

As I learned, main purpose of angularJS is to boost-up/augment web-based applications in the capacity of MVC (model-view-controller), in such a way that both development and testing make easier.

How does angularJS work

As said above, its a frameowrk written in JavaScript, in a web page, it reads HTML, which contains special/additional tag attributes (these are defined here : angularJS documentation).
After reading these tag attributes, it works on these custom attributes “as & for what to work”, binds the input/output of page to model using JavaScript variables. The good thing about these variables is that one can be manually set or retrieved values using static or dynamic JSON resources.

Definition of angularJS

All in my words:
“a javascript MVC framework, written in javascript, is a cross-platform, augments web-based application with custom attribute tags for standard HTML, can get or set input/output using static/dynamica javascript variables”

Importants about angularJS

Importants of Angular JS
Official Name: AngularJS
Written or maintained by: Google Inc.
Released on: 2009
Current Release ver.: 1.2.13 (as on dt. Feb 14, 2014)
Develop using: Javascript
Type: Client side/cross-platform
Links angularJS
documentation

Start building simple angularJS example

Hereunder, I define step-by-step process to building a very simple startup app using angularJS. Note that for this example, I used Visual Studio 2013:

  1. Start visual studio
  2. Select a project (add if you have an active solution or choose new project)
  3. Select web project
add web project

add web project

  1. Select empty template
select web template

select web template

  1. Now, from solution explorer, right click on your project and click on ‘Manage Nuget packages’
  2. From Nuget Manager – seacrh online ‘Angularjs’
install angularjs

install angularjs

  1. Click on install and click close, once installation done
  2. Expand scripts folder from solution explorer to see angular scripts
installed angular scripts

installed angular scripts

  1. Right click on your project and Add new html file as “index.html”
  2. Modify contents of html page generated by visual studio:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First AngularJS Page</title>
</head>
<body ng-app>
    <div>
        <h1>Here is a simple html table as on {{"February 22, 2014"}}</h1>
        <table>
            <caption><b>Importants of Angular JS</b></caption>
            <tbody>
                <tr>
                    <td height="26">Official Name:</td>
                    <td>AngularJS</td>
                </tr>
                <tr>
                    <td height="26">Written or maintained by:</td>
                    <td><a href="href=http://www.google.co.in/about/company/" title="Google Inc." target="_blank">Google Inc.</a></td>
                </tr>
                <tr>
                    <td height="26">Released on:</td>
                    <td>2009</td>
                </tr>
                <tr>
                    <td height="26">Current Release ver.:</td>
                    <td>1.2.13 (as on dt. {{"Feb 14, 2014"}})</td>
                </tr>
                <tr>
                    <td height="26">Develop using:</td>
                    <td>Javascript</td>
                </tr>
                <tr>
                    <td height="26">Type:</td>
                    <td>Client side/cross-platform</td>
                </tr>
                <tr>
                    <td height="26">Links</td>
                    <td width="676">
                        <a href="http://angularjs.org">angularJS</a>
                        <a href="http://doc.angularjs.org">documentation</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div>
        <table>
            <caption><b>Can do using angularJS</b></caption>
            <tbody>
                <tr>
                    <td height="26">Sum</td>
                    <td>1 + 9 = {{1+9}}</td>
                </tr>
                <tr>
                    <td height="26">Minus</td>
                    <td>1 - 9 = {{1-9}}</td>
                </tr>
                <tr>
                    <td height="26">Multiply</td>
                    <td>1 X 9 = {{1*9}}</td>
                </tr>
                <tr>
                    <td height="26">Divide</td>
                    <td>1 / 9 = {{1/9}}</td>
                </tr>
            </tbody>
            <p>and these are only few examples see source code of above and you can see the magic of &#123; &#123; &#125; &#125; curly braces</p>
        </table>
    </div>
    <script src="Scripts/angular.min.js"></script>
</body>
</html>

In above code, it is defined it self, how we can bind our data using curly braces, there are many more things.

  1. Run your application and see the result how angularJS render your things:
output of html

output of html

What to next?

See here more things at: http://angularjs.org and http://doc.angularjs.org
Get angularJS example code from:https://github.com/garora/somestuff

4 comments on “Learning AngularJS step-by-step”

  1. shyam

    Hey Gaurav
    Really thanks to give this easiest way to learn angularjs. I hope you will be going to post some more articles on angularjs.

  2. shyam

    In this article you have mentioned angularjs will make development and testing easy can you provide a good example showing how its working. Is it something like a unit testing or more

Leave A Reply