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

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

Ответ 1

В ручном бутстранге вы 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);

Angular для загрузочных приложений.

Ответ 2

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

ОБНОВЛЕНИЕ: С тех пор я перешел на следующий метод, который, по моему мнению, более чист. Он работает как с ионным, так и с ванильным кордовым /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, потому что Кордове требуется больше времени, чтобы встать и работать на устройстве, чем простой старый код Javascript для AngularJS делает.

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

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

Ответ 3

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

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

По-прежнему нужно удалить ng-приложение из вашего элемента DOM.

Ответ 4

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

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

UPDATE

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

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

Ответ 5

При использовании решения от 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" разрешается процессом сборки "Кордова" или "Phonegap" и недоступен в вашей локальной или эмулируемой тестовой среде.

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

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

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

Ответ 6

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

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