Step by Step AngularJS series - Part-I


This is a first part of Step-by-Step AngularJS series. In this series, we will discuss and learn AngularJS as per our ease. In this series we will start with very basics and gradually go with few complex code/examples.

Step by Step AngularJS series - Part-I

Background


In these days, JavaScript framework are on the top. I was trying to dig my head into AngularJS an awesome JavaScript framework.

Introduction


This is a first part of Step-by-Step AngularJS series. In this series, we will discuss and learn AngularJS as per our ease.
In this series we will start with very basics and gradually go with few complex code/examples.

What is AngularJS?


AngularJS is a JavaScript framework and developed by Google and it is based on MVC framework like other frameworks eg. BackboneJS and EmberJS etc.
Most important it is an opensource. If you want to add some new exciting features you're welcomed to do so ?
It gives developers to highly structured approach to develop rich web applications.

Where to/from get AngularJS


AngularJS can download as complete source code from https://angularjs.org/

How AngularJs talks with web pages?


AngularJS reads HTML with additional tags, attributes which provides great interactions within pages.
This is very good for Single Page Apps (SPA).

This is a very first and basic part of our series, so, we are not getting into depth of this topic. For more details of these additional things just visit: https://docs.angularjs.org/api

Create Simple AngularJS App


To start with AngularJS app creation, follow these step(s):

  • Download AngularJS from: https://angularjs.org/

  • Download Bootstrap from: http://getbootstrap.com/getting-started/#download

  • Create a view (for easiness here I used simple html page)

  • Create Service and Controller using Javascript


  • Use AngularJS in web page


    Add following code in your 'html', aspx or any other webpage:


    <body>
    <div class="jumbotron" ng-app>
    <h1>A simple AngularJS Page</h1>
    {{"This is a demo app"}}
    </div>
    </body>


    In above snippet we added ng-app. This is nothing but a root element of our AngularJS page.
    We can put this directive anywhere but mostly we put this with or . Here, we use this diective with
    ,
    which makes it a root level container. The curly braces {} tells angular to compile the things.

    Lets take a look into following snippet, where we just removed the ngApp directive:


    <body>
    <div class="jumbotron">
    <h1>A simple AngularJS Page</h1>
    {{"This is a demo app"}}
    {{3}} + {{7}} = {{3+7}}
    </div>
    </body>


    In above, contents with {{}} are not executed.

    Now, lets re-write above code using ng-app


    <body>
    <div class="jumbotron" ng-app>
    <h1>A simple AngularJS Page</h1>
    {{"This is a demo app"}}
    {{3}} + {{7}} = {{3+7}}
    </div>
    </body>


    Now it will give us the desired output.

    Here, is the complete code-snippet:


    <html >
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lets start learning AngularJS step-by-step</title>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap-theme.css" rel="stylesheet" />
    <script src="js/jquery-1.10.2.min.js"> </script>
    <script src="js/bootstrap.min.js"> </script>
    <script src="js/angular.min.js"> </script>
    <script src="js/app/myapp.js"> </script>

    </head>
    <body>
    <div class="jumbotron" ng-app="MyApp">
    <div ng-controller="MyCtrl">
    <h3>List of authors</h3>
    <ul ng-repeat="author in authors">
    <li>{{author}}</li> </ul>
    </div>
    </div>
    </body>
    </html>


    Closing notes


    In this part we learned basics of AngularJS, by rendering simply contents with the use of AngularJs.
    In coming parts, we will see more advance stuffs with more examples.
    A complete source code of simple angular stuffs is available here: Simple AngularJS


    Article by Gaurav Kumar Arora
    Gaurav is a Microsoft Technology Specialist professional. He has awarded lifetime membership from Computer Society of India (CSI). He has more than 13yrs of experience in the industry. Currently, he is working in the capacity of Solution Architect with an MNC. He is serving to the various communities since 1999.

    Follow Gaurav Kumar Arora or read 157 articles authored by Gaurav Kumar Arora

    Comments

    No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: