Learn Angularjs Step by Step– Lab 1

Contents

Learn AngularJS Step by Step – Lab 1

Introduction

Step 1:- Creating a simple HTML hello world project

Step 2:- Get AngularJS framework

Step 3:- Applying ng-controller ,ng-model and expressions

Step 4:- ng-app and understanding scoping

Step 5:Bootstrapping the project and seeing the results

Final Complete code

What in Next Lab ?

Introduction

AngularJS is one the most talked JavaScript framework. Rich bindings of Angular make HTML and Javascript object interaction like a breeze. The core reason why Angular was born was binding, binding and binding. It’s a binding framework it binds the HTML UI with Javascript objects.

By doing so it reduces lot of interaction code we need to write between HTML and Javascript objects.

For the same reason Angular team also named it as a MVW framework. Where “M” stands for javascript objects , “V” stands for HTML UI and “W” stands Whatever code that binds the model and UI. Lot of people call this whatever code as gel code , behind code , view model and so on.

To understand Angular MVW framework concept I would suggest you to see the below 1 hour youtube video which explains the concept in more detail.

So in this demo we will create simple UI

Step 1:- Creating a simple HTML hello world project

So let us go ahead and create a simple project and get angular in it. Now when we create any project in visual studio it always has that Microsoft stamp attached to it.

I mean for example when you create an empty ASP.NET Web application you would get“Web.config” files , ASPX files etc. These files are very much Microsoft specific.

Now to maintain the purity of angular we would like create a simple project which does not have Microsoft stamp on it. But at the same time we would like to get the benefits of visual studio intellisense.

This would be a simple project with just HTML , CSS , JS files and Angular files. So create a simple folder in your hard drive and open visual studio and click fileàopenàWebsite as show in the below figure. When you open a folder as website , visual studio does not add unnecessary files like web.config and global.asax files etc.

And give the path of the folder as shown in the below figure.

Once you have done you would see a very simple project which does not have anything. It just has a simple project with no Microsoft specific files.

In this project let us add a simple HTML page and name it as “HelloWorld.html”.

 

In thisHTML page we will create a simple input text box called as “txtHello” and this text box will bind with “Hello” javascript function / class.

You can see the below code where we have the hello world text box and the javascript function “Hello” and our goal is to bind the text box with the javascript function.

And now we would be using Angular to bind these two entities.

Step 2:- Get AngularJS framework

Now that we have the HTML UI and Javascript class in place let us first get AngularJS framework. Right click on project and click Manage NuGet Packages as shown in the below figure.

Search Angular in the search text box and install “AngularJS” core from the list. You can see lot of other Angular packages those are extensions of Angular. We will see the other packages later on gradually.
The most important is Angular core so click on install and get it.

At the Time of installation the below dialog box will be appear (select project) click ok.

Once installed you can see the Angular files in the scripts folder.

Now reference the “Angular” file using the script tag as show in the below code( see the bold lines).

Step 3:- Applying ng-controller ,ng-model and expressions

Now in order to bind the “HelloWorld” class with hello HTML text box we need to do two things :-

• Create an instance of “HelloWorld” class.
• Second set the property of the “HelloWorld” object to the textbox.

For this we need to use “ng-controller” and “ng-model”. “ng-controller” and “ng-model” are termed as directives. Remember angular is a declarative programming language.

Declarative means you just apply the directive and things will work. In case you are new to this declarative work I would suggest you to quickly see the below video link where its explained with a example https://youtu.be/0kmdjqgO9IY?t=15m33s

“ng-controller” directive creates an object of “Helloworld” controller and binds it with the UI DIV tag and “ng-model” binds the property with textbox with “txtHello” property.

To display the property on the screen we need to expression “{{}}” as shown in the below code. So when we type in the text “txthello” it will get displayed inside the “div1” tag.

Step 4:- ng-app and understanding scoping

So if “ng-controller” directive creates instances , what will happen if you have multiple “ng-controller” directives in your HTML page as shown in the below code. Will it create two instances or one instance ?.

Think about it….

Obviously as a developer you would like different instances of “HelloWorld” to bind with both the DIV HTML UI. That’s what exactly AngularJS does he creates two different instances.

But now if there are two instances in the same HTML page what is the scope of these two instances , is it full HTML page or something else ?.

The scope of these two instances is the start of the tag "<div> and end of '' </div> tag. These instances are created by angular automatically when angular encounters “ng-controller” tag.

Now there can be a situation where want these controller instances to communicate with each other , share some common data. That’s where we have something called as “ng-app”.

“ng-app” creates a top object which has control of all controller objects and they also help to communicate shared data between the controller instances.

Step 5:Bootstrapping the project and seeing the results

So now that we are all setup we need some code which help to kick off angular. We would like angular to start creating the controller objects ,ng-app objects and do the binding.

So we need two lines of code as shown below. The first line creates the app instance and the second line adds the controller object to the app.

var myApp = angular.module("myApp", []);
myApp.controller("HelloWorld", Hello);

So that’s it , press control + f5 and see the fun of automatic binding in action. The time you type on the textbox expression are updated.

Final Complete code

Below is the complete source code for the same.

What in Next Lab ?

In the next Lab we will see how use events and validations in Angular.

CodeProject