it-swarm.com.de

Angular.js: Nicht erfasster Fehler, kein Modul: myapp

Ich versuche auch, ein angle.js-Projekt zu bootstrapen. Das ist meine index.html:

<!doctype html>
<html ng-app="myapp">
<head>
    <meta charset="utf-8">
    <base href="{% url 'app' %}" />

    <title>Project</title>
</head>
<body>
    <div ng-view>
        <p>Loading...</p>
    </div>

    <script>
        var url = function(path) { return '{{ STATIC_URL }}' + path };
    </script>
    <script src="{{ STATIC_URL }}js/jquery-1.10.1.js"></script>
    <script src="{{ STATIC_URL }}js/angular.js"></script>
    <script src="{{ STATIC_URL }}js/project/app.js"></script>
    <script src="{{ STATIC_URL }}js/project/controllers.js"></script>
</body>
</html>

Der url 'app' am Kopf druckt einfach den Unterpfad, beispielsweise/app. Das ist meine app.js:

'use strict';

var app = angular.module('myapp', []);

app.config(['$routeProvider', function($router) {
    $router.when('/', {
        templateUrl: url('partials/foo.html'),
        controller: controllers.Foo
    });
}]);

Das Problem ist, dass jedes Mal, wenn ich versuche, es auszuführen, eine Ausnahme ausgelöst wird: Uncaught Error: No module: myapp, und dies ist fast auf die gleiche Weise, wie angle-seed funktioniert. Ich habe bei Google und StackOverflow gesucht, aber keine der Antworten ( eins und zwei ) half mir.

Hier ist eine Geige über meinen Fehler (Sie sollten die Browserkonsole öffnen, um sie zu sehen). Was ist los?

23
Lucas Sampaio

Die Reihenfolge deines Skripts ist sehr wichtig, versuche es in deinen <head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
    var app = angular.module('myapp', []);

    app.controller('Ctrl', function($scope){
        $scope.variable = "Hello";
    });
</script>
<body ng-app="myapp">
    <div ng-controller="Ctrl">
        <p>{{variable}}</p>
    </div>    
</body>

Versuchen Sie es hier:

http://jsfiddle.net/vvfnN/2/

40
AlexCheuk

Als Antwort auf AlexCheuk wurde mir klar, dass meine app.js-Datei in eine Schließung verwickelt war:

(function($) {
    'use strict';

    // all angular.js stuff
)(jQuery);

Das Entfernen des Verschlusses hat funktioniert (ohne die Bestellungen zu ändern, wie Alex es sagte)! Ich weiß nicht genau warum, aber das ist in Ordnung.

10
Lucas Sampaio

Ich habe das gleiche Problem, aber keiner der oben genannten Tricks funktionierte für mich außer diesem, siehe Einstellung im Bild 

Wechsel von "OnLoad" zu "No wrap -"

 enter image description here

2
Ali Adravi

ich war mit dem gleichen Fehler konfrontiert, aber ich machte einen dummen Fehler. Ich habe die controller.js -Datei nicht in meine JSP-Seite eingefügt.

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/controller.js"></script>

und es hat hervorragend funktioniert.

0
Rajan Chauhan

In meinem Fall habe ich bei der Verwendung der IIFE-Notation vergessen, selbst Klammern aufzurufen.

(function () {
     angular.module("adminApp", []); 
}() //don't forget self invoke parentheses
);  
0
Erkan