Preparing a new ASP.NET Web Application to be a SPA with AngularJS (or similar) - ScottRFrost/scottrfrost.github.io GitHub Wiki

Create a new ASP.NET project, select Web API. Select No Authentication.

Open the nuget console and execute these to remove front end libs:

uninstall-package modernizr
uninstall-package Respond
uninstall-package Microsoft.AspNet.Web.Optimization
uninstall-package WebGrease
uninstall-package bootstrap
uninstall-package Microsoft.jQuery.Unobtrusive.Validation
uninstall-package jquery.validation
uninstall-package jquery
uninstall-package antlr
update-package

Open web.config and inside system.web\compilation, add the following:

<buildProviders>
    <add extension=".html" type="System.Web.Compilation.PageBuildProvider" /> <!-- Allows for routing everything to ~/index.html -->
</buildProviders>

Open App_Start\RouteConfig.cs and replace it with the following (then remove unused 'using' statements at the top):

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        routes.IgnoreRoute(""); //Allow index.html to load
        routes.IgnoreRoute("partials/*"); 
        routes.IgnoreRoute("assets/*");
        routes.MapPageRoute("Default", "{*anything}", "~/index.html");
    }
}

Open Global.asax.cs and replace it with the following (then remove unused 'using' statements at the top):

protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        GlobalConfiguration.Configure(WebApiConfig.Register);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        var formatters = GlobalConfiguration.Configuration.Formatters;
        formatters.Remove(formatters.XmlFormatter);
        formatters.JsonFormatter.SerializerSettings = new JsonSerializerSettings
        {
            Formatting = Formatting.Indented,
            PreserveReferencesHandling = PreserveReferencesHandling.None,
            ReferenceLoopHandling = ReferenceLoopHandling.Ignore,
        };
    }

Remove Project_Readme.html, App_Start\BundleConfig.cs, and everything in Controllers. Remove the Areas, Content, Views and Scripts folders.

Create partials, js, css, img, etc as folders. Add a index.html similar to the following:

<!DOCTYPE html>
<html class="no-js" lang="en-us" data-ng-app="ng-app" id="ng-app">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>App Name Here</title>
	<meta name="description" content="App Name Here" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="//cdn.jsdelivr.net/g/bootstrap(/css/bootstrap.min.css)" />
	<link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.1.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="/css/app.css" />
	<!--[if lt IE 9]>
		<script src="/js/html5shiv.js"></script>
		<script src="/js/respond.min.js"></script>
	<![endif]-->
</head>

<body data-ng-controller="mainCntl">
	
	... body here ...
	
	<script src="//cdn.jsdelivr.net/g/[email protected],[email protected](angular.js+angular-route.min.js),angular.bootstrap(ui-bootstrap-tpls.min.js)"></script>
	<script src="/js/app.js"></script>
</body>
</html>
⚠️ **GitHub.com Fallback** ⚠️