我有一个利用Ionic.io,Cordova和AngularJS的项目。当我在命令提示符下使用“ionic serve”启动它时,它在我的计算机Chrome浏览器上运行良好。但是,当我使用“离子运行”将其启动到我连接的Android设备时,我得到的只是一个空白屏幕。它应该加载登录屏幕。这是代码:
这是app.js文件
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app = angular.module('starter', ['ionic','starter.controllers'])
app.run(function($ionicPlatform, $interval) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
$interval(function(){}, 1000);
})
app.config(function($stateProvider, $urlRouterProvider)
{
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('home',
{
url: '/home',
views:
{
'main_view':
{
templateUrl: 'main.html',
controller: 'appCtrl'
}
}
})
.state('login',
{
url: '/login',
views:
{
'main_view':
{
templateUrl: 'login.html',
controller: 'loginCtrl'
}
}
})
.state('contact',
{
url: '/contact',
views:
{
'main_view':
{
templateUrl: 'contact.html',
controller: 'contactCtrl'
}
}
});
$stateProvider
.state('home.timeline',
{
url: '/timeline',
views:
{
'timeline_tab':
{
templateUrl: 'home_items.html',
controller: 'timelineCtrl'
}
}
})
.state('home.news',
{
url: '/news',
views:
{
'news_tab':
{
templateUrl: 'home_items.html',
controller: 'newsCtrl'
}
}
})
.state('home.bulletins',
{
url: '/bulletins',
views:
{
'bulletins_tab':
{
templateUrl: 'home_items.html',
controller: 'bulletinsCtrl'
}
}
})
.state('home.requests',
{
url: '/requests',
views:
{
'requests_tab':
{
templateUrl: 'home_items.html',
controller: 'requestsCtrl'
}
}
});
});
这是index.html文件,它应该运行应用程序的所有内容,从登录屏幕开始,然后在登录时更改为其他内容屏幕
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!--<base href="http://www.comunicafacil.net/">-->
<!-- inject:js --><script src="js/api/models/User.js"></script><script src="js/api/models/Request.js"></script><script src="js/api/models/News.js"></script><script src="js/api/models/Image.js"></script><script src="js/api/models/Bulletin.js"></script><script src="js/api/models/Area.js"></script><script src="js/vendor/md5.js"></script><script src="js/api/ComunicaFacilAPI.js"></script><script src="js/api/ComunicaFacil.js"></script><!-- endinject -->
<!-- compiled css output -->
<link href="css/login.css" rel="stylesheet">
<link href="css/ionic.app.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="starter" ng-controller="indexCtrl">
this is the only text that will be displayed on the app screen
<ion-nav-view name="main_view">
</ion-nav-view>
</body>
我使用的cordova版本是5.4.1,我的设备是三星Galaxy Tab II,带有Android 4.1.2。 有什么我需要改变以允许在Android上使用ui-route吗? 是否还需要其他代码来识别问题?
答案 0 :(得分:0)
尝试把你的
<!-- inject:js --><script src="js/api/models/User.js"></script><script src="js/api/models/Request.js"></script><script src="js/api/models/News.js"></script><script src="js/api/models/Image.js"></script><script src="js/api/models/Bulletin.js"></script><script src="js/api/models/Area.js"></script><script src="js/vendor/md5.js"></script><script src="js/api/ComunicaFacilAPI.js"></script><script src="js/api/ComunicaFacil.js"></script><!-- endinject -->
<script src="js/controller.js"></script>
之后
白屏可能由任意数量的问题引起 - 正如你所建议的那样你可能想要使用chrome进行远程调试(这真是太棒了btw)来解决我们的错误。您还可以使用ionic run -l
,然后键入c
以获取日志并查看错误(电话和计算机需要位于同一个wifi网络上)。
我的猜测是你的代码在设备上轰炸,因为“角度未定义”或类似的东西(顺序很重要!)