0

I'm a beginner on angular. I've got a need to make multiple webservice calls and then bootstrap my model. I've tried placing the following code inside my function that is executed after all webservices have run.

        var myApp = angular.module('myApp', [])
        myApp.controller('Ctrl', ['$scope', function ($scope) {
            $scope.obj = model
        }]);

        angular.element(document).ready(function () {
            angular.bootstrap(document, ['myApp']);
        });

But I receive the following exception.

[$injector:modulerr] Failed to instantiate module myApp due to: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

My code still works, but I want to get rid of the exception and more importantly learn how the angular code should be structured when the bootstrapping is delayed.

I don't know if this will help, but I'm including it in case. 

    <div ng-app ng-controller="Ctrl">
       <div ng-repeat="o in obj track by $index">
       </div>
       <input id="Model" type="hidden" value="{{obj}}" />
    </div>
Troy
  • 379
  • 5
  • 22
  • 1
    looks fine http://jsfiddle.net/arunpjohny/6tybn02d/2/ – Arun P Johny May 14 '15 at 04:15
  • I'm concerned that my issue might be related to where this code is in my page. It's in a function that is called after some webservices return data. So there is around a seven second delay until this code is called. I'd put together a fiddle, but I'm not sure how to emulate this delayed call outside my environment. And like you demonstrated, if I just make the call immediately in a fiddle I always got it to work fine. – Troy May 14 '15 at 04:19
  • 1
    seems to be fine with delay also - http://jsfiddle.net/arunpjohny/6tybn02d/4/ – Arun P Johny May 14 '15 at 04:34
  • 1
    also make sure there are no `ng-app` attributes in the html markup – Arun P Johny May 14 '15 at 04:36
  • Hadn't seen your suggestion about ng-app as I was posting my answer. That was it. Thanks! – Troy May 14 '15 at 04:37

1 Answers1

0

I found from earlier attempts to get it working that I added the following to the html tag.

ng-app="myApp"

When I removed it my error went away. I believe this is how you would perform automatic bootstrapping, but since I needed delayed bootstrapping it was causing issues. Here is a link for more information on the directive

ng-app directive

If someone more familiar with angular could verify my understanding I would appreciate it. Thank you Arun for your fiddle.

Troy
  • 379
  • 5
  • 22