c# - 使用 ASP.NET 和 AngularJS 的简单主页

Question

我想使用 AngularJS 和 ASP.NET Web API 构建一个 SPA。对于前端网页，我想尽可能限制asp.net的影响，并将所有逻辑转移到Angular中，Web API唯一提供的就是REST服务。我创建了一个 index.html 页面，其中包含一些从服务器加载基本列表的 Angular 。

但是我的 index.html 是使用 ex 访问的。 http://localhost:1234/app/index.html ，我现在想要的是从 http://localhost 查看我的 index.html : 1234/ 如果我从此主机访问一些随机链接，还会收到自定义错误页面。

我需要 ASP.NET 才能执行此操作吗？我想尽可能限制 ASP.NET 的使用，只使用基本必需的东西。我对此完全陌生。

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>

还添加了路由:

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
                );
        }

页面错误:

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

Angular 只在客户端进行路由，对于您的 url 需求，您仍然需要在服务器端进行一些配置。

这应该可以解决问题:

将其添加到 web.config:

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

关于错误(404就是其中之一)，可以在 here 找到答案。这仅适用于当有人在 Angular 加载之前尝试获取不存在的 url 时。

但是一旦加载了 Angular，您就可以使用配置来完成所有操作，在配置中配置 $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