我的Angular JS应用程序适用于桌面浏览器，但不适用于移动浏览器 [英] My Angular JS app works in desktop browser, but not in a mobile browser
问题描述
我一直在使用一个预先存在的静态网站设计，现在开始将它转换为一个Angular JS webapp作为练习。我采取的第一步是将一些单独的页面转换为对一些JSON文件使用ngrepeat。在Stack Overflow的帮助下，我解决了这些问题并决定采用ngRouting。我现在创建了一个包含基本页面（index.html）的网站，其中包含一个包含导航栏和弹出式菜单的头文件（templates / header.html），以及用于主网站内容的ngViews html偏分量（partials / foo.html）。该应用程序在桌面Web浏览器中正常工作（偶尔停止显示Test），但不会在移动设备上显示导航栏或html部分（只显示我包含的测试片段） 。
index.html
<！DOCTYPE html>
< html ng-app =profileApp>
< head>
< title> Patrick Ackerman - 首页< / title>
< meta name =viewportcontent =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 =stylesheettype =text / csshref =css / narrow.css>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.jstype =text / javascript>< / script>
< script src =http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.jstype =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 / javascriptsrc =slidemenu.js>< / script>
< script type =text / javascriptsrc =instastart.js>< / script>
< body style =background-color：＃F8FAE8>
< p>测试< / p>
< div ng-include src ='templates / header.html'>< / div>
< div ng-view>< / div>
< / body>
< / head>
< / html>
header.html
< script type =text / javascriptsrc =slidemenu.js>< / script>
< div class =fixed-nav-bar>
< strong><表格宽度=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 =xxxclass =menu1>< img class =iconsrc =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 =round2imgsrc =proportionalport.jpg/>< / a>< / div>< / td>< / table>< / div>
< ul ng-controller =MenuCtrlclass =ul>
< / 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;
}）;
}）;
$ b profileApp.config（['$ routeProvider'，function（$ routeProvider）{
$ routeProvider
// Home
.when（/，{templateUrl ：partials / home.html，控制器：MenuCtrl}）
.when（/ home，{templateUrl：partials / home.html，控制器：MenuCtrl}）
//页面
.when（/ books，{templateUrl：partials / books.html，controller：BookCtrl}）
.when（/ insta，{templateUrl：partials /insta.html，控制器：InstaCtrl}）
.when（/ education，{templateUrl：partials / education.html，控制器：EducationCtrl}）
.when / workHistory，{templateUrl：partials / workHistory.html，控制器：WorkCtrl}）
.when（/ hobbiesInterests，{templateUrl：partials / hobbiesInterests.html，控制器：HobbiesCtrl }）
//.when(\"/contact，{templateUrl：partials / contact.html，controller：PageCtrl}）
// else 404
.otherwise（ / 404，{templateUrl：partials / 404.html，控制器：PageCtrl}）;
} ]）;
我在测试它的网站可以在这里找到：
http://packtest.atwebpages.com/
< script src =http：/ /ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.jstype =text / javascript>< / script>
< script src =http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.min.js>< / script>
但角度路由模块是旧版本，并且仅在某些浏览器中兼容。我更新到当前版本（与核心角库相同的版本），现在它在我测试它的任何浏览器上工作（不同程度）。
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/
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.
这篇关于我的Angular JS应用程序适用于桌面浏览器，但不适用于移动浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
