我的 Angular JS 应用程序可以在桌面浏览器中运行，但不能在移动浏览器中运行

Question

我一直在研究 pre-existing 静态站点设计，现在开始将其转换为 Angular JS webapp 作为练习。我采取的第一步是将一些单独的页面转换为使用 ngrepeat 和一些 JSON 文件。在 Stack Overflow 的帮助下，我解决了这些问题并决定采用 ngRouting。我现在创建了一个带有基本页面 (index.html) 的站点，其中 ngIncludes header (templates/header.html) 带有导航栏和弹出菜单以及 ngViews html partials (partials/foo.html) 用于主要站点内容。该应用程序在桌面网络浏览器中运行良好（偶尔停止显示 "Test"），但不显示导航栏或移动设备上的 html 部分（仅显示我包含的 "Test" 片段）。

index.html

<!DOCTYPE html>
<html ng-app="profileApp">
<head>
<title>Patrick Ackerman - Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,200,600,700,500' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400' rel='stylesheet' type='text/css'>
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="css/narrow.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.min.js"></script>
<script type='text/javascript' src='instafeed.min.js'></script>
<script type='text/javascript' src='resolution-test.js'></script>
<script src='controllers.js' type="text/javascript"></script>
<script type="text/javascript" src="slidemenu.js"></script>
<script type="text/javascript" src="instastart.js"></script>


<body style="background-color:#F8FAE8">
<p>Test</p>
<div ng-include src='"templates/header.html"'></div>
<div ng-view></div>

</body>
</head>
</html>

header.html

<script type="text/javascript" src="slidemenu.js"></script>
<div class = "fixed-nav-bar">
<strong><table width="100%">
    <td width="1"><a><div class="slideout-menu-toggle"><div class="round"><img src="me.jpg"/></div></div></a></td><td></td>
    <td width="5"><a href="#/" class="menu1"><h1>Patrick W. Ackerman</h1></a></td><td></td>
    <td width="1"><a href="xxx" class="menu1"><img class="icon" src="hamburg.png"></img></a></td>
</table></strong>
</div>
<div>
<div class="slideout-menu">
    <div class="container" ><table id="profile"><td width='1'>
<h1>Patrick Ackerman</h1><em>    
    <p id="type">Teaching Assistant</p></em></td><td><div class="round2"><a href="#/"><img class="round2img" src="proportionalport.jpg"/></a></div></td></table></div>

<ul ng-controller="MenuCtrl" class="ul">
    <li class="profile-li" ng-repeat="item in profileItems"><a href="{{item.link}}">{{item.profileItem}}</a><li>        
</ul>
</div>  
</div>

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:

中想到这些来源的

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.min.js"></script>

但是 angular-route 模块是一个旧版本，并且只在某些浏览器中兼容。我更新到当前版本（与核心 angular 库相同的版本），现在它可以（在不同程度上）在我测试它的任何浏览器上工作。

我的 Angular JS 应用程序可以在桌面浏览器中运行，但不能在移动浏览器中运行

My Angular JS app works in desktop browser, but not in a mobile browser

html

javascript

mobile

jquery

angularjs