angularjs - 在 angularjs 中有条件地引导应用程序

Question

我有一个使用谷歌地图 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();

Answer 1

您可能会考虑使用 RequireJS .如果无法加载 map ，并添加一个后备方法？