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

问题

I have been working off of a pre-existing static site design and am now starting to convert it over to an Angular JS webapp as an exercise. The first step I took was to convert a few of the individual pages to use ngrepeat with some JSON files. After some help from Stack Overflow, I ironed out these issues and decided to take on ngRouting. I have now created a site with a base page (index.html) that ngIncludes a header (templates/header.html) with a navbar and a popout menu and ngViews html partials (partials/foo.html) for the primary site content. The app works fine in a desktop web browser (occasionally stops at displaying "Test"), but does not display the navbar or the html partials on mobile (just displays a "Test" snippet that I included).

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"});
}]);

The site where I am testing it is available here: http://packtest.atwebpages.com/

回答1:

After testing on several different browsers in different configurations, I figured out the solution. I'm not sure how I came up with these sources in my original 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>

But the angular-route module was an older version, and was only compatible in certain browsers. I updated to the current version (same version as the core angular library), and now it is working (to varying degrees) on any browser I test it in.

来源：https://stackoverflow.com/questions/28210992/my-angular-js-app-works-in-desktop-browser-but-not-in-a-mobile-browser

标签

javascript

jquery

html

angularjs

mobile