AngularJS .bootstrap() and Modules

Question

I'm having a problem, I need to load a module in the angular.boostrap and not before it but angular keeps loading it before I tell to load it.

Here I call the angular.boostrap method, this function is called as a callback of GMaps api so I know this is working because of the console.log

function onGoogleReady() {
  console.log("GMaps api initialized.");
  angular.bootstrap(document.getElementById('map', ['app.ui.map']));
}

and this is my module:

angular.module('myAppModule', ['ui.map'])
.controller('CtrlGMap', ['$scope', function($scope) {
    $scope.mapOptions = {
        center: new google.maps.LatLng(35.500, -78.500),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
}]);

and finally my app HTML

<html ng-app="myAppModule">

<section id="map">
    <div ui-map="myMap" ui-options="mapOptions" class="map-canvas"></div>
</section>

Michelle Tilley · Accepted Answer · 2013-09-11 23:52:20Z

2

The ng-app directive bootstraps your application. If you want to bootstrap it manually, you should not use ng-app. angular.bootstrap also takes the root module to bootstrap; in this case, this is your myAppModule module (which already depends on ui.map because of the angular.module definition). Thus, your code would look more like the following:

function onGoogleReady() {
  console.log("GMaps api initialized.");
  var body = document.getElementsByTagName('body')[0];
  angular.bootstrap(body, ['myAppModule'])
}

answered Sep 11, 2013 at 23:52

Michelle Tilley

159k40 gold badges379 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS .bootstrap() and Modules

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related