javascript - varios - Angular.js: Error no detectado, no hay módulo: myapp
varios controladores angularjs (6)
Estoy intentando también arrancar un proyecto angular.js. Este es mi 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>
La url ''app''
en la cabeza simplemente imprime la ruta secundaria, / app, por ejemplo. Esta es mi app.js:
''use strict'';
var app = angular.module(''myapp'', []);
app.config([''$routeProvider'', function($router) {
$router.when(''/'', {
templateUrl: url(''partials/foo.html''),
controller: controllers.Foo
});
}]);
El problema es que cada vez que intento ejecutarlo, Uncaught Error: No module: myapp
una excepción: Uncaught Error: No module: myapp
, y esto es casi de la misma forma angular-seed funciona la angular-seed . Busqué en Google y StackOverflow pero ninguna de las respuestas ( one y two ) me ayudó.
Aquí hay un fiddle sobre mi error (debe abrir la consola del navegador para verlo). ¿Qué va mal?
Complementando la respuesta de AlexCheuk , me di cuenta de que mi archivo app.js estaba involucrado en un cierre:
(function($) {
''use strict'';
// all angular.js stuff
)(jQuery);
¡Quitando el cierre funcionó (sin cambiar las órdenes como dijo Alex)! No sé exactamente por qué, pero eso está bien.
El orden de su script es muy importante, intente ponerlo en su <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>
Pruébalo aquí:
En mi caso, al usar la notación IIFE, me olvidé de invocar paréntesis.
(function () {
angular.module("adminApp", []);
}() //don''t forget self invoke parentheses
);
Estaba enfrentando el mismo error pero estaba cometiendo un error tonto, no estaba incluyendo el archivo controller.js en mi página jsp. acaba de incluir esto:
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/controller.js"></script>
y funcionó excelentemente.
Me encontré con un problema similar donde, mientras ejecutaba el servidor Yeoman / grunt. Lo que me lo arregló, fue reiniciar el servidor grunt.