移动应用程序中没有屏幕显示，WebApp 工作正常

Question

我是混合应用程序开发的新手，我正在尝试在 angularJS 中制作一个应用程序（不是 IONIC）。我的应用程序在浏览器中加载缓慢但它可以工作，但它在移动应用程序中根本不起作用.. 我使用 g运行t 为它提供服务。但似乎无法弄清楚如何让它在移动设备上工作.. index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
 <head>
<title>Quiz App</title>
<!--Stylesheets-->
<!--Bootstrap-->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />

<!-- injector:css -->
<link rel="stylesheet" href="styles/challenge.css">
<link rel="stylesheet" href="styles/discussion.css">
<link rel="stylesheet" href="styles/game.css">
<link rel="stylesheet" href="styles/login.css">
<link rel="stylesheet" href="styles/loginMail.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/profile.css">
<link rel="stylesheet" href="styles/ranking.css">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/subjects.css">
<link rel="stylesheet" href="styles/topics.css">
<!-- endinjector -->

<script src="cordova.js"></script>
<!--Scripts-->
<!-- JQuery-->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js" ></script>
<!-- AngularJS-->
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-route/angular-route.js"></script>
<!--<script type="text/javascript" src="bower_components/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="bower_components/angular-touch/angular-touch.js"></script>-->
<!--Supersonic-->
<!--<script type="text/javascript" src="bower_components/supersonic/supersonic.js"></script>
<script type="text/javascript" src="bower_components/supersonic/supersonic.core.js"></script>-->
<!--Bootstrap-->
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.js"></script>


<!-- Application -->
<!-- injector:js -->
<script src="scripts/App.js"></script>
<script src="scripts/config/Route.js"></script>
<script src="scripts/services/DiscussionService.js"></script>
<script src="scripts/services/ProfileService.js"></script>
<script src="scripts/services/RankingService.js"></script>
<script src="scripts/services/SubjectService.js"></script>
<script src="scripts/controllers/0-ExamBattleController.js"></script>
<script src="scripts/controllers/Body/0-BodyController.js"></script>
<script src="scripts/controllers/Body/BodyController.js"></script>
<script src="scripts/controllers/ChallengeController.js"></script>
<script src="scripts/controllers/DiscussionController.js"></script>
<script src="scripts/controllers/GameController.js"></script>
<script src="scripts/controllers/LoginController.js"></script>
<script src="scripts/controllers/ProfileController.js"></script>
<script src="scripts/controllers/RankingController.js"></script>
<script src="scripts/controllers/SubjectController.js"></script>
<!-- endinjector -->

</head>
<body id="body">
<!--<p>App has loaded</p>-->
<div id="main" ng-view></div>

</body>
</html>

这是我的应用运行和配置

var BaseImagesUrl = 'images/';
var BaseTemplateUrl = 'templates/';

var app= angular.module('app', ['ngRoute']);

app.run(function($rootScope, $timeout, $location, $route){
    $rootScope.login = {};
    $rootScope.test = "Hello World";
    alert("app is running");
    console.log($route);
});

配置在这里：

app.config(function($locationProvider,$routeProvider) {

$routeProvider
    .when('/', {
        templateUrl: BaseTemplateUrl + 'login.html',
        controller: 'LoginController'
    })
    .when('/loginMail', {
        templateUrl: BaseTemplateUrl + 'loginMail.html',
        controller: 'LoginController'
    })
     .otherwise({
        redirectTo: '/'
    });

});

Answer 1

您应该使用 cordova CLI 创建您的项目。

点赞：https://cordova.apache.org/docs/en/5.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface

几个月前我在使用 cordova 时遇到了很多问题，所以我将我的源代码移到了一个使用 CLI 创建的新项目并且一切正常。

当您转向 CLI 时，您应该考虑的最重要的事情是 CLI 编译器提供给您的调试信息。

Answer 2

请尝试在 onDeviceReady 中启动 angular 应用程序。

onDeviceReady : function() {
   angular.element(document).ready(function() {
      angular.bootstrap(document, ['examBattle']);
 });

}

删除 ng-app

谢谢，马丹

移动应用程序中没有屏幕显示，WebApp 工作正常

No Screen Shows up in Mobile App, WebApp working fine

android

angularjs

cordova

hybrid-mobile-app