Rendering standalone AngularJS application with .NET MVC 4

Question

Situation :

I've already created standalone AngularJS application which needs some back-end support (DB Acess, Ajax requests, Files upload support). I don't want to modify my app structure to fit razor .cshtml files requirements, and moreover I don't need razor engine support at all.

Whats the problem? :

What I need to achieve is to simply render my AngularJS application main page and force MVC to return regular HTML+JS+CSS app structure.

I've already tried to render main page of app by calling

public ActionResult Index()
{
   return File(Server.MapPath("/AngularApp/") + "site_template.html", "text/html");
}

in my only one, simple controller, but only plain HTML has been loaded, obviously with no JS scripts or CSS files.

I'm not familiar with .NET MVC framework, however I belive that such simple task can be achieved without using dedicated template engine, since all the communication between .NET server and front-end application will be handled asynchronously.

How should it work? :

MainPageController.cs should load fully-operational AngularJS app by rendering it's main page - site_template.html, which will obviously load various .html files, JS scripts, CSS files etc.

I'll be grateful for any working solution.

Answer 1

You can do it with ASP.NET MVC WebAPI, don't need any chml page and just pure html+js+css as you wanted. Refert to - http://www.codeproject.com/Articles/826307/AngularJS-With-MVC-Web-API for an sample.

Answer 2

Why are you using .NET to mess with the perfectly good Angular front-end stuff?

Angular is perfectly good all by itself, you only need the .NET asp pages to fetch data from a database and parse it to Angular as JSON string.

The scripts you have to include yourself into the Angular's index.html file. But for some reason you are using url rewrites (/AngularApp/)? Angular is already a SPA solution with pretty url's if you are using $routeProvider. https://docs.angularjs.org/tutorial/step_07

Just create a virtual directory on your IIS/Apache webserver and dump all the files there.

I would also suggest pulling a copy of Angular-seed sample app to start off with, then all your structures and links are pre-set linked and working for you: https://github.com/angular/angular-seed

Answer 3

If you just want to return the html you can use

public ActionResult Index()
{
    return new FilePathResult(Server.MapPath("~Views/AngularApp/site_template.html"), "text/html");
}

But you really don't want your css and js in your Views folder.