不同浏览器的AngularJS路由服务问题答案

【问题标题】：AngularJS routing services issues with different browsers不同浏览器的AngularJS路由服务问题
【发布时间】：2016-04-08 06:17:26
【问题描述】：

我刚刚使用 AngularJS 和 Bootstrap 完成了一个新的 WEB 项目的编码。开发是使用 Brackets 进行的，它启动 Chrome 进行测试（而 Brackets 本身充当服务器）。

到目前为止，当 Brackets 用作 SERVER 以及整个项目部署在 TOMCAT 安装中时，一切都按要求运行只要使用的浏览器是 Chrome 并且机器是我的计算机。

现在，我开始使用不同的浏览器和设备（例如平板电脑、手机等）测试该项目，然后……哎呀！！！我一直在崩溃。

似乎第一个问题来自我实现和使用路由服务的方式（或者，至少，这是我发现的几篇帖子所建议的）。发生了两件事（取决于浏览器和触发的操作）：

多次收到错误infdig，
当用户登录系统并使用$window.location.href 命令移动到其他页面时，存储在$rootScope 对象中的所有用户信息都会消失（奇怪的是，Chrome 不会发生这种情况，但它适用于 IE 和 Edge！）。

很遗憾，我无法完全理解使用路由服务的正确方法。

项目的结构是：

 [MyApp]                    -- This is the folder containing the whole project under TOMCAT's "webapps" folder
      index.html
      [pages]               -- Sub-folder hosting all the pages of the project except for the `index.html`
         page1.html
         page2.html
         :
         :

使用$window.location.href = "#page1.html"; 转换到子页面（page1.html 等），并定义路由服务：

$routeProvider
    .when('page1.html', {
            templateUrl: '#/pages/page1.html',
            controller: 'Page1Controller'
    }
    .when('page2.html', {
            templateUrl: '#/pages/page2.html',
            controller: 'Page2Controller'
    }
    :
    :

从这方面的帖子中，我也尝试过：

    .when('page1.html', {
            templateUrl: 'pages/page1.html',
            controller: 'Page1Controller'
    }

和

    .when('page1.html', {
            templateUrl: '/pages/page1.html',
            controller: 'Page1Controller'
    }

在这两种情况下都会出错（例如找不到页面）。

此外，我不清楚包含声明 $locationProvider.html5Mode(true); 有什么影响（包含此声明时，我收到 injection 错误）。

我正在寻求有关如何正确使用此服务以及是否以及如何设置 HTML5 模式的简单明了的说明。

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

经过一番努力，我能够解决问题。以下是可能遇到相同情况的问题及其解决方案的摘要。

不同操作系统中的不同文件名 case：如原始问题正文中所述，开发是使用在 Windows 上运行的 Brackets（很棒的工具！！！）进行的。众所周知，就文件名而言，Windows 不区分大小写。因此，如果您有一个名为abc.html 的页面，并且您将其调用为Abc.html，则会找到该页面。在 Linux 中情况并非如此，因此，一旦我查看了所有引用并同步了所有名称，这部分问题就得到了解决。
正确使用 `$location' 服务：在我的代码中，我使用此服务的方式有很多不一致之处。

正确（至少对我而言）使用路由服务的方式如下：

在 Route Provider 部分中，确保您拥有指向所有页面的条目，例如：

 .when ('/Demos', { 
           templateUrl: 'pages/Demos.html' ,
           controller:  'DemosController'
  })

然后，重定向时，使用语法：
```
 $location.path('/Demos') ;
```

一旦这些问题得到解决，我的应用程序就在 Firefox、IE、Edge、Chrome 和 Safari 上进行了测试，除了浏览器呈现某些字段的方式不同（如日期时间选择器）之外，所有行为都是相同的（如果我们忽略了使用 IE 时的性能差异）。

【讨论】：