Introduction to Angular JS — Part 2

Hey all!

Continuing with my series of blogs about Angular JS, today I will talk about the Software Architectural Pattern which can be used in AngularJS- MVC and MVVM.

You can read about the first blog here : https://medium.com/@BaaniLeen/introduction-to-angular-5-6ec714ca8717.

I was wondering about which architectural design pattern is followed by Angular, and read about a lot of mixed opinions, about which of them it belongs to. So finally I decided to blog this week about the same.

Let’s start with introducing MVC and MVVM in context of Angular JS.

Model View Controller (MVC)

It is a design pattern which is not specific to AngularJS but can be often seen in AngularJS. It consists of 3 components :

1. Model- It manages the data, logic and rules of the application, irrespective of user interface.
2. View- It is the User Interface, essentially the output representation of the information.
3. Controller- It accepts the input and converts it into commands for the controller and the view.

Let us consider an example :

Example of MVC Pattern in Angular

In the code snippet above, our text is represented by “helloText”. This is our model. The HTML part of the code above is our view. The controller updates the view by replacing “{{helloText}}” in the HTML with the helloText variable defined in the model, and thus manages the relationship between the model and the view.

In the MVC pattern, any change in the view does not reflect back in the model.

Another very useful feature in AngularJS is the 2 Way Binding, which keeps the model and view in sync at all times, i.e a change in the view updates the model and a change in the model automatically updates the view.

The 2 Way Binding enables the Model View View-Model (MVVM) Design Pattern in Angular.

Model View View-Model (MVVM)

It consists of 3 components :

1. Model
2. View
3. View-Model

The View Model is a function like controller which maintains the relationship between the model and the view. However the only difference it has from the controller is in the fact that any update in the model brings about a change in the view as well as vice versa ensuring 2 way binding.

Let’s consider an example about the same.

Example of MVVM Pattern in Angular

The above code takes input of number1 and number2 in two text boxes, adds them up and displays the result in the Result Textbox.

MVVM Architectural Design Pattern

Let’s start by considering the View. The view consists of the HTML code, what is visible on our webpage. We update the 2 text boxes, number1 and number2 by entering 2 and 5 into them respectively. As soon as any change is made in the view, the View Model automatically updates the modal to the entered values. The addition takes place in the View Model, and the value of result gets updated to 7, the sum of number1 and number2. This result is then displayed in the view.

Thus Angular JS, follows the Model View View-Model Architecture Pattern.