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

【问题标题】：My Angular JS app works in desktop browser, but not in a mobile browser我的 Angular JS 应用程序可以在桌面浏览器中运行，但不能在移动浏览器中运行
【发布时间】：2015-03-28 11:01:07
【问题描述】：

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

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/

【问题讨论】：

具体来说，适用于 Android 的 Dolphin Browser、默认的 Android“Internet”浏览器和适用于 iPhone 的 Safari。它在最新的 Android 版 Chrome 上运行良好。

标签： javascript jquery html angularjs mobile

【解决方案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 和 angular-route 1.4.8 上不适合我