我的Angular JS应用程序适用于桌面浏览器，但不适用于移动浏览器

我一直在使用预先存在的静态网站设计，现在我开始将它转换为Angular JS webapp作为练习。 我采取的第一步是将一些单独的页面转换为使用ngrepeat和一些JSON文件。 在Stack Overflow的帮助下，我解决了这些问题并决定采用ngRouting。 我现在创建了一个带有基页（index.html）的站点，其中包含一个带有导航栏和弹出菜单的标题（templates / header.html）和用于主站点内容的ngViews html partials（partials / foo.html）。 该应用程序在桌面Web浏览器中工作正常（ 偶尔会停止显示“测试”），但不会在移动设备上显示导航栏或html部分（只显示我包含的“测试”片段）。

的index.html

                 
Test
 
 
    

了header.html

  
 
 
 
Patrick W. Ackerman
 
  
 
 
 
 
Patrick Ackerman
 
Teaching Assistant
 
 
{{item.profileItem}}
 
 
  

controllers.js

 var profileApp = angular.module('profileApp', ['ngRoute']); profileApp.controller('BookCtrl', function ($scope, $http){ $http.get('books.json').success(function(data) { $scope.bookItems = data; }); }); profileApp.controller('MenuCtrl', function ($scope, $http){ $http.get('profile.json').success(function(data) { $scope.profileItems = data; }); }); profileApp.config(['$routeProvider', function ($routeProvider) { $routeProvider // Home .when("/", {templateUrl: "partials/home.html", controller: "MenuCtrl"}) .when("/home", {templateUrl: "partials/home.html", controller: "MenuCtrl"}) // Pages .when("/books", {templateUrl: "partials/books.html", controller: "BookCtrl"}) .when("/insta", {templateUrl: "partials/insta.html", controller: "InstaCtrl"}) .when("/education", {templateUrl: "partials/education.html", controller: "EducationCtrl"}) .when("/workHistory", {templateUrl: "partials/workHistory.html", controller: "WorkCtrl"}) .when("/hobbiesInterests", {templateUrl: "partials/hobbiesInterests.html", controller: "HobbiesCtrl"}) //.when("/contact", {templateUrl: "partials/contact.html", controller: "PageCtrl"}) // else 404 .otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"}); }]); 

我在这里测试它的网站： http ： //packtest.atwebpages.com/

Answer 1

在不同配置的几个不同浏览器上测试后，我找到了解决方案。 我不确定我是如何在原始HTML中提出这些来源的：

但是角度路由模块是旧版本，并且仅在某些浏览器中兼容。 我更新到当前版本（与核心角度库相同的版本），现在它在我测试的任何浏览器上工作（不同程度）。