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

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

6 54
angularjs cordova angularjs-service

6 ответов:

вручную bootstrap вы угловой приложение:

удалить 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);

Угловое документация bootstrapping приложения.

83

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

обновление: С тех пор я переключился на следующий метод, который, я думаю, чище. Он работает для ионного, а также ваниль Кордова/PhoneGap. Это должен быть последний бит JavaScript для запуска-возможно, внутри скрипт тег перед / 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 функция из первого примера.

зачем вручную bootstrap AngularJS с Cordova / PhoneGap / Ionic?

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

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

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

67

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

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

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

32

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

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

обновление

мое предложение состояло в том, чтобы поместить вышеуказанное в соответствующую функцию 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);

Он не работает в браузере, потому что "Кордова.js " решается с помощью процесса построения Cordova или Phonegap и недоступна в вашей локальной или эмулированной среде тестирования.

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

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

также убедитесь, что bootstrap углового срабатывает после установки все вы угловые модули / контроллеры / фабрики / директивы и т. д.

2

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

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

0