AngularJS MVC

MVC is one of the most advanced and popular web development frameworks. MVC stands for model, view and controller which are basically three components of the framework. Let’s briefly explain these components. After that we shall see how AngularJS MVC works.

Model

The model component of MVC architecture is responsible for storing all the application data. For instance, if you are developing a database application, all the interaction with the database will be done via Model component. Also, storage of in-memory data is also the responsibility of the model. In short, all the application data is stored in models.

View

View are responsible for creating user views or front ends of the application. Everything you see on a webpage is actually generated via views.

Controller

Controller is a backbone of MVC architecture. It is responsible for processing user requests, saving data to the model and passing model to the views. Basically it acts as a moderator between views and models.

MVC architecture fosters separation of concerns. Each component in MVC performs its own functionality. This results in loose coupling where you can easily update one part of the application without disturbing the other.

AngularJS MVC Example

We have been saying that AngularJS is based upon MVC architecture. Let us see a simple example to understand how AngularJS exploits MVC.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>

    <body ng-app = "subjectapp">
      
  <!--  this connects view with controller function-->
      <div ng-controller = "SubjectController" >
         <h1>You {{Subject.Mathematics}} in Mathematics</h1>
      </div>
      
        
    <!--this is where model is created inside controller-->
      <script>
         angular.module("subjectapp", [])
         
         .controller("SubjectController", function($scope) {
            $scope.Subject = {};
            $scope.Subject.Mathematics = "Passed";
         });
      </script>
      
   </body>
    
</html>

Download the code Try the code

Have a look at the above code. First, go to the script section in the end of the body tag. This is where controller module, controller function the model is created. Here the controller function is the “SubjectController”, and to this function $scope object is passed. The $scope object is used to create Model in AngularJS. In above example a model named “Subject” has been created. Inside the model a variable “Mathematics” has been initialized with a value of “Passed”.

Now to bind your view to the model, you have to wrap view within an element with attribute “ng-controller”. The value for “ng-controller” should be the controller function which has the model which is to be displayed by the view. Since, the view we have displays the value for “Subject” model which is inside the “SubjectController” function, so the value of “ng-controller” will be “SubjectController”. To access the value of the variable within the model in view, use double opening and closing parenthesis. Within the parenthesis write the name of he model followed by dot operator and the variable name e.g {{Subject.Mathematics}}. This is how AngularJS MVC works.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .