Demo SPA App for ASP.NET Web API 2 and AngularJS
In my previous post, I have announced SocialGoal, a reference web app for ASP.NET MVC 5 and EF 6 Code First. Today, I am announce the release of a demo single page application (SPA) for ASP.NET Web API 2 and AngularJS, developed by my team at Marlabs. The application is published on github at https://github.com/MarlabsInc/webapi-angularjs-spa. A release note is available in the docs folder of the project repository. The current version is an early first drop of the application, which we will continuously refactor, and later we will provide guidance for developing real-world client-side JavaScript apps and SPAs, including unit testing, task automation and performance optimizations.
The app is built with following technologies:
- ASP.NET Web API 2
- EF 6 Code First
- AutoMapper
- Autofac
- Semantic UI
- AngularJS 1.1.5
Choosing AngularJS as the Client-Side Framework
Last year, I had evaluated lot of Client-Side MVC Frameworks and finally chosen EmberJS and AngularJS as the finest frameworks for building SPA apps. Initially, I liked Ember more than AngularJS. After choosing Angular and Ember, we have developed a small app in both Ember and AngularJS, where I really liked Angular over Ember because of its simplicity and loosely-coupled architecture with better testability. I highly recommend both EmberJS and AngularJS for building single page applications.
In this app, we have made our controllers are light-weight where we divided the operations of an entity into multiple controllers.
The code block below provides a controller which handles the user interaction for HTTP Post and HTTP Put for an entity.
app.controller('locationAddCtrl', function ($scope,
$location, locationSvc, errorMngrSvc) {
$scope.addLocation = function (location) {
locationSvc.addLocation(location)
.then(function (data) {
$location.url('/Locations');
}, function (reason) {
errorMngrSvc.handleError(reason);
});
}
});
app.controller('locationEditCtrl', function ($scope,
$location, $routeParams, locationSvc, errorMngrSvc) {
$scope.location = {};
locationSvc.getLocation($routeParams.locationId)
.then(function (data) {
$scope.location = data;
}, function (reason) {
errorMngrSvc.handleError(reason);
});
$scope.editLocation = function (location) {
locationSvc.editLocation(location)
.then(function (data) {
$location.url('/Locations');
}, function (reason) {
errorMngrSvc.handleError(reason);
});
};
});
The code block below provides service functions which used by the above controller functions. Currently, we uses AngularJS service $http for calling REST services written in ASP.NET Web API 2. But later, we will replace it with AngularJS service $resource for invoking REST services. I really liked that AngularJS service $q is internally using JavaScript promises library Q for implementing promises in AngularJS. Q is my favourite promises library which I have been using with Node.js apps.
app.factory('locationSvc', function ($http, $q) {
return {
addLocation: function (location) {
var deferred = $q.defer();
$http({ method: 'post',
url: '/api/Locations', data: location })
.success(function (data) {
deferred.resolve(data);
})
.error(function (error) {
deferred.reject(error);
});
return deferred.promise;
},
editLocation: function (location) {
var deferred = $q.defer();
$http({ method: 'put',
url: '/api/Locations/'
+ location.Id, data: location })
.success(function (data) {
deferred.resolve(data);
})
.error(function (error) {
deferred.reject(error);
});
return deferred.promise;
},
getLocation: function (id) {
var deferred = $q.defer();
$http({ method: 'get',
url: '/api/Locations/' + id, data: location })
.success(function (data) {
deferred.resolve(data);
})
.error(function (error) {
deferred.reject(error);
});
return deferred.promise;
}
};
});
Source Code
The source code of demo SPA is available on github at https://github.com/MarlabsInc/webapi-angularjs-spa
You can follow me on Twitter @shijucv