What is Angular?. The Complete Angular Developer Course 2023 [Videos].

Angular is an open-source front-end development platform developed by Google that makes it easy to build Mobile and Desktop web applications. Angular now comes with the latest features such as templates, dependency injection, Forms, Pipes, HTTP Service, component, Directives, etc. which are basically needed to build a complex and sophisticated application that lives on the web, mobile, or the desktop.

“Angular is an open-source JavaScript framework that simplifies binding of code between JavaScript objects and HTML UI elements.”

Let us try to understand the above definition and also why we need angular with an example. In the following image, we have written a simple JavaScript function with the name “Customer” and as part of the function, we have initialized one property with the “EmployeeName”. Then we have also created an object called “Emp” which is of the “Employee” type.

Now let us say in the above Employee object we want to bind an HTML text box called “TxtEmployeeName”. In other words, when we do any changes in the HTML TxtEmployeeName text box, then the changes should be get reflected into the EmployeeName property of the employee object. Similarly, when we do any changes in the EmployeeName property of the employee object, then that changes should also be reflected or updated into the TxtEmployeeName text box in the UI.

In order to achieve the above requirement between the UI (TxtEmployeeName textbox) and the object (EmployeeName property), as a developer, we need to write two JavaScript functions as shown in the below image. The UItoObject function will take the data from UI i.e. from the TxtEmployeeName textbox and sets it to the EmployeeName property of the employee object. On the other hand, the ObjecttoUI function takes data from the employee object (EmployeeName property) and sets it to UI element i.e. TxtEmployeeName textbox.

So, if you analyze the above code visually, then it looks like something as shown in the below image. Here, both the javascript functions (UItoObject and ObjecttoUI) are doing nothing but binding code logic between the UI to object.

Now the same code can be written in Angular as shown below. With the following piece of code, whatever you type in the textbox, it will automatically update the same in the EmployeeName property of the “Employee” object, and when the EmployeeName property of the “Employee” object gets updated, the same also updates the UI textbox.

Now, if you analyze the above code visually, then you will end up with something as shown in the below image. You have the VIEW which is nothing but your HTML, your MODEL objects which is nothing but your JavaScript functions, and the binding code in Angular which will bind the value between the UI and Object.

Now that binding code has different vocabularies in industry. They are as follows

1. ViewModel: As it connects the “Model” and the “View”.
2. Presenter: As it contains the presentation logic.
3. Controller: As it controls how the view and model will communicate with each other.

To avoid this vocabulary confusion Angular team has termed this binding code as “Whatever”. Its that “Whatever” code that actually binds the UI and the Model. So, concluding the whole goal of Angular is Binding, Binding, and Binding.