Apache Cordova 和 AngularJS

在Cordova应用中使用类似AngularJS的框架是很常见的（或许更常见，因为它往往在创建应用时经常被用到）。

只有当Cordova应用触发deviceready事件时，才能使用插件等功能。您需要选择在deviceready事件触发之后还是之前进行应用绘制。

deviceready より後 – Cordova やプラグインの初期化が終わってからアプリを描画します。アプリが利用できるようになるのが少し遅れます。

deviceready より前 – Cordova やプラグインの初期化が終わる前にアプリを描画します。いち早くアプリが利用できるようになりますが、利用者に対し Cordova の機能を一時的に使わせないようにする工夫が必要です。

在deviceready事件触发后进行绘图。

从简单的开始！

如果使用ng-app指令，屏幕会在deviceready事件之前进行绘制。停止使用ng-app指令，并在deviceready事件后调用angular.bootstrap函数。

document.addEventListener('deviceready',ｆ function () {
  var appContainer = document.getElementById('app-container');
  angular.bootstrap(appContainer, ['app']);
}, false);

angular.module('app', ['ngCordova'])
  .component('myComponent', { /* ... */ });

将插件通过Browserify进行整合

在执行 cordova build的时候，加上 –browserify 参数会将 Cordova 插件合并为一个 JavaScript 文件。据说这样可以稍微提高性能。

在构建过程中使用Browserify编译插件JS，而不是在运行时。

$ cordova build --browserify

在启动画面上欺骗

使用Splash Screen插件，在deviceready事件触发后显示Splash Screen的方法。

$ cordova plugin add cordova-plugin-splashscreen

默认情况下，启动画面会显示3秒钟。在config.xml文件中添加，将启动画面的自动隐藏设置为OFF。

    <preference name="AutoHideSplashScreen" value="false" />

document.addEventListener('deviceready', function () {
  navigator.splashscreen.hide();
}, false);

在触发 deviceready 事件之前进行绘画。

通过在deviceready事件之前进行绘制，使应用程序可以更快地使用。然而，由于用户可以调用尚未完成初始化的Cordova功能，因此需要采取一些临时措施，如暂时禁用按钮。

我已经创建了一个AngularJS模块ng-deviceready.js，所以我们将使用它。

deviceReady.isDeviceReady属性提供了deviceready事件触发后的信息。通过查看该值，可以确定事件是否已经触发。将该属性设置为按钮的ng-disabled属性，可以在deviceready事件触发后让按钮变得可用。

angular.module('app', ['ngCordova', 'deviceready'])
  .component('myCamera', {
    controller: function ($cordovaCamera, deviceReady) {
      var that = this;

      // Until deviceready fired, button is disabled.
      that.disabled = function () {
        return !deviceReady.isDeviceReady;
      };

      that.take = function () {
        var options = {
          sourceType: Camera.PictureSourceType.CAMERA,
          destinationType: Camera.DestinationType.DATA_URL
        };

        $cordovaCamera.getPicture(options)
          .then(function (image) {
            that.image = 'data:image/jpeg;base64,' + image;
          });
      }
    },
    template: '<div>\n' +
    '<button ng-disabled="$ctrl.disabled()" ng-click="$ctrl.take()">take</button>\n' +
    '<img src="{{$ctrl.image}}">\n' +
    '</div>\n'
  });

总结

有很多方法可以实现，但如果应用程序的启动时间在可接受范围内，就可以在设备准备好后进行初始化，启用Browserify插件，并通过闪屏来掩盖。