如何仅为现代浏览器启用 $locationProvider.html5 模式



我正在使用 ASP.Net 5和AngularJS开发Web应用程序。我已经完成了它并且效果很好,但是当它实时发布时,我发现它在IE9中不起作用,这是我们公司的重要组成部分。

正在使用ui-router,我正在休耕斯蒂芬·沃尔特客户端路由教程:链接在这里

不幸的是,他从URL中删除#的方法仅适用于IE10+,因为IE9不支持HTML5历史记录API。

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

我的网络配置:

<?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>

我的应用.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中启动它时,显示一个空白页,当我检查源代码索引时.html加载了,但是<ui-view class="main-view"></ui-view>的内容没有。

我必须采取什么步骤才能继续为现代浏览器而不是 IE9 使用干净的 url?

在配置块中使用条件语句,通过功能检测从 html5Mode 中排除 IE9。例如:

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

引用

  • 角度.js问题 10002:<html>标记上的 ng 控制器在 IE9 上失败

相关内容

  • 没有找到相关文章

最新更新