MVC Patterns in AngularJS

Asirinaidu P
Jul 24, 2017 · 3 min read

AngularJS is an Opensource and Powerful JavaScript Library. It is widely using in Single Page Applications. AngularJS extends the HTML DOM with added attributes to make it more response with most of the user action.

AngularJS MVC patterns:

Model View Controller or more formally called as MVC, is a software application design pattern for developing web applications. A Model View Controller design pattern contains three primitives. In AngularJS application, MVC can be implemented using HTML and JavaScript. HTML is used for developing view pages whereas JavaScript is used for model and controller objects. Most emerging technology stacks are used by experienced web developers to make a web application more efficient and robust. Now let’s dive into the implementation of MVC in AngularJS

· Model — It is primitively responsible for maintaining data

· View − It is responsible for displaying either some or complete data object

· Controller — Controller is the core component for MVC implementation. It plays a major role in various interactions between view and a model object.

MVC is more popular because it isolates business logic from user interface layers. Generally, the controller receives user requests from an application and then works with the model to prepare any data needed by the view. The view object then uses the data prepared by the controller to generate a final presentable response. Below diagram represents how interactions happen between different layers.

Model Layer

The model layer will contain the data to be displayed as well as the data from input to be collected. Here the data could be any of the input field or a form. Models may contain a function that can be invoked at the time when an action is performed by a user or an external event triggered. Here in AngularJS, $scope object could be injected into controller so a model can be used directly.

The View

The major purpose of a view is to present data in a specific format. View supports some of the script based templates to make it very efficient visual. In AngularJS views can be constructed with HTML. In single page application only some portion of the application considered as view. It is important in AngularJS that specific element in the page as a view giving you more control over the container.

The Controller

Controller plays a key role in pulling the model object used by the view and setting up any required dependencies to render. Generally, controller receives input from web client performs validation data and then performs business operation, during this operation it may modify the state of the model object. In AngularJS, controller is resolved by the name ng-controller directive. The controller object must be registered with AngularJS application that to be used by name. To register manually in the JavaScript variable to use in AngularJS application, you should use a reliable approach.

Reach me to know more about the further process.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade