我有一个使用谷歌地图 api v3 的 angularJs 网络应用程序。我正在使用来自 angular-ui 的 ui-map。
我的问题是,该应用程序需要在连接性较差的情况下运行。我的离线存储运行良好。
问题是 ui-map 需要在加载 angular 模块之前加载谷歌地图,如下所示:
function onGoogleReady() {
angular.bootstrap(document.getElementById("body"), ['baseApp']);
}
...其中 onGoogleReady() 是谷歌地图 api 回调。
这会将离线模式抛出窗口,因为应用程序在谷歌地图加载之前不会加载,并且不会离线发生。
如何根据是否有连接有条件地加载带有或不带有 ui-map 的应用程序?
我试过运行:
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']);
}
加载 map 时使用 ui-map 再次加载它,但 anuglar 不允许再次绑定(bind)到同一元素。
我敢肯定有一个很好的整洁的方式来做到这一点,但我对 angularJS 的理解是缺乏的......
更新:这是我找到的解决方案:
一、不要在html中绑定(bind)app(没有ng-app)
接下来,有一个在线变量:
var isOnline = false;
function onGoogleReady() {
angular.bootstrap(document.getElementById("body"), ['baseApp', 'ui.map']);
}
然后检查是否在线。如果是这样插入谷歌地图脚本,它将使用 ui-maps 运行回调,如果不绑定(bind)没有 ui-maps 的应用程序:
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();
最佳答案
您可能会考虑使用 RequireJS .如果无法加载 map ,并添加一个后备方法?
关于angularjs - 在 angularjs 中有条件地引导应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20067770/