Click here to Skip to main content
14,548,287 members

Learn Angularjs Step by Step – Lab 1

Rate this:
4.81 (23 votes)
Please Sign up or sign in to vote.
4.81 (23 votes)
7 Feb 2016CPOL
Learn Angularjs Step by Step – Lab 1

This article  was written in Angular 1.X. With lot of changes Angular went through i have rewritten the complete article using Angular 4 , please do refer this article to avoid further confusion   Learn Angular 4 step by step  

Table of Contents

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 of the most talked JavaScript frameworks. 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 which binds the HTML UI with JavaScript objects.

Image 1

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 for 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.

Image 2

To understand Angular basics using latest version and to practically run your first app, I would suggest you see the below 1+ hour youtube video which explains the concept in more detail.

Image 3

If you are learner preparing for interview then below is the video covering Angular interview Q & A: -

Image 4

So in this demo, there will 16 chapters covered showing all possible practical steps.

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 to 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.

Image 5

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

Image 6

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

Image 7

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

Image 8

 

Image 9

In this HTML 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.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<script>
function Hello() {
this.txthello = "HELLO WORLD";
}
</script>
<body>
<div id=" HelloWorldScreen">
<input id="txthello" type="text" /><br /><br />
</div>
</body>
</html>

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:

Image 10

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.

Image 11

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

Image 12

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

Image 13

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<script src="Scripts/angular.js"></script>
..... Code deleted for simplification

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 it's explained with an 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 use the expression “{{}}” as shown in the below code. So when we type in the text “txthello” it will get displayed inside the “div1” tag.

<div id=" HelloWorldScreen" ng-controller="HelloWorld">
<input ng-model="txthello" id="txthello" type="text" /><br /><br />
<div id="div1">{{txthello}}</div>
</div>

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….

<div id=" HelloWorldScreen" ng-controller="HelloWorld">
<input ng-model="txthello" id="txthello" type="text" /><br /><br />
<div id="div1">{{txthello}}</div>
</div>
<div id=" HelloWorldScreen" ng-controller="HelloWorld">
<input ng-model="txthello" id="txthello" type="text" /><br /><br />
<div id="div1">{{txthello}}</div>
</div>
Obviously, as a developer, you would like different instances of “HelloWorld” to bind with both the DIV HTML UI. That’s exactly what AngularJS does as it 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 <di-v> tag "<div> and end of '' </div> tag. These instances are created by angular automatically when angular encounters “ng-controller” tag.

Image 14

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”.

Image 15

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.

<body ng-app="myApp">
<div id=" HelloWorldScreen" ng-controller="HelloWorld">
<!--Code removed for simplification ->
</div>
</body>

Step 5:- Bootstrapping the project and seeing the results

So now that we are all setup, we need some code which will 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.

Image 16

Final Complete code

Below is the complete source code for the same.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<scriptsrc="Scripts/angular.js"></script>
<script>
function Hello($scope) {
        $scope.txthello = "HELLO WORLD";
            }
varmyApp = angular.module("myApp", []);
myApp.controller("HelloWorld", Hello);
</script>
</script>
<body ng-app="myApp">
<div id=" HelloWorldScreen" ng-controller="HelloWorld">
<input ng-model="txthello" id="txthello" type="text" /><br /><br />
<div id="div1">{{txthello}}</div>
</div>
</body>
</html>

What in Next Lab ?

In the next lab, we will see how to use events and validations in Angular.

License

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

Share

About the Author


Comments and Discussions

 
Suggestionfinal working code with minor correction Pin
planetpankaj1234115-Sep-17 4:25
Memberplanetpankaj1234115-Sep-17 4:25 
QuestionAny Lab 2? Pin
Jeff Bowman6-Jun-16 16:07
professionalJeff Bowman6-Jun-16 16:07 
QuestionNext up? Pin
Jeff Bowman30-Mar-16 15:38
professionalJeff Bowman30-Mar-16 15:38 

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.

Article
Posted 7 Feb 2016

Stats

54.9K views
34 bookmarked