ASP.NET MVC and Angularjs together + ASP.NET Web API

Question

I would like to know the advantages and disadvantages of using these 2 worlds:

• ASP.NET MVC and Angularjs together(without razor, Angularjs will do the job).
• AngularJS(front end) + ASP.NET Web API(back end).

We are focusing on SPA/Mini-SPA for a medium/large Enterprise project with a lot of server side business rules and calculations. Im focusing on security too.

The advantages and disadvantages opinions would help me to find the aswere for this question inside my head:

Would it be a wise decision to use ASP.NET Web API(backend), ASP.NET MVC and Angularjs together?

Answer 1

Yes, it would be wise to combine the two. Obviously depending on the exact project, you need to tweak some of the variables in the final solution.

What you are suggesting has actually been our stack for the last 2 or 3 projects, with a few variants here and there based on specific requirements. We've used WebAPI + DurandalJS, WebAPI + Knockout... All work really well :) AngularJS seems to have stuck around the longest, gaining popularity internally to our company, as well as in the rest of the community (which is a deciding factor for me)

Current Tech Stack.

                            +------------------------------------+
                            |               Usage                |
  +-------------------------+------------------------------------+
  | AngularJS               | The client app web, or mobile      |
  +-------------------------+------------------------------------+    
  | WebAPI                  | For all your data access needs     |
  +-------------------------+------------------------------------+
  | OAuth & Bearer Tokens   | For Authentication & Authorization |
  +-------------------------+------------------------------------+
  | SQL Server & EF / any   |  Persistence                       |
  | any other noSQL variant |  & Storage                         |
  +-------------------------+------------------------------------+
  | Angular-UI /            |                                    |
  | Angular-Material        | Base UI components                 |
  +-------------------------+------------------------------------+
  | Katana                  | Collection of projects for         |
  |                         | supporting OWIN on MS-Stack        |
  +-------------------------+------------------------------------+
  | CORS                    | Standard for implementing          |
  |                         | cross domain requests              |
  +-------------------------+------------------------------------+

Benefits:

• Web App can be ported to mobile quite easily (if written in such a way that you're aware that you might be going mobile)

  • Using Cordova

• You have an API that you can easily access using other services / apps should you choose to... plus API's are cool (compared to legacy access mechanisms)

• AngularJS allows for powerful yet structured client side code (not that you cant do it without Angular, but in my experience the framework enforces better practices, should you adhere to them correctly)

• Starting to sound like a broken record, but as we all know, AngularJS is super testable

• You can make use of the .Net bundling if you're scared of NodeJS and things like grunt/gulp

  • Not that you have to be scared of it (but familiarity > unfamiliarity)
  • Just make sure the client side code gets written in a Minsafe way

• Visual Studio is actually quite cool to develop in, specifically with their new focus on open source support of late. Lots of integration points for AngularJS, Node (which you'll probably use at some point), and obviously ASP.Net MVC

Cons:

• If your not familiar with Angular there's a nice ol' learning curve

• Possible duplication of validation

  • In order to reduce round trips/callbacks, it's obviously preferable to send through correct data on the first go. So in a few (or most) instances, we needed to duplicate some of the data level validations in JavaScript

• Although it might not be applicable, and is a bit of a long shot... I've been at a client where they strictly want to use everything MS because opensource is "less secure", because people have access to the framework code... go figure. So make sure that they're open to using a SPA framework that's open source (this could apply to any other framework or tool) (and all that goes with it)

• Duplication in security. You'll need to make sure to secure the API & the application. (As there is a disconnect between the two layers)

• You'll need to learn how CORS works, and how to impliment it correctly as its likely that your API and web app will not be on the same domain/origin

Also. Worth taking a read:

1. Pros And Cons Of Restful Architecture

2. Restful WebAPI vs Regular Controllers (A previous question I asked when it came to designing / understanding WebAPI & REST designs)

Answer 2

One possible solution is to create a REST service using Web API and consume it with Angular-based front-end app (actually, it doesn't matter what kind of front-end technology you will choose — web, desktop, native mobile, etc). This is possible if everything is done with a REST API, including authorization and authentication (bearer tokens is a good choice for that).

In this scenario, your web server will simply act as a host for Angular views. It does not matter whether you'll use pure HTML with ng- attributes, MVC or even old-fashioned WebForms, because no mark-up will be generated dynamically on the server — Angular will perform all the required DOM manipulations on the client-side.

Answer 3

It depends on your architecture. I'm a big fan of exposing APIs (secure, metric-centric) for any ASP.Net MVC application. In a larger, multi-role application I separated the access-controlled sections leveraging a series of AngularJS SPAs by functional role. A controller was created with a single view (index) using Razor. The view integrated the wrapping Bootstrap theme, and then contained a the AngularJS referencing to pull in the appropriate app. The back-end controllers (View and API) were secured using the Identity Framework. AngularJS was leveraged for an elegant UI for each functional section of the site. In my case, this approach allowed for better isolation of testable code on a per-section basis. Hosting the APIs and UI in the same domain also avoids any CORS considerations which might arise from cross-domain hosting.

The following is a sketch of the structure:

/Content
  /AccessGroup1/app.js (service, controllers)
  /AccessGroup2/app.js (service, controllers)
/Controllers
  /AccessGroup1controller
  /AccessGroup2Controller
/Views
  /AccessGroup1
    /index.cshtml
  /AccessGroup2
    /index.cshtml