javascript - Angular 路由在不同的浏览器中表现奇怪/不同

Question

我刚刚使用 AngularJS 和 Bootstrap 完成了一个新的 Web 项目的编码。开发是使用 Brackets 进行的，Brackets 是一种编辑工具，可以在充当 Web 服务器的同时启动 Chrome 进行测试。

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

现在，我开始使用不同的浏览器和设备(例如平板电脑、手机等)测试该项目，哎呀!我总是遇到崩溃。

看起来第一个(也许是核心)问题来 self 实现和使用 Angular 路由服务的方式(或者至少，这是我发现的几篇文章所建议的)。正在发生两件事(取决于浏览器和触发的操作)指向该方向:

1. 我多次收到错误infdig，这意味着某处存在无限重新加载循环，

2. 当用户成功登录系统时，包含用户详细信息的对象将存储为 $rootScope 对象，并且当 $window.location.href 命令用于移动到其他页面，之前存储的所有用户信息都会消失(奇怪的是，Chrome 不会出现这种情况，但 IE 和 Edge 会出现这种情况!)。

不幸的是，我无法完全理解什么是使用路由服务的正确方法。

该项目的结构是:

 [MyApp]                    -- This is the folder containing the whole project under TOMCAT's "webapps" folder
      index.html
      index.js              -- Contails the controller related ot the index.html page
      [pages]               -- Sub-folder hosting all the pages of the project except for the `index.html`
         page1.html
         page2.html
         :
         :
      [js]                  -- Sub-folder hosting the controllers of each and every sub-page
         page1.js           -- Sub-page controller
         page2.js           -- Sub-page controller
         :
         :

使用命令$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); 有何影响(包含此语句时，我收到注入(inject)错误)。

如何正确使用这个 Angular 路由服务，以及如何设置 HTML5 模式？

Answer 1

路由参数:我完成它的方式，它对我有用，而且它的简单是使用我之前展示的相同的路由函数:

然后，如果您查看“searchresult/:searchCriteria”:搜索条件已经是我放入名为 sys 的 JavaScript 变量中的参数(即，在 JavaScript 的开头，我声明了变量 var sys = null;)。

然后在 SearchResult Controller 上，我将 sys 的值放入 $scope 变量中，例如 $scope.sys = sys;。如果您想检查开发人员工具控制台中的值和/或使用它们，这将为您提供作用域和 JavaScript 中的变量。

调用客服电话http://url/#searchresult/myvalue

就像之前调用 $location.path("/searchresult/myvalue")

像这样，您可以创建一个包含许多参数的路径(即“/searchresult/myvalue1/myvalue2/myvalue3”)，它们都将存储在变量 sys 中

PS:如果您想更改整个网址，请使用 window.location.replace('new url')，不带任何 $。这个路由和 Angular 的区别在于，这会刷新页面，而 Angular 只会刷新你的 ng-view