CODEWITHSUNDEEP
angularjssingle-page-application
dawriter
dawriter

Reputation: 435

AngularJS SPA Template

I've been reading alot about AngularJS and I just absobutely love the concept behind it and want to get my feet wet. I've read up on several tutorials and eventually downloaded Visual Studio Template SPA and that's where the "fun" stops. The way I see it - using that template seems to go against the grain of creating a SPA - there are very little examples to go on.

By default, the SPA Template installed sets up this like:

app
app_start
Content
Images
Routing
Scripts
  Vendor
  app.js
  controller.js
  (the rest you get the idea)
Views
you get the idea.

The question is really bugging me. For example,I want to insert a hockey player and coach page (two separate SPA) to work under the current masterpage content. This is where I'm a bit lost on "separation"

The way I see it, I would have to add a route to app.js and a controller to controller.js for coach and player but I don't like that because I want to separate the player and coach controller code and put it under the player and coach modules like this.

But what I tried to do and fail is:

Module
   Player
      playerApp.js
      playerControl.js
      player.cshtml
   Coach
      coachApp.js
      coachControl.js
      coach.cshtml

I'm struggling to "hook" them up. I certainly do not want to put the coach controller and the player controller in the control.js file under the scripts folder and the views (player and coach) under the Views folder. It would become too difficult to read and eventually become messy.

Any guidance would be appreciate on what I should be reading on.

thanks,

Upvotes: 0

Views: 440

Answers (1)

Claies
Claies

Reputation: 22323

This is somewhat of an opinionated question and answer, but I want to offer one possible scenario which I have found works well.

Unless you have a compelling need for Razor (i.e. existing user controls), your path of least resistance is to not use ASP.Net MVC at all. Instead, you can leverage ASP.Net WebAPI, which operates similarly to MVC, but provides a REST interface to handle JSON data instead of using Views and Server Routing.

In your Web App, you can simply use a single index.html which can be hooked up with angular, and your individual modules can be separated without needlessly being concerned with multiple "app" pages, how to interact between them, etc.

On the server, you can either run the WebAPI from a different URL, or more commonly, from something like http://yoursite.com/api/. IIS would be configured to redirect anything that is not static files (.css, .js, images, etc.) or api calls back to the single index.html.

Upvotes: 2

Related Questions