Инициализировать мое приложение angularJs после Phonegap deviceready

У меня есть приложение phonegap, использующее AngularJS.

В моем приложении я использую плагин NetworkStatus для подтверждения типа подключения, используемого мобильным телефоном.

На моем корневом пути я разрешаю вызов Службы, вызывающей DeviceService, и он отвечает за доступ к navigator.network.connection.type и решает, включено ли соединение. переадресация посылает контроллеру (через функцию разрешения маршрута) переменную connectionState, которая объявляет состояние соединения.

На этом маршруте я хочу сделать ошибку, если соединение недоступно.

Сказав это, моя проблема заключается в том, что событие DeviceReady запускается после моего маршрута. поэтому мой маршрут не сможет завершить проверку соединения.

Как я могу синхронизировать, что приложение angular запускается только после запуска события DeviceReady?

Ответы

Ответ 1

Получение ошибки модуля инжектора из AngularJs обычно означает, что вы либо неправильно использовали имя модуля, либо angular просто не нашли его.

Если приложение angular работает правильно (например, если оно не завершено в телефонную защелку), это означает, что эта проблема в том, что происходит, когда загружается ваш index.html.

  • Кордова /PhoneGap загружает вашу индексную страницу
  • Его Webview анализирует его и загружает теги своих скриптов
  • Если какой-либо код не завернут в функции или объекты, он выполняется прямо сейчас
  • Phonegap отправляет событие deviceready, чтобы сообщить вашему приложению, что его мосты с собственным кодом готовы

Последние 2 операции могут выполняться в обоих порядках, но чаще всего в том, что я вам дал. Таким образом, если вы поместите свое имя модуля angular в тег html или body через ng-app, например, angular попытается загрузить его, когда он найдет его.

Итак, для его работы вам необходимо:

  • Удалить YourAppName из тега html/body
  • Создайте свой angular модуль нормально (его имя должно совпадать с вызовами начальной загрузки и модуля)
  • Используйте событие deviceready в качестве триггера для расширения вашего приложения.

Например (короткий пример, ничего, кроме css в голове):

<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
        {{2+2}}
        </div>
    </div>
    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript">
        document.addEventListener('deviceready', function onDeviceReady() {
            angular.bootstrap(document, ['YourAppName']);
        }, false);

        var YourAppName = angular.module('YourAppName', []);
    </script>
</body>

Если вы хотите понять это самостоятельно, я рекомендую положить некоторый console.log, чтобы получить порядок вещей.
Вы также можете использовать удаленную отладку Chrome DevTools, которая работает очень хорошо. Если у вас есть Chrome 32+ на вашем ПК и Android 4.4 на телефоне или только ПК, и вы отлаживаете эмулятор. Довольно приятно видеть ошибки и прочее. Отладка веб-просмотров сначала немного странная, но очень полезная для отслеживания ошибок!

Надеюсь, что это поможет

Ответ 2

Вам нужно сделать руководство angular.bootstrap (вместо использования ng-app):

 deviceReady = function() {
    angular.bootstrap(document, ['app']);
 };
 window.addEventListener('deviceready', deviceReady, false);

Ответ 3

Я использую следующее решение, которое позволяет загружать AngularJS при работе с Cordova, а также при запуске непосредственно в браузере, где и происходит большая часть моего развития. Это гарантирует, что Angular запускается после того, как Cordova/Phonegape готова, и все еще гарантирует, что он будет работать, когда вообще нет Cordova/PhoneGap.

// 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 в телефон из Интернета, вы можете использовать следующий метод:

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

Ответ 4

Этот метод больше не работает в iOS 9:

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();
}

Ответ 5

Вы не должны использовать такие обходные пути.

"cordova.js" не разрешается в браузере, поэтому событие "deviceready" никогда не запускается. Просто вызовите его вручную в консоли браузера для тестирования.

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