angular + require.js :Failed to instantiate module

3
votes

My code : index.html

<html ng-app='Arrows'>
 <script data-main="main" src="require.js"></script>
<div ng-controller="My">
  {{status}}
</div>

And main.js file 

    require(["jquery","underscore","backbone",
"marionette","angular"], function($ ,_,Backbone,Marionette,angular){

      debugger

       var app = angular.module("Arrows")
      angular.element(document).ready(function () {
            angular.bootstrap(document, ['Arrows']);
        });  

      app.controller('My', function($scope) {
            $scope.status = 'hello! Its working!';
        });
    })

I have problem :

Uncaught Error: [$injector:modulerr] Failed to instantiate module Arrows due to: Error: [$injector:nomod] Module 'Arrows' 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.

3
angularjsrequirejs

3 Answers

8
votes

Remove the ng-app directive from your html. You already manually bootstrap it.

<script data-main="main" src="require.js"></script>
<div ng-controller="My">
  {{status}}
</div>

That has to be enough for code.

By the way I would not use Backbone and Angular in a same app.

1
votes

You must instantiate the module

angular.module('name', [])  // this will instantiate the module

angular.module('name')      // this will not instantiate the module and give you 
                            // an error if the previous line has not been called first. 
                            // This function can be used to add controllers, services 
                            // etc. to the module, for example in another file.
0
votes

From my understanding, this is a problem of loading sequence, I may be mistaken but according to what I've experienced:

  • the html files are loading first
  • requireJs file is executed

Then, the problem is that each time you use an angular directive, it is resolved before the actual module/controller/etc. is loaded.

The trick of bootstraping the app to the document works, but in order to have a fully fonctional application, you need to bootstrap everything manually and not using the "ng-controller" (and other directives).

For me, this is not a solution, just a workaround and I'm sure requireJs can (or should) do better, so either it's a requireJs' bug or there is another solution.

Hope this helps!