为什么AngularJS ui-route不能在android平台上使用cordova?

时间:2015-12-16 19:04:56

标签: javascript android angularjs cordova

我有一个利用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吗? 是否还需要其他代码来识别问题?

1 个答案:

答案 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网络上)。

我的猜测是你的代码在设备上轰炸,因为“角度未定义”或类似的东西(顺序很重要!)