In the previous posts we saw in detail about MVVM pattern
and its support in AngularJS
In this post we shall see a practical implementation
of MVVM pattern in AngularJS, we will have an Asp.Net Web API service activing as the
model (Server Side) and 2 different views in AngularJS consuming the same
model, each view will have its own ViewModel ($scope and controller) and
display the data from the same model (Asp.Net Web API) in different formats.
JSON response from API Server, this is the common service call for both the
views, the model object is the same for both the views.
[
{
"PackageId": 1,
"Name": "Merge",
"Description":
"Merge Package",
"Status":
"New"
},
{
"PackageId": 2,
"Name":
"Delete",
"Description":
"Delete Package",
"Status":
"New"
},
{
"PackageId": 3,
"Name": "Update",
"Description":
"Update Package",
"Status":
"New"
}
]
View displaying contents in a List
<!-- http://localhost:42395/UILayer/PackageListView.html -->
<html ng-app="PackageListViewApp">
<head>
<meta charset="utf-8" />
<title>AngularJS ViewModel
- PackageListView</title>
</head>
<body ng-controller="PackageListViewController">
<table>
<tr>
<td colspan="4">{{title}}</td>
</tr>
<tr>
<td colspan="4"><hr /></td>
</tr>
<tr>
<td colspan="4">
<ul ng-repeat="Package in
ListViewModel">
<li>{{ Package.PackageId }} - {{
Package.Name }}</li>
</ul>
</td>
</tr>
</table>
<script src="ScriptLibrary/angular.min.js"></script>
<script src="Controllers/PackageListViewController.js"></script>
</body>
</html>
List View Controller (PackageListViewController.js)
var packageListViewApp
= angular.module("PackageListViewApp", [])
packageListViewApp.controller("PackageListViewController", function ($scope, $http) {
$scope.title = "Packages -
List View";
$scope.packageList = {};
$scope.ListViewModel = {};
var pkgList = [];
var i = 0;
//$scope.GetPackageList = function
(scope) {
$http.get("http://localhost:7630/api/Package")
.then(function (results) {
//Success;
try {
// JSON received
from the Server
$scope.packageList =
results.data;
//
// Iterate through
the JSON and create ViewModel object array
angular.forEach($scope.packageList, function (item) {
pkgList[i] = new
Package(item.PackageId, item.Name);
i++;
});
//
// Return ViewModel
object Array to the View
$scope.ListViewModel =
pkgList;
}
catch (err) {
alert("Error:
"
+ err.message);
}
}, function (results) {
//error
alert("Error:
"
+ results.data + "; "
+
results.status);
})
//}
});
var Package = function (PackageId, Name) {
this.PackageId = PackageId;
this.Name = Name;
};
View
displaying contents in a Grid
<!-- http://localhost:42395/UILayer/PackageListView.html -->
<html ng-app="PackageGridViewApp">
<head>
<meta charset="utf-8" />
<title>AngularJS ViewModel
- PackageGridView</title>
</head>
<body ng-controller="PackageGridViewController">
<table>
<tr>
<td colspan="4">{{title}}</td>
</tr>
<tr>
<td colspan="4"><hr /></td>
</tr>
<tr>
<td colspan="4">
<table border="1" style="padding:0 0 0 0;" cellspacing="0">
<tr>
<td>PackageID</td>
<td>Package Name</td>
<td>Description</td>
<td>Status</td>
</tr>
<tr ng-repeat="Package in
GridViewModel">
<td>{{ Package.PackageId }}</td>
<td>{{ Package.Name }}</td>
<td>{{ Package.Description }}</td>
<td>{{ Package.Status }}</td>
</tr>
</table>
</td>
</tr>
</table>
<script src="ScriptLibrary/angular.min.js"></script>
<script src="Controllers/PackageGridViewController.js"></script>
</body>
</html>
Grid
View Controller (PackageGridViewController.js)
var packageListViewApp
= angular.module("PackageGridViewApp", [])
packageListViewApp.controller("PackageGridViewController", function ($scope, $http) {
$scope.title = "Packages -
Grid View";
$scope.packageList = {};
$scope.GridViewModel = {};
var pkgList = [];
var i = 0;
//$scope.GetPackageList = function
(scope) {
$http.get("http://localhost:7630/api/Package")
.then(function (results) {
//Success;
try {
// JSON received
from the Server
$scope.packageList =
results.data;
//
// Iterate through
the JSON and create ViewModel object array
angular.forEach($scope.packageList, function (item) {
pkgList[i] = new
Package(item.PackageId, item.Name, item.Description, item.Status);
i++;
});
//
// Return ViewModel object Array to the
View
$scope.GridViewModel =
pkgList;
}
catch (err) {
alert("Error:
"
+ err.message);
}
}, function (results) {
//error
alert("Error:
"
+ results.data + "; "
+
results.status);
})
//}
});
var Package = function (PackageId, Name,
Description, Status) {
this.PackageId = PackageId;
this.Name = Name;
this.Description = Description; this.Description =
Description;
this.Status = Status;
};
Output : List View
