0

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>

1 Answer 1

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'])
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.