Clever Geek Handbook

Angular + require.js: failed to instantiate module

My code: index.html

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

And the 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 a problem:

Unprepared error: [$ injector: modulerr] Failed to instantiate the Arrows module due to: Error: [$ injector: nomod] The Arrows module is not available! You either misspelled the name of the module, or forgot to load it. If registering the module ensures that you specify the dependencies as the second argument.

+3
angularjs requirejs


source to share


3 answers


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

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


This is enough for the code.

By the way, I would not use Backbone and Angular in the same application.

+8


source to share


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.
+1


source to share


In my opinion this is a sequence loading issue, I may be wrong, but according to what I experienced:

  • html files are loaded first. Performed
  • requireJs file

The problem then is that every time you use an angular directive it resolves to the actual module / controller / etc. is loaded.

The trick of loading the application into a document works, but for a fully functional application you need to load everything manually and not use 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 mistake for requireJs or there is another solution.

Hope this helps!

0


source to share






More articles:


All Articles
Loading...
X
Show
Funny
Dev
Pics