Cordova + Angularjs + Устройство Готово

Я занимаюсь разработкой мобильного приложения с использованием Cordova и AngularJS. Как ограничить загрузку AngluarJS до того, как устройство Cordova будет готово. По сути, я не хочу использовать какие-либо контроллеры AngularJS до готовности устройства.

Источник

6 ответов

Решение

Вручную загрузите приложение Angular:

Удалить свой ng-app атрибут из вашего HTML-кода, поэтому 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);

Электронная документация для загрузочных приложений.

Источник

Я использую следующее решение, которое позволяет загружать AngularJS при работе с Cordova, а также при работе непосредственно в браузере, где и происходит большая часть моей разработки. Вы должны удалить директиву ng-app со своей главной страницы index.html, так как это то, что заменяет ручной загрузчик.

ОБНОВЛЕНИЕ: С тех пор я перешел на следующий метод, который я считаю чище. Работает как для 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();
}

Если у вас возникли проблемы с методом обнаружения http / https, возможно, из-за загрузки приложения Cordova в телефон из Интернета, вместо этого можно использовать следующий метод:

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 из первого примера.

Зачем вручную загружать AngularJS с помощью Cordova/PhoneGap/Ionic?

Некоторые люди, попадающие сюда, могут не знать, почему вы хотите сделать это в первую очередь. Проблема в том, что у вас может быть код AngularJS, основанный на плагинах Cordova / PhoneGap / Ionic, и эти плагины не будут готовы до тех пор, пока AngularJS не запустится, потому что Cordova требуется больше времени для запуска и запуска на устройстве, чем простой старый код JavaScript для AngularJS делает.

Поэтому в этих случаях нам нужно подождать, пока Cordova / PhoneGap / Ionic будет готов, прежде чем запускать (загружать) AngularJS, чтобы Angular имел все необходимое для запуска.

Например, допустим, вы используете модуль NG-Persist Angular, который использует локальное хранилище для сохранения данных в браузере, плагин iOS Keychain при работе на iOS и файл cordova-plugin-file при работе на Android. Если ваше приложение Angular попытается загрузить / сохранить что-то сразу, проверка NG-Persist на window.device.platform (из плагина устройства) не удастся, потому что мобильный код еще не завершился, и вы ничего не получите но белая страница вместо вашего симпатичного приложения.

Источник

Если вы используете Ionic, это решение работает для браузеров и устройств. Кредит Ромгар в этой теме.

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

Еще нужно удалить ng-app из вашего DOM-элемента.

Источник

Это решение стало более надежным, когда я использовал:

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

ОБНОВИТЬ

Мое предложение заключалось в том, чтобы поместить вышеуказанное в соответствующую функцию устройства, например:

document.addEventListener("deviceready", function() {
    angular.element(document).ready(function () {
      var domElement = document.getElementById('appElement');
      angular.bootstrap(domElement, ["angularAppName"]);
    });
}, false);
Источник

При использовании решения от 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);

Также убедитесь, что загрузчик angular запускается после установки всех угловых модулей / контроллеров / заводов / директив и т. Д.

Источник

В большинстве случаев вам, вероятно, не нужно блокировать загрузку вашего углового приложения до тех пор, пока устройство не будет готово (учтите, что запуск устройства, готового к работе, может занять несколько секунд, если у вас много плагинов).

Вместо этого вы можете использовать что-то вроде этой библиотеки ( https://github.com/arnesson/angular-cordova), которая решает проблемы устройства уже автоматически, автоматически буферизуя вызовы, а затем выполняет их после запуска устройства.

Источник
Другие вопросы по тегам