Simplest home page with ASP.NET and AnjularJS

Question

I want to build a SPA with AngularJS and ASP.NET Web API. In regards to the frontend webpage I would like to limit the implication of asp.net as much as possible and move all the logic into Angular, the only thing the Web API will supply is a REST service. I have created an index.html page with some angular that loads a basic list from the server.

But my index.html is accessed using ex. http://localhost:1234/app/index.html , what I would like now is to see my index.html from http://localhost:1234/ and also get a custom error page if I access some random link from this host.

Do I require ASP.NET to do this ? I would like to limit the use of ASP.NET as much as possible, only the basic required stuff. And I am complete new to this.

Web.config :

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <clear />
      <add
          name="StaticFile"
          path="*" verb="*"
          modules="StaticFileModule,DefaultDocumentModule,DirectoryListingModule"
          resourceType="Either"
          requireAccess="Read" />
    </handlers>
    <staticContent>
      <mimeMap fileExtension=".*" mimeType="application/octet-stream" />
    </staticContent>
    <defaultDocument enabled="true">
      <files>
        <clear/>
        <add value="index.html"/>
      </files>
    </defaultDocument>
    <modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer>
</configuration>

Also added routing:

public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("");

            routes.MapRoute(
                "Default", // Route name
                "{controller}/{action}/{id}", // URL with parameters
                new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
                );
        }

Page error:

Server Error in '/' Application.

The resource cannot be found.

Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly. 

Requested URL: /

Answer 1

Well angular only does routing on client side, for your url needs you will still need to do some config on server side.

this should do the trick:

add this to web.config:

<system.webServer>
<defaultDocument>
  <files>
    <clear/>
    <add value="(location of index.html)"/>
  </files>
</defaultDocument>

As for errors (404 is among them), answer can be found here . That is only for when someone tries to get an url that does not exist, before angular has been loaded.

But once angular is loaded up, you do everything withing config, where you configure $routeProvider:

$routeProvider.when('/someUrl', {templateUrl: 'url/templatefile.html', controller: 'templateController'})
              .when('/my404route', {templateUrl: 'url/my404file.html', controller: 'my404Controller'})
              //when returns $routeprovider so you can chain "whens"
              //finnaly add "otherwise"
              .otherwise({redirectTo: '/my404route'});
              //or just route to root with '/' if you won't handle unknown routes

Answer 2

By default visual studio deploy the site in a subfolder. To change it right click on your web project file / properties. Then in the Web tab specify the project url to be http://localhost:1234 .