ASP.NET Web API/AngularJS SPA Demo App Updated (webapi-angularjs-spa v1.2.0)

We have released an updated version for the single page application (SPA) demo built with ASP.NET Web API 2 and AngularJS. The current version (v1.2.0) of the demo app available on github at https://github.com/MarlabsInc/webapi-angularjs-spa. The following are the new features added in the webapi-angularjs-spa v1.2.0:

  • Added unit tests for client-side JavaScript with Jasmine.
  • Added paging with ng-Table.
  • Role based security for both server-side and client-side.

Here are the complete set of features in the current version:

  • REST API with ASP.NET Web API 2.
  • Server-Side security with ASP.NET Identity.
  • Single Page Application(SPA) with AngularJS.
  • AngularJS factory $resource for interacting with RESTful server-side data sources.
  • AngularJS $http interceptors.
  • AngularJS directives.
  • Task automation with Gulp.js
  • Unit tests for client-side JavaScript with Jasmine.
  • Paging using ng-Table.
  • Role based security.

JavaScript Unit Tests With Jasmine

In the current release, we have included unit tests for client-side JavaScripts, written with Jasmine. This provides unit tests for AngularJS Conrollers and Services. To run the unit tests, navigate to the directory of ResourceMetadata.Web project in command prompt, and run the command gulp tests which will redirect to the page SpecRunner.html, where results of the tests can view as shown in the below figure.

Role Based Security For The SPA 

The current version provides role based security for both server-side and client-side. The write opeartions for Location entity is restricted with admin user. For a normal user, UI elements for creating new Location is removed when the view templates are loading and the templates will put on the cache.

The figure below shows the UI of Location page for a normal user.

The figure below shows the UI of Location page for a admin user.

Source Code

For more information on the project and to download the source code, check out https://github.com/MarlabsInc/webapi-angularjs-spa

8 Comments

  • Thanks for providing this brilliant app.

  • HI I am getting below error while running gulp tests

    ReferenceError: module is not defined in http://localhost:8000/Scripts/test/spec/locationscontrollerspec.js (line 44)

    @http://localhost:8000/Scripts/test/spec/locationscontrollerspec.js:44 Env/this.describe@http://localhost:8000/Scripts/libs/jasmine-2.0.0/jasmine.js:613 jasmineInterface.describe@http://localhost:8000/Scripts/libs/jasmine-2.0.0/boot.js:37 @http://localhost:8000/Scripts/test/spec/locationscontrollerspec.js:3

  • I love the example and am looking forward to the roadmap item Next-generation hybrid mobile apps with HTML5 and AngularJS. Are there any plans to integrate with Asp.Net Identity 2?

  • @Brad - We are already using Asp.Net Identity. We will migrate it to Identity v2.0 when refactor server-side code.

  • Hi there,

    I've updated all the nuget packages, but am now getting the following error when trying to register a user:
    An exception of type 'System.ArgumentException' occurred in mscorlib.dll but was not handled in user code

    Additional information: Cannot resolve method System.__Canon get_RoleId() because the declaring type of the method handle Microsoft.AspNet.Identity.EntityFramework.IdentityUserRole`1[TKey] is generic. Explicitly provide the declaring type to GetMethodFromHandle.

    This happens in IdentityUserRoleConfiguration.js : line 15

    Do I need to go back to the nuget packages you released it with, or is there an easy fix for this?

    Thanks

  • This is great. Looks like it needs some integration tests against the API. Would you take a pull request for that?

  • @kareem - I would greatly appreciate it if you could work on the forked repo here https://github.com/shijuvar/ng-spa as I will be working here instead of the original repo. Appreciate it if you could send pull requests.

  • Hi Shiju,

    Thanks for the reference app.

    Few questuions :

    1. As per the steps to run the application do I need to host the web api (ResourceMetadata.API) project in IIS with the following URL : http://localhost:7818/ before running the web project (ResourceMetadata.Web).

    2. I tried to run the application but I am getting the below error:

    ReferenceError: 'module' is undefined
    ReferenceError: 'module' is undefined
    at Anonymous function (http://localhost:8000/Scripts/test/spec/locationscontrollerspec.js:44:5)
    at describe (http://localhost:8000/Scripts/libs/jasmine-2.0.0/jasmine.js:613:9)
    at jasmineInterface.describe (http://localhost:8000/Scripts/libs/jasmine-2.0.0/boot.js:37:7)
    at Global code (http://localhost:8000/Scripts/test/spec/locationscontrollerspec.js:3:1)

    Can you please help me to fix the error.

    3. Apart from setting up the gulp tasks can you please help me to know is there any dependency on node component to run the application.

    4. When I try to navigate to the web url : http://localhost:9043/ I am getting a blank screen.

    Can you please help me to run the application.

Add a Comment

As it will appear on the website

Not displayed

Your website