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

mvc

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.

3.Controller

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.

Example:

 scope

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.

Output

scopeoutput

What do you think?

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s