使用 ASP.NET 和 AngularJS 的最简单的主页答案

【问题标题】：Simplest home page with ASP.NET and AnjularJS使用 ASP.NET 和 AngularJS 的最简单的主页
【发布时间】：2014-05-14 11:02:35
【问题描述】：

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

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

我需要 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: /

【问题讨论】：

标签： c# javascript asp.net angularjs

【解决方案1】：

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

这应该可以解决问题：

将此添加到 web.config：

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

至于错误（其中404），可以在here找到答案。这仅适用于在加载 angular 之前有人试图获取不存在的 url 时。

但是一旦加载了 angular，你就可以用 config 来做所有事情，你可以在其中配置 $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

【讨论】：

我已经更新了我的问题以包含 web.config，我看不到任何变化

【解决方案2】：

默认情况下，Visual Studio 将站点部署在子文件夹中。要更改它，请右键单击您的 Web 项目文件/属性。然后在 Web 选项卡中将项目 url 指定为 http://localhost:1234。

【讨论】：