AngularJS MVC and Scopes

AngularJS MVC Architecure

MVC stands for model view controller. It is a software design pattern for developing web applications. It is very popular because it isolates the application logic from the user interface layer and supports separation of concerns. The controller receives all requests for the application and then works with the model to prepare any data model by the view. The view then uses the data prepared by the controller to generate a final presentable response. The MVC abstraction can be graphically represents as follows


1. Model

It is responsible for managing application data. It responds to the request from view and to the instructions from controller to update itself.

2. View

It  is responsible for displaying all data or only a portion of data to users. It also specifies the data in a particular format triggered by the controller’s decision to present the data.


It is responsible to control the relation models and views. It responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data models.

AngularJS Scopes

Scope is a special JavaScript object which plays the role of  joining controller with the views. Scope contains the model data. In controller, model data is accessed via $scope object.



Code Explanation

  1. Scope is passed as first argument to controller during its constructor definition.
  2. $scope.firstName and $scope.lastName are the models.
  3. We have set values to models which will be reflected in the application module whose controller is myController.



What do you think?

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s