Introduction of Angular

Contents :

• Introduction of Angular
• Introduction
• How does this article teach you Angular ?
• Why do we need Angular ?

Introduction

Why should we learn Angularjs? , the below stack overflow graph says it all. Its popular, its hot with lot of job openings. This article teaches you Angular step by step via 11 great Labs. So if you are here to learn Angular then you are at the right place and surfing the right article.

AngularJS vs Angular, There are two versions of Angular the old is named as AngularJS and the new one is named as just Angular. So when someone says AngularJS it means Angular 1.X and when someone says JUST Angular its Angular 2/4.

Do watch my Learn Angular in 8 hours video series which teaches Angular step by step.

How does this article teach you Angular ?

The best way to learn Angular or any new technology is by creating a project. So in this step by step series we will be creating a simple Customer data entry screen project.

This project will have the following features:-

• Application should have capability of accepting three fields Customer name , Customer and Customer Amount values.
• Customer name and Customer codes are compulsory fields and it should be validated.
• Application will have a "Add" button which help us to post the current customer data to a Server. Once the data is added to the server it should displayed on the grid.
• Application will have a navigation structure wherein we will have logo and company name at the top , navigational link at the left and copy right details at the bottom of the screen.

So above is the road map of how this article will teach you angular. It has three phases: -

Theory Phase:- In this phase we will understand what is Angular and why do we need it.

Pre-requisite phase :- In this phase we will four important things Node, Typescript , VSCode , Module loaders ( SystemJS) and module bundlers ( Webpack).

Main learning phase :- This is where actual angular starts. In this we will be having 8 labs and while covering those labs we will creating the customer data entry screen project as discussed previously.

So do not wait any more start LAB by LAB and STEP by STEP.

★ Should I start from Angular 1, 2 or 4. Angular 1.X and 2.X are very much different. So even if you have done Angular 1.X you have to restart fresh from Angular 2.X. Angular 2.X and Angular 4.X are backward compatible so if you are learning Angular 2 you are learning Angular 4 and ahead. So people who are new to Angular just start from Angular 4 and this article teaches Angular 4.

Why do we need Angular ?

"Angular is an open source JavaScript framework which simplifies binding code between JavaScript objects and HTML UI elements."

Let us try to understand the above definition with simple sample code.

Below is a simple "Customer" function with "CustomerName" property. We have also created an object called as "Cust" which is of "Customer" class type.

function Customer() 
{
this.CustomerName = "AngularInterview";
}
var Cust = new Customer();

Now let us say in the above customer object we want to bind to a HTML text box called as "TxtCustomerName". In other words when we change something in the HTML text box the customer object should get updated and when something is changed internally in the customer object the UI should get updated.

<input type=text id="TxtCustomerName" onChange="UitoObject()"/>

So in order to achieve this communication between UI to object developers end up writing functions as shown below. "UitoObject" function takes data from UI and sets it to the object while the other function "ObjecttoUI" takes data from the object and sets it to UI.

function UitoObject() 
{
Cust.CustomerName = $("#TxtCustomerName").val();
}
function ObjecttoUi() 
{
$("#TxtCustomerName").val(Cust.CustomerName);
}

So if we analyze the above code visually it looks something as shown below. Your both functions are nothing but binding code logic which transfers data from UI to object and vice versa.

Binding Code

Now the same above code can be written in Angular as shown below. So now whatever you type in the textbox updates the "Customer" object and when the "Customer" object gets updated it also updates the UI.

<input type=text [(ngModel)]="Customer.CustomerName"/>

In short if you now analyze the above code visually you end up with something as shown in the below figure.You have the VIEW which is in HTML, your MODEL objects which are javascript functions and the binding code in Angular.

Now that binding code have different vocabularies.

• Some developers called it "ViewModel" because it connects the "Model" and the "View".
• Some call it "Presenter" because this logic is nothing but presentation logic.
• Some term it has "Controller" because it controls how the view and the model will communicate.

To avoid this vocabulary confusion Angular team has termed this code as "Whatever". It's that "Whatever" code which binds the UI and the Model. That's why you will hear lot of developers saying Angular implements "MVW" architecture.

So concluding the whole goal of Angular is Binding, Binding and Binding.

So let us first start with the pre-requisite Node and typescript.