angularjs中的有条件的bootstrap应用程序

Question

我有一个使用谷歌地图api v3的angularJs网络应用程序.我正在使用angular-ui的ui-map.

我的问题是,应用程序需要在连接不良的情况下运行.我有离线存储很好地工作.

问题是ui-map需要在加载角度模块之前加载谷歌地图,如下所示:

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

...其中onGoogleReady()是google maps api回调.

这会将离线模式抛出窗口,因为应用程序在加载Google地图之前不会加载,并且不会离线发生.

如果有或没有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']);
}

在加载地图时使用ui-map再次加载它,但是anuglar不允许再次绑定到同一个元素.

我确信有一个很好的整洁方式,但我的angularJS理解缺乏...

更新:这是我找到的解决方案:

首先,不要在html中绑定应用程序(无ng-app)接下来,有一个在线变量:

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

然后检查是否在线.如果是这样,请插入google maps脚本,该脚本将使用ui-maps运行回调,如果没有使用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。并在地图无法加载时添加后备方法？