2013-11-19 3 views
8

У меня есть веб-приложение angularJs, которое использует карты google api v3. Я использую ui-карту из углового ui.условно загрузочное приложение в angularjs

Моя проблема заключается в том, что приложение должно работать с плохой связностью. У меня работает автономное хранилище.

Проблема заключается в том, что пользовательский интерфейс карта нуждается в карты Google, чтобы загрузить перед загрузкой углового модуля так:

function onGoogleReady() { 
    angular.bootstrap(document.getElementById("body"), ['baseApp']); 
} 

... где onGoogleReady() является АНИ обратный вызов Google Maps.

Это отключает автономный режим, так как приложение не загружается, пока Карты Google не загрузятся, и это не произойдет в автономном режиме.

Как я могу условно загрузить приложение с ui-картой или без нее в зависимости от того, существует ли соединение или нет?

Я попытался запустить:

var app = angular.module('baseApp', ['ui.bootstrap', 'ngRoute', 'ui.validate', 'ui.keypress', 'ui.event', 'imageupload', 'LocalStorageModule']) 

, а затем

function onGoogleReady() { 
    app = angular.module('baseApp', ['ui.bootstrap', 'ngRoute', 'ui.map', 'ui.validate', 'ui.keypress', 'ui.event', 'imageupload', 'LocalStorageModule']) 
    angular.bootstrap(document.getElementById("body"), ['baseApp']); 
} 

, чтобы загрузить его снова с Ui-карте, когда карты нагрузки, но anuglar не позволяет снова привязки к одному элементу.

Я уверен, что есть хороший аккуратный способ сделать это, но мое понимание angularJS не хватает ...

UPDATE: Вот решение, которое я нашел:

Во-первых, не связывают приложение в HTML (нет нг-приложения) Далее, есть онлайн переменное:

var isOnline = false; 
function onGoogleReady() { 
    angular.bootstrap(document.getElementById("body"), ['baseApp', 'ui.map']); 
} 

Затем проверьте, если в Интернете. Если это так вставить Google Maps скрипт, который будет запускать обратный вызов с UI-карты, если не связать приложение без UI-карт:

var xmlhttp; 

     if (window.XMLHttpRequest) { 
      // code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp = new XMLHttpRequest(); 
     } else { 
      // code for IE6, IE5 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4) { 
       if (xmlhttp.status != '200') { 
        angular.bootstrap(document.getElementById("body"), ['baseApp']); 
       } else { 
        var script = document.createElement('script'); 
        script.type = 'text/javascript'; 
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=onGoogleReady'; 
        document.body.appendChild(script); 
       }; 
      } 
     } 
     xmlhttp.open("GET", "http://thisapp.com", true); 
     xmlhttp.send(); 
+0

Будет ли помощь в отношении инъекций? http://docs.angularjs.org/guide/di –

+0

Это поможет вам, http://stackoverflow.com/a/20278445/2837412 –

+0

Ни один из них не работает. Мне нужно было либо загрузить модуль с помощью ui-map, если он был онлайн, либо без него, когда он находится в автономном режиме. Я обновляю исходное сообщение с помощью решения, которое я нашел – user2890027

ответ

0

ли вы, вероятно, рассмотреть возможность использования RequireJS. И добавить резервный метод, если карты не могут быть загружены?

Смежные вопросы