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

 

 

Published Saturday, January 25, 2014 11:26 AM by shiju

Comments

# re: Demo SPA App for ASP.NET Web API 2 and AngularJS

Monday, January 27, 2014 10:50 AM by Alex P.

Why do you create new deferred in locationSvc instead of returning promise from $http call?

# re: Demo SPA App for ASP.NET Web API 2 and AngularJS

Monday, January 27, 2014 2:32 PM by AngularJS Blog

Thanks for sharing it. Would be good if you explain it in more detail.

# re: Demo SPA App for ASP.NET Web API 2 and AngularJS

Tuesday, January 28, 2014 3:21 AM by shiju

@Alex P - Thanks for point out this. In our next drop, we will do a major refactoring for services. And would like replace the $http service with $resource.  

# re: Demo SPA App for ASP.NET Web API 2 and AngularJS

Tuesday, January 28, 2014 3:46 AM by shiju

@AngularJS Blog - I will provide more write-up on the app after the next refactoring of the app.

# re: Demo SPA App for ASP.NET Web API 2 and AngularJS

Wednesday, January 29, 2014 4:31 AM by Romero

we are in 2014.

Why nobody's using AngularJs 1.2??????

# re: Demo SPA App for ASP.NET Web API 2 and AngularJS

Wednesday, January 29, 2014 4:46 AM by shiju

@Romeo - Our next drop will be written in AngularJS 1.2.10

# re: Demo SPA App for ASP.NET Web API 2 and AngularJS

Wednesday, February 5, 2014 4:16 AM by Ted van der Veen

Great reference project, thanks! One question, why didn't you use TypeScript for the client side bits?

# re: Demo SPA App for ASP.NET Web API 2 and AngularJS

Wednesday, February 5, 2014 6:39 AM by shiju

@Ted van der Veen - There is not any specific reason. We just wanted to stick with basic JavaScript. You can take a fork for this project where you can leverage TypeScript.

# re: Demo SPA App for ASP.NET Web API 2 and AngularJS

Sunday, February 9, 2014 10:15 AM by tjoudeh

Thanks for sharing, AngularJS is the framework for client side development, I've already blogged a tutorial (4 parts) which uses AngularJS, ASP.NET WebAPI, Foursquare API, and Bootstrap UI, you can check the demo app on: explore4sq.azurewebsites.net and the tutorial on: http://bit.ly/1eKhlF4

Leave a Comment

(required) 
(required) 
(optional)
(required)