web-dev-qa-db-ja.com

Cordova + Angularjs +デバイス対応

CordovaとAngularJSを使用してモバイルアプリケーションを開発しています。 Cordovaデバイスの準備ができる前にAngluarJSのブートストラップを制限するにはどうすればよいですか。基本的に、デバイスの準備ができる前にAngularJSコントローラーを使用したくありません。

angularjscordovaangularjs-service
55
Anwer

手動でbootstrap= your Angular app：

HTMLコードからng-app属性を削除して、Angularは自動的に起動しません。

JavaScriptコードに次のようなものを追加します。

document.addEventListener("deviceready", function() {
    // retrieve the DOM element that had the ng-app attribute
    var domElement = document.getElementById(...) / document.querySelector(...);
    angular.bootstrap(domElement, ["angularAppName"]);
}, false);

bootstrapping appsの角度付きドキュメント。

84
TheHippo

私は次のソリューションを使用しています。これにより、Cordovaで実行するときにAngularJSをブートストラップすることができ、ブラウザで直接実行するときに、私の開発が行われます。メインのindex.htmlページからng-appディレクティブを削除する必要があります。これは、手動のブートストラップによって置き換えられるためです。

UPDATE：それ以来、私は次の方法に切り替えました。これはIonicおよびVanilla Cordova/PhoneGapに対して機能します。実行するJavaScriptの最後のビットである必要があります-おそらくscriptタグの前/ bodyタグ。

  angular.element(document).ready(function () {
    if (window.cordova) {
      console.log("Running in Cordova, will bootstrap AngularJS once 'deviceready' event fires.");
      document.addEventListener('deviceready', function () {
        console.log("Deviceready event has fired, bootstrapping AngularJS.");
        angular.bootstrap(document.body, ['app']);
      }, false);
    } else {
      console.log("Running in browser, bootstrapping AngularJS now.");
      angular.bootstrap(document.body, ['app']);
    }
  });

私が使用した古いソリューションは次のとおりです。

// This is a function that bootstraps AngularJS, which is called from later code
function bootstrapAngular() {
    console.log("Bootstrapping AngularJS");
    // This assumes your app is named "app" and is on the body tag: <body ng-app="app">
    // Change the selector from "body" to whatever you need
    var domElement = document.querySelector('body');
    // Change the application name from "app" if needed
    angular.bootstrap(domElement, ['app']);
}

// This is my preferred Cordova detection method, as it doesn't require updating.
if (document.URL.indexOf( 'http://' ) === -1 
        && document.URL.indexOf( 'https://' ) === -1) {
    console.log("URL: Running in Cordova/PhoneGap");
    document.addEventListener("deviceready", bootstrapAngular, false);
} else {
    console.log("URL: Running in browser");
    bootstrapAngular();
}

WebからCordovaアプリを電話にロードすることが原因で、http/https検出方法で問題が発生した場合は、代わりに次の方法を使用できます。

function bootstrapAngular() {
    console.log("Bootstrapping AngularJS");
    // This assumes your app is named "app" and is on the body tag: <body ng-app="app">
    // Change the selector from "body" to whatever you need
    var domElement = document.querySelector('body');
    // Change the application name from "app" if needed
    angular.bootstrap(domElement, ['app']);
}

// This method of user agent detection also works, though it means you might have to maintain this UA list
if (navigator.userAgent.match(/(iOS|iPhone|iPod|iPad|Android|BlackBerry)/)) {
    console.log("UA: Running in Cordova/PhoneGap");
    document.addEventListener("deviceready", bootstrapAngular, false);
} else {
    console.log("UA: Running in browser");
    bootstrapAngular();
}

最初の例と同じbootstrapAngular関数が必要なことに注意してください。

なぜ手動でbootstrap Cordova/PhoneGap/Ionicを使用したAngularJS？

ここにたどり着く人の中には、そもそもなぜこれをしたいのかわからない人がいるかもしれません。問題は、Cordova/PhoneGap/Ionicプラグインに依存するAngularJSコードがある可能性があり、それらのプラグインはAngularJSが開始されるまで準備ができていないためです。 AngularJSの場合。

したがって、これらの場合、AngularJSを起動（ブートストラップ）する前にCordova/PhoneGap/Ionicの準備ができるまで待機する必要があるため、Angularが実行に必要なすべてを備えています。

たとえば、 NG-Persist Angularモジュールを使用している場合、ブラウザでデータを保存するためにローカルストレージを使用します） iOS Keychain plugin iOSで実行する場合、および cordova-plugin-file Androidで実行する場合Angularアプリがすぐに何かをロード/保存しようとする場合、モバイルコードがまだ起動を完了していないため、NG-Persistのwindow.device.platform（ device plugin から）のチェックは失敗し、あなたの代わりに白いページしか得られませんかわいいアプリ。

68
Michael Oryl

Ionic を使用している場合、このソリューションはブラウザーとデバイスで機能します。この thread の romgar に感謝します。

window.ionic.Platform.ready(function() {
    angular.bootstrap(document, ['<your_main_app']);
});

それでも、DOM要素からng-appを削除する必要があります。

32
Wade Anderson

このソリューションは、以下を使用するとより堅牢になりました。

angular.element(document).ready(function () {
  var domElement = document.getElementById('appElement');
  angular.bootstrap(domElement, ["angularAppName"]);
});

[〜＃〜] update [〜＃〜]

私の提案は、適切なデバイスレディ機能内に上記を入れることでした、例えば：

document.addEventListener("deviceready", function() {
    angular.element(document).ready(function () {
      var domElement = document.getElementById('appElement');
      angular.bootstrap(domElement, ["angularAppName"]);
    });
}, false);
5
levsa

TheHippoのソリューションを使用する場合：

document.addEventListener("deviceready", function() {
    // retrieve the DOM element that had the ng-app attribute
    var domElement = document.getElementById(...) / document.querySelector(...);
    angular.bootstrap(domElement, ["angularAppName"]);
}, false);

「cordova.js」はCordovaまたはPhonegap構築プロセスによって解決され、ローカルホストまたはエミュレートされたテスト環境では使用できないため、ブラウザーでは機能しません。

したがって、「deviceready」イベントは発生しません。ブラウザコンソールで手動で起動するだけです。

var customDeviceReadyEvent = new Event('deviceready');
document.dispatchEvent(customDeviceReadyEvent);

また、bootstrap of angular=すべてのユーザーを設定した後にトリガーされるangular modules/controllers/factories /ディレクティブなど.

2
devjsp

ほとんどの場合、おそらくdevicereadyが終わるまでangularアプリのロードをブロックする必要はありません（多くのプラグインがある場合、devicereadyが起動するまでに数秒かかることがあります）。

代わりに、このlib（ https://github.com/arnesson/angular-cordova ）のようなものを使用することができます。 。

0
ropsnou