Question

我一直在使用预先存在的静态网站设计，现在我开始将其转换为Angular JS webapp作为练习。我采取的第一步是将一些单独的页面转换为使用ngrepeat和一些JSON文件。在Stack Overflow的帮助下，我解决了这些问题，并决定接受ngRouting。我现在创建了一个带有基页（index.html）的站点，其中包含一个带有导航栏和弹出菜单的标题（templates / header.html）以及用于主站点内容的ngViews html partials（partials / foo.html）。该应用程序在桌面Web浏览器中正常工作（偶尔停止显示＆＃34;测试＆＃34;），但不会在移动设备上显示导航栏或html部分（仅显示＆＃34） ;测试＆＃34;我包含的片段）。

的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 JS应用程序适用于桌面浏览器，但不适用于移动浏览器

1 个答案: