title: conditionally bootstrap app in angularjs
body: <p>I have an angularJs web app that uses google maps api v3. I'm using ui-map from angular-ui.</p>
  
  <p>My issue is this, the app needs to function with poor connectivity. I've got offline storage working nicely.</p>
  
  <p>The problem is that ui-map needs google maps to load before loading the angular module like so:</p>
  
  <pre><code>function onGoogleReady() {
      angular.bootstrap(document.getElementById("body"), ['baseApp']);
  }
  </code></pre>
  
  <p>... where onGoogleReady() is the google maps api callback.</p>
  
  <p>This throws offline mode out the window since the app doesn't load until Google Maps loads and that won't happen offline.</p>
  
  <p>How could I conditionally load the app with or without ui-map depending on if there's a connection or not?</p>
  
  <p>I've tried running:</p>
  
  <pre><code>var app = angular.module('baseApp', ['ui.bootstrap', 'ngRoute', 'ui.validate', 'ui.keypress', 'ui.event', 'imageupload', 'LocalStorageModule'])
  </code></pre>
  
  <p>and then </p>
  
  <pre><code>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']);
  }
  </code></pre>
  
  <p>to load it again with ui-map when maps loads but anuglar doesn't allow binding to the same element again.</p>
  
  <p>I'm sure there's a nice tidy way to do it, but my angularJS understanding is lacking...</p>
  
  <p><strong>UPDATE: Here's the solution I found:</strong></p>
  
  <p>First, don't bind the app in the html (no ng-app)
  Next, have an online variable:</p>
  
  <pre><code>var isOnline = false;
  function onGoogleReady() {
      angular.bootstrap(document.getElementById("body"), ['baseApp', 'ui.map']);
  }
  </code></pre>
  
  <p>Then check if online. If so insert the google maps script which will run the callback with ui-maps, if not bind the app without ui-maps:</p>
  
  <pre><code>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&amp;sensor=false&amp;' + 'callback=onGoogleReady';
                      document.body.appendChild(script);
                  };
              }
          }
          xmlhttp.open("GET", "http://thisapp.com", true);
          xmlhttp.send();
  </code></pre>