Question

我正在使用ASP.Net 5和AngularJS开发Web应用程序。我已经完成它并且它工作得很好，但是当它被实时发布时我发现它在IE9中不起作用，IE9是我们公司的一个重要部分。

我正在使用ui-router而我正在使用Stephen Walter的客户端路由教程：link here

不幸的是，他从URL中删除＃的方法仅适用于IE10 +，因为IE9不支持HTML5 History API。

已经花了几天时间在这个上面，并且找不到我必须继续使用干净的网址为现代浏览器而不是IE9的步骤？

我的web.config：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true" />
    <rewrite>
      <rules>
        <!--Redirect selected traffic to index -->
        <rule name="Index Rule" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_URI}" matchType="Pattern" pattern="^/api/" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
    <handlers>
      <add name="httpPlatformHandler" path="*" verb="*" modules="httpPlatformHandler" resourceType="Unspecified" />
    </handlers>
    <httpPlatform processPath="%DNX_PATH%" arguments="%DNX_ARGS%" stdoutLogEnabled="false" startupTimeLimit="3600" forwardWindowsAuthToken="true" />
  </system.webServer>
</configuration>

我的app.js：

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$sceDelegateProvider',
    function ($stateProvider, $urlRouterProvider, $locationProvider, $sceDelegateProvider) {

        $locationProvider.hashPrefix('!').html5Mode({
            enabled: true,
            requireBase: false
        });

        $stateProvider
        .state('app', {
            abstract: true,
            url: '',
            templateUrl: '/templates/appcontainer.html',
            controller: 'indexController'
        })
        .state('app.stateIndex', {
            url: '/',
            templateUrl: '/templates/list.html',
            controller: 'dashListController'
        })
        .state('app.stateList', {
            url: '/list',
            templateUrl: '/templates/list.html',
            controller: 'dashListController'
        })
        .state('app.stateDashboard', {
            url: '/dashboard/:id',
            templateUrl: '/templates/dashboard.html',
            controller: 'dashboardController'
        })
});

当我在IE9中启动时，会显示一个空白页面，当我检查源代码index.html已加载，但<ui-view class="main-view"></ui-view>的内容不是。

Answer 1

我必须继续为现代浏览器使用干净的网址而不是IE9？

在配置块中使用条件语句，通过特征检测将IE9从html5Mode中排除。例如：

if(!!$window.innerWidth && !$window.matchMedia)
  {
  $locationProvider.html5Mode({enabled: false, requireBase: false});
  $locationProvider.hashPrefix("search");
  }
else
  {
  $locationProvider.html5Mode({enabled: true, requireBase: false});
  }

<强>参考

angular.js issue 10002: ng-controller on <html> tag fails on IE9

如何仅为现代浏览器启用$ locationProvider.html5Mode？

1 个答案: