C# Guide - C#, Asp.Net, MVC, LINQ, jQuery and SharePoint Resources

Thursday, July 16, 2015

Model-View-ViewModel Pattern in AngularJS

In the previous post What is Model-View-ViewModel Pattern? we have seen in detail on the MVVM pattern its architecture and its use, in this post we shall see on how to implement MVVM pattern using AngularJS.

AngularJS implements its own client side MVC pattern, this makes it so flexible to adopt to the MVVM pattern, the objective of MVVM pattern is to provide a ViewModel which binds with the view thereby isolating the binding between the View and the Model layers, this approach supports having multiple views for the same model.
Since AngularJS has its own model ($scope) and controller layers which are close to the client layer, we can treat the combination of $scope and AngularJS controller to play the role of view model, while the service side Model/API will act as the model. This approach achieves the objective of having multiple views for the same model, thereby enabling MVVM pattern using AngularJS

The difference between MVC and MVVM pattern in AngularJS it that in MVC pattern the service side model and the AngularJS model ($scope) have the same objects and properties they act as the Models for the server side and client side. In MVVM pattern the AngularJS model ($scope) is different from the server side model objects, the AngularJS model is more in sync with the view layer.

What is Model-View-ViewModel Pattern?

MVVM (Model-View-ViewModel) pattern is an extension of the MVC pattern, the MVVM pattern adds another layer called ViewModel which is a model representation more in sync with the view, the controls in the view are bound to the properties in the ViewModel and any event which is raised from the View are handled by commands in the view model.

The properties in the ViewModel are bound to the view objects, any changes made to the properties in the ViewModel will get automatically reflected in the View.

The View layer is totally isolated from the Model, the ViewModel interacts with the model and transforms the model objects in such a way that is binds with the view.

MVC using AngularJS Overview

What is MVC Architecture?

AngularJS Models

AngularJS Views

AngularJS Controllers

In the post What is MVC Architecture? We saw the various layers of MVC architecture and we saw that that model is the representation of data in the MVC architecture. In this post we shall see more in detail about controllers in AngularJS MVC architecture

Controllers are the main components in the MVC architecture which controls the data and event flow in the application. Defining a controller is done in 2 parts, first we need to create a JavaScript controller function which accepts $scope as parameter, remember $scope is the representation of model in AngularJS MVC framework, next we need to reference the controller function in the view using the ng-controller directive. Once this is done any property/data defined in in the $scope in the controller function is made available in the view layer.

The below example defines a controller function nameController sets properties FName & LName to $scope in the controller function, the controller is tied to the view using ng-controller and the properties FName & LName are bound to the controls in the view.

<html ng-app>
<head>
    <meta charset="utf-8">
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
    <script>
      function nameController($scope){
              $scope.FName = 'John';
              $scope.LName = 'David';
      }
    </script>
</head>
<body>
          <div ng-controller="nameController">
                   First Name: <input type="text" ng-model="FName"><br/><br/>
                   Last Name: <input type="text" ng-model="LName"><br/><br/>
                   Your Name is :{{FName}}, {{LName}}
          </div>
</body>
</html>

Output:

AngularJS Views

In the post What is MVC Architecture? we saw the various layers of MVC architecture and we saw that that model is the representation of data in the MVC architecture. In this post we shall see more in detail about views in AngularJS MVC architecture.

In a simple application the HTML page is the view layer, data from the model object is bound to the view layer using ding directives and functions from the controller, AngularJS also supports single page applications which can support multiple views, in these cases we will just have a single HTML page which can display multiple views dynamically, this is made possible using the ng-view and ng-template directives.

The ng-view is a placeholder directive defined on the main page, it indicates that this div/panel will be replaced with different views at run-time based on the routing defined on the page URL.

Below is the syntax for using ng-view directive.

<div ng-view=""></div>
<ng-view></ng-view>

As we see above ng-view directive can be represented as a tag or added as an attribute to the div tag. At runtime the content of this div/panel will be replaced with content from the current Route.