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
- Get the latest source from https://github.com/MarlabsInc/webapi-angularjs-spa
- 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)
- Before running the client Application (ResourceMetadata.Web), please ensure that the API project is running in IIS or IIS express.
- 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.
- If you haven't installed Node.js, download and install it from http://nodejs.org/
- Install gulp.js globally on your machine by running the command npm install gulp –g.
- 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.
- 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.
- 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
- 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