Visual Studio 网站中的 Angular html5Mode答案

【问题标题】：Angular html5Mode in Visual Studio websiteVisual Studio 网站中的 Angular html5Mode
【发布时间】：2017-08-22 22:34:23
【问题描述】：

我想在 VS2015 的网站项目中使用 html5Mode。默认页面工作正常，但是当我使用在 Angular 上定义的 rout 时，它显示 404 错误。我在 web.config 上添加了以下代码，但它似乎无法正常工作

  <system.webServer>
      <modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer>

我的角度路线看起来像：

.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {

    $urlRouterProvider.otherwise("/countries")
    $stateProvider
    .state('mainpage', {
        url: '/countries',
        templateUrl: 'assets/app/templates/countries.html',
        //controller: 'countriesController',
        controller: 'countriesController as cCtrl',
        resolve: {
            officesReso: function (apiCommunicationFactory) {
                return apiCommunicationFactory.Office.get();
            }
        }
    })
    .state('countryDetail', {
        url: '/countries/:office',
        controller: 'countryDetailController as countryDetailCtrl',
        templateUrl: 'assets/app/templates/country.html',
    })

    $locationProvider.html5Mode(true); 
});

我错过了什么吗？我怎样才能让它发挥作用？

【问题讨论】：

标签： angularjs visual-studio angular-ui-router web-site-project

【解决方案1】：

原因

您会收到 404，因为该请求绕过了您的应用程序的入口点（因此是有角度的！），这意味着 Web 服务器在一个不存在的文件夹中寻找服务器指定的默认文档之一。

修复

1) 通过在 index.html 文件的 <head> 部分中放置 <base href="/index.html"> 来指定应用程序的入口点。这告诉 Angular 应该将相对 URL 解析到哪里。

2) 在 web.Config 文件的<system.webServer> 部分创建重写规则。这会强制 Web 服务器始终访问您的 index.html 文件并允许 Angular 路由引擎启动。当然，我们不总是希望每次 http 请求都访问 index.html 等添加了几个条件来忽略该规则。

    <rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="api/(.*)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>

更新 - Re：重写规则和条件

一定要查看官方文档：URL Rewrite Module Configuration Reference

<match url=".*" />

这是您指定规则何时生效的地方。使用* 或.*，它将匹配每个传入的请求，如果条件（如果有）通过，它将重写 URL...

<conditions logicalGrouping="MatchAll">

这是您指定和分组条件的地方。设置logicalGrouping="MatchAll" 意味着所有条件都必须评估为真才能重写 URL。

<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />

上述意思是：确保请求的 url 不指向文件。如果您要链接到 Web 服务器上的文件，您将需要这个。例如，我经常创建指向.ics 文件的链接来创建公共日历，而您不想重写（重定向）这些链接，而是希望它们点击文件。

<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />。

这意味着：确保请求的 url 不指向目录。如果您想列出 Web 服务器目录中的文件，您将需要它。我不这样做，所以实际上不需要它！

<add input="{REQUEST_URI}" pattern="api/(.*)" negate="true" />

这意味着：确保请求的 url 不以 api/ 开头，即它不是对我的 web api 的异步调用，因为所有我的 api 调用以 api/ 开头，我不想将它们重写为 index.html，我希望它们完全按照要求继续并点击我的 api 操作方法。

如果上述任何一个条件评估为假（即它是一个文件或它是一个目录 或 这是一个 api 调用），则不会重写 URL，因为指定了 logicalGrouping="MatchAll"。

【讨论】：

这对我有用，但我很想知道这些条件是如何工作的。你能解释一下代码的每一行（或最重要的）吗？
更新的答案，尽我所能解释，我会查看官方文档，虽然它更详细并涵盖了更多可用选项。