"AngularJS is a JavaScript framework which simplifies binding JavaScript objects with 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 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.
Now the same above code can be written in Angular as shown below. The javascript class is attached to a HTML parent div tag using "ng-controller" directive and the properties are binded directly to the text box using "ng-model" declarative.
So now whatever you type in the textbox updates the "Customer" object and when the "Customer" object gets updated it also updates the UI.
<div ng-controller="Customer">
<input type=text id="txtCustomerName" ng-model="CustomerName"/>
</div>
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.
Comments
Post a Comment