ASP.NET Web API/AngularJS SPA Demo App Updated

A while ago, I had announced a single page application (SPA) demo, built with ASP.NET Web API 2 and AngularJS. Recently, we have been updated the source on both server-side and client-side. The current version (v1.1.0) of the demo app available on github at https://github.com/MarlabsInc/webapi-angularjs-spa. 

Summary of Changes in the v1.1.0

The information below provides the summary of the changes made on the current version:

  • API services and Web, app are separated into two projects - ResourceMetadata.API and ResourceMetadata.Web
  • ASP.NET Identity integrated to the REST API services.
  • Leveraged Microsoft.Owin.Security.OAuth on the REST API services.
  • AngularJS version changed to v1.2.11.
  • AngularJS factory $resource used for interacting with RESTful server-side data sources.( In the previous version, it was used $http for interacting with REST API services)
  • Leveraged AngularJS $http interceptors.
  • Task automation done with Gulp.js

Building and running the application

  1. Get the latest source from https://github.com/MarlabsInc/webapi-angularjs-spa
  2. Build the solution in Visual Studio 2013 to install Nuget packages.(This will automatically restore Nuget packages. Please ensure you have Nuget version 2.7 or higher)
  3. Before running the client Application (ResourceMetadata.Web), please ensure that the API project is running in IIS or IIS express.
  4. Config.js file at ResourceMetadata.Web/Scripts/config.js holds the api url used by the client application. Update this file to change the api url appropriately.
  5. If you haven't installed Node.js, download and install it from http://nodejs.org/
  6. Install gulp.js globally on your machine by running the command npm install gulp –g.
  7. Navigate to the directory of ResourceMetadata.Web project in command prompt and rum command npm install to install required Node.js modules onto the project.
  8. Navigate to the directory of ResourceMetadata.Web project in command prompt and rum command gulp build  to perform automation tasks before running the client app.
  9. Run the client application.

Please note that if you are using an old version (v1.0.0) of the demo app, please drop the existing database ResourceMetadata from your SQL server before running the application. For a reference for task automation with gulp.js, check out my blogs post Gulp.js : A Better Alternative to Grunt.js 

Upcoming features

  • Unit tests with Jasmine/Karma.
  • Leverage Browserify to bring Node.js require("module") syntax to the browser for better module management on the client-side.

Lot of people have been asking to me for providing documentation and articles for this project for building single page applications (SPA). I will provide few article about this project on bit later.

You can follow me on Twitter @shijucv

7 Comments

  • Thanks for the update, very interesting stuff. As a request for next drop (or maybe a mirror image version), could you update to use Typescript, including data type specifications, classes...
    Again, great job.

  • Do you have an issue list and roadmap to encourage other people to contribute?

    This is the best webapi/agularJs example I have seen, much, much better than those examples from microsoft, which is really purely demoware.

  • @J.W. Thanks very much. The issue list is available from https://github.com/MarlabsInc/webapi-angularjs-spa/issues. There is already a small set of Roadmap Targets. I highly encourage people for contributing to the projects.

  • I'm new to angular & web api and a video on how this solution was developed would be much helpful. Cheers!

  • Yes a video showing how to contribute or develop additional features and continuous integration on premise or on Azure would be great

    Thanks
    Rad

  • A video will be very much helpful for me as a beginner. Please provide at least the screen shots.

  • @ajithkkb - Few screen shots are available in the release notes (docs folder). We will provide few articles about the project later.

Comments have been disabled for this content.