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