我应该将 deviceready 放在多页 PhoneGap App 的什么位置？答案

【问题标题】：Where should I put deviceready on multipage PhoneGap App?我应该将 deviceready 放在多页 PhoneGap App 的什么位置？
【发布时间】：2014-05-28 14:04:56
【问题描述】：

1) 我有多个PhoneGap 应用程序页面。他们每个人都可以调用PhoneGap API。我应该把deviceready监听器放在每一页上，还是只放在第一页就足够了？

2) 我使用带有<ng-view> 的AngularJS 路由来启用单页应用程序。主页是index.html，所有其他页面都嵌入在<ng-view>inside index.html。这些页面中的每一个都可能调用 PhoneGap API。仅将 deviceready 侦听器放在 index.html 上就足够了吗？

【问题讨论】：

标签： javascript android ios angularjs cordova

【解决方案1】：

只需在 index.html 中添加设备就绪，就像在 angualrjs 中一样，所有其他页面都将由 ng-view 包含在 index.html 中。 deviceready 应该以这种方式正常工作。

在调用 deviceready 后，还要引导您的 angularjs，因为如果您要离线使用您的应用程序，它可能会导致问题。

希望这会有所帮助。

【讨论】：

【解决方案2】：

我通过将设备准备好放入 index.html 并在 deviceready 回调中引导 angularjs 使其工作。但是它并没有优化，因为它会阻塞 UI 渲染，直到与 PhoneGap 本地进程建立连接。

here 描述了更好的方法。基本上他使用承诺模式，因此只有 Phonegap API 调用等待 deviceready 事件。 UI 渲染和 angularjs 绑定甚至可以在调用 deviceready 之前完成。这样，用户体验会更好。

angular.module('fsCordova', [])
.service('CordovaService', ['$document', '$q',
  function($document, $q) {

    var d = $q.defer(),
        resolved = false;

    var self = this;
    this.ready = d.promise;

    document.addEventListener('deviceready', function() {
      resolved = true;
      d.resolve(window.cordova);
    });

    // Check to make sure we didn't miss the 
    // event (just in case)
    setTimeout(function() {
      if (!resolved) {
        if (window.cordova) d.resolve(window.cordova);
      }
    }, 3000);
}]);

angular.module('myApp', ['fsCordova'])
.controller('MyController', 
  function($scope, CordovaService) {
    CordovaService.ready.then(function() {
      // Cordova is ready
    });
});

【讨论】：