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

时间:2016-04-08 06:17:26

标签: javascript angularjs html5

我刚刚使用AngularJS和Bootstrap编写了一个新的WEB项目。开发使用Brackets,它启动Chrome进行测试(而Brackets本身就是SERVER)。

到目前为止,只要正在使用的浏览器是Chrome并且计算机是我的计算机,当Brackets用作SERVER以及整个项目部署在TOMCAT安装时,一切都可以正常工作/强>

现在,我开始使用不同的浏览器和设备(例如平板电脑,手机等)测试项目,并且... OOPS !!!我一直在崩溃。

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

  1. 我多次收到错误infdig

  2. 当用户登录系统并使用$window.location.href命令移动到其他页面时,存储在$rootScope对象中的所有用户信息都会消失(奇怪的是,这不是发生在Chrome上,但它与IE和Edge一起发生!)。

  3. 不幸的是,我无法完全理解使用路由服务的正确方法。

    项目的结构是:

     [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模式的简单直接解释,我将非常感激。

    非常感谢提前。

1 个答案:

答案 0 :(得分:0)

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

  • 不同操作系统中的不同文件名大小写:如原始问题正文中所示,开发是使用在Windows上运行的Brackets(Great tool !!!)进行的。众所周知,就文件名而言,windows不区分大小写。因此,如果您有一个名为abc.html的页面,并将其作为Abc.html调用,则会找到该页面。在Linux中并非如此,因此,一旦我查看了所有引用并同步了所有名称,就会解决这个问题。

  • 正确使用`$ location'服务:在我的代码中,我使用此服务的方式存在许多不一致之处。

使用路由服务的正确方法(至少对我而言)如下:

  • 在路线提供者部分,确保您有指向所有页面的条目,例如:

    .when(' / Demos',{               templateUrl:' pages / Demos.html' ,               控制器:' DemosController'    })

  • 然后,在重定向时,使用语法:

    $ location.path(' / Demos');

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

希望这对所需的人有所帮助。