Click here to Skip to main content
13,350,029 members (50,095 online)
Click here to Skip to main content
Add your own
alternative version

Stats

32.3K views
19 bookmarked
Posted 25 Oct 2014

Learning AngularJS Step-by-step

, 25 Oct 2014
Rate this:
Please Sign up or sign in to vote.
Steps to learning AngularJS

A few months ago, I had a requirement to build some kind of dashboard reporting system using Angularjs. It was new to me. I did not know much about this.

I started learning angularJS, here below, I am sharing my learning using my very first example that I created while I was learning 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 everyone. :)

What is AngularJS

Here is all that I read from wiki: AngularJS:

AngularJS is a JavaScript framework and maintained by Google and is based on MVC framework like BackboneJS and EmberJS, (the 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, the 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 are made easier.

How Does AngularJS Work

As said above, it's 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:

Quote:

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/dynamic javascript variables

Important Things about angularJS

Important things 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

Here below, 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
  4. Select empty template

    select web template

    Select web template
  5. Now, from solution explorer, right click on your project and click on ‘Manage Nuget packages’
  6. From Nuget Manager – search online ‘Angularjs’

    install angularjs

    Install angularjs
  7. Click on install and click close, once installation has been done
  8. Expand scripts folder from solution explorer to see angular scripts

    installed angular scripts

    Installed angular scripts
  9. Right click on your project and Add new HTML file as “index.html
  10. 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 the above code, it is defined itself, how we can bind our data using curly braces, there are many more things.

  11. Run your application and see the result how angularJS renders your things:

    output of html

    Output of HTML

What To Do Next?

For more things, see http://angularjs.org and http://doc.angularjs.org
Get angularJS example code from https://github.com/garora/somestuff

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Gaurav Aroraa
Architect
India India
There is no age limit for learning and its never late, to start.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
GeneralMy vote of 1 Pin
dr.samuel.john26-Oct-14 22:15
memberdr.samuel.john26-Oct-14 22:15 
GeneralRe: My vote of 1 Pin
Gaurav.Kumar.Arora26-Oct-14 22:39
memberGaurav.Kumar.Arora26-Oct-14 22:39 
GeneralRe: My vote of 1 Pin
_GP27-Oct-14 16:10
member_GP27-Oct-14 16:10 
AnswerRe: My vote of 1 Pin
Gaurav.Kumar.Arora27-Oct-14 23:24
memberGaurav.Kumar.Arora27-Oct-14 23:24 
QuestionMy vote ups Pin
Shuby Arora26-Oct-14 0:54
memberShuby Arora26-Oct-14 0:54 
AnswerRe: My vote ups Pin
Gaurav.Kumar.Arora26-Oct-14 1:01
memberGaurav.Kumar.Arora26-Oct-14 1:01 
AnswerRe: My vote ups Pin
Shuby Arora30-Oct-14 12:28
memberShuby Arora30-Oct-14 12:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.180111.1 | Last Updated 26 Oct 2014
Article Copyright 2014 by Gaurav Aroraa
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid