我的Angular JS應用程序可在桌面瀏覽器中使用，但不能在移動瀏覽器中使用

Question

我一直在研究現有的靜態網站設計，現在開始將其轉換為Angular JS網絡應用程序作為練習。 我采取的第一步是將一些單獨的頁面轉換為對某些JSON文件使用ngrepeat。 在Stack Overflow提供了一些幫助之后，我解決了這些問題，並決定采用ngRouting。 現在，我已經創建了一個包含基本頁面（index.html）的網站，該頁面包含一個帶有導航欄和彈出菜單的標題（templates / header.html），以及用於主要網站內容的ngViews html局部視圖（partials / foo.html）。該應用程序在桌面網絡瀏覽器中可以正常運行（ 偶爾會停止顯示“測試”），但不會在移動設備上顯示導航欄或html部分（僅顯示我包含的“測試”代碼段）。

的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模塊是一個較舊的版本，並且僅在某些瀏覽器中兼容。 我已更新到當前版本（與核心Angle庫相同的版本），現在在我對其進行測試的任何瀏覽器上都可以（不同程度地）運行。

我的Angular JS應用程序可在桌面瀏覽器中使用，但不能在移動瀏覽器中使用

問題描述

1 個解決方案

解決方案1
1 已采納 2015-02-04 05:20:48

我的Angular JS應用程序可在桌面瀏覽器中使用，但不能在移動瀏覽器中使用

問題描述

1 個解決方案

解決方案1 1 已采納 2015-02-04 05:20:48

解決方案1
1 已采納 2015-02-04 05:20:48