Learn AngularJS : Hour 1

Who is not talking about Angular.JS? Undoubtedly it is most powerful framework (Not Library) to create Single Page Applications (SPA). In this Learn AngularJS series, I will focus on basics of Angular. This series will help you in getting started with AngularJS. In first hour we will write first AngularJS Apps and understand bootstrapping of AngularJS Application.

Hello World AngularJS Application

Best way to start learning is to write Hello World web app using AngularJS. Let us start with downloading AngularJS. Navigate to https://angularjs.org/ and click on Download button. You have various download options. I am going with Minified version of 1.3x. You are free to choose Uncompressed, Zip or even use CDN in your project. If you are using Visual Studio as development IDE then you can add AngularJS using Manage Nuget packages also.

image

I have downloaded minified version and added to demo project. To work with AngularJS, first we need to add reference of AngularJS.

image

As you see we need only one file to work with AngularJS. Now let us start writing a very simple application with AngularJS.

To start with I have created a div with following content.

image

On render we will get following output which is expected.

image

Let us convert above HTML in Angular Application. To do that we need to add Angular directive ng-app. This directory can be added at whole document level or body level or at the div level. I am adding at body level lie below,

image

Now On render we will get following output,

image

As you see now DOM has been converted to Angular Application, hence {{2+2}} has been evaluated to 4. Let us consider one more example, in below example we are binding ng-model directive to an expression.

image

As you type you will get data is getting printed from the model in expression. So Angular is binding data from model to expression very easily.

Bootstrapping of AngularJS Application

Now let us understand Bootstrapping of AngularJS Apps. Bootstrapping means how AngularJS can be initialize in application. There are two steps to do that,

  • Add reference of AngularJS using script. Recommended is to add reference at the bottom of page, such that app load time gets improved.
  • Next add ng-app directive at the root of the application i.e. on the HTML tag. This will auto bootstarp application.

Bootstrapping of Angular App occurs in three steps,

image

In further posts we will talk about Injector and Dependency Injection. In our example we put directive on the body element. To create root scope at whole application level, we need to put ng-directive at HTML level.

image

Let us conclude first hour of AngularJS learning. Full code for binding with static model is given below,

 


<!DOCTYPE html>
<html ng-app>
<head>
    <title>Angular Demo</title>
    <script src="Scripts/angular.min.js"></script>
</head>
<body>
    <div >
        Grade <input type="text" ng-model="grade" />
        <br/>
        Printing from Model :  
        <br/>
        {{grade}}
    </div>
</body>
</html>

On running this application you will get application that on typing from textbox value will be binded to DOM. I hope first hour of learning is useful. Thanks for reading.

10 thoughts on “Learn AngularJS : Hour 1

  1. Pingback: Dew Drop – July 14, 2014 (#1813) | Morning Dew

  2. Pingback: The Morning Brew - Chris Alcock » The Morning Brew #1651

  3. Pingback: Dew Drop – July 15, 2014 (#1814) | Morning Dew

  4. Hi DJ,

    I am not sure where to ask question to you in this portal.
    Please reply as soon as possible.

    Question : How can get the device information which open our mail template using C# ?

    Tricky Part : Information should get without click on any link in template but only when user open the mail.

  5. Pingback: Lindermann's Blog | Learn AngularJS : Hour 1

  6. Pingback: Learn AngularJS: Hour 3 | debug mode......

  7. Pingback: Learn AngularJS Hour 4: service in AngularJS and making HTTP call using $http | debug mode......

  8. Pingback: Learn AngularJS Hour 4: All about $scope object | debug mode......

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s