Angular 2

What is the Goal of Angular 2?

“Angular 2 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.

Hide   Copy Code

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.

Hide   Copy Code

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

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.

Hide   Copy Code

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.

Hide   Copy Code

<input type="text" />

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.

Javascript Functions

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.

Pre-requisite for Angular 2 before you start

In my initial journey of learning Angular 2 I realized that Angular 2 by itself is easy to understand. But Angular 2 uses lot of JavaScript open sources and if you do not know these open sources Learning Angular 2 would become extremely difficult.
So we would recommend spending your some time going through the below videos and making notes around the same:-

Topic name	YouTube URL source
Node JS	https://www.youtube.com/watch?v=-LF_43_Mqnw
Type Script	https://www.youtube.com/watch?v=xqYD8QXJX9U
System JS	https://www.youtube.com/watch?v=nQGhdoIMKaM
Common JS concept	https://www.youtube.com/watch?v=jN4IM5tp1SE

Quelle:
https://www.codeproject.com/Articles/1174685/Learn-Angular-step-by-step-for-Beginners-Lab