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

Posted 2023-02-19

【中文标题】在 angularjs 中有条件地引导应用程序

【英文标题】：conditionally bootstrap app in angularjs

【发布时间】：2013-12-02 18:47:15

【问题描述】：

我有一个使用 google maps api v3 的 angularJs 网络应用程序。我正在使用来自 angular-ui 的 ui-map。

我的问题是，应用程序需要在连接性较差的情况下运行。我的离线存储运行良好。

问题是 ui-map 需要在加载 angular 模块之前加载谷歌地图，如下所示：

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

...其中 onGoogleReady() 是谷歌地图 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中绑定app（没有ng-app） 接下来，有一个在线变量：

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

然后检查是否在线。如果是这样插入谷歌地图脚本，它将使用 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();

【问题讨论】：

依赖注入有帮助吗？ docs.angularjs.org/guide/di

这对你有帮助，***.com/a/20278445/2837412

这些都不起作用。我需要的是在在线时使用 ui-map 加载模块，或者在离线时不加载模块。我正在用我找到的解决方案更新原始帖子

【参考方案1】：

您可能会考虑使用RequireJS。如果地图无法加载，添加一个备用方法？

【参考方案2】：

前段时间我为我的个人项目创建了一项服务。检查它也许可以帮助你。

https://github.com/SaulBurgos/angularjs-module-googleMaps