ng5 - AngularJS: Error no detectado:[$ injector: modulerr] ¿No se pudo instanciar el módulo?
range slider angular 5 (6)
Soy nuevo en AngularJS y estoy trabajando en algunos documentos y tutoriales para aprender. Mi pregunta es en referencia a la serie de videos de Egghead, este video en particular, que muestra cómo armar un filtro de búsqueda básico. Quería usar esto en una aplicación real que estoy creando para un amigo con un pequeño negocio de fabricación de velas, pero cuando lo modifiqué para que fuera sus velas en lugar del elenco de los Vengadores (como se muestra en el video), recibí este error. :
Error no detectado: [$ injector: modulerr] Error al instanciar el módulo myApp debido a:
Error: [$ injector: nomod] ¡El módulo ''myApp'' no está disponible! O bien escribió mal el nombre del módulo o se olvidó de cargarlo. Si está registrando un módulo asegúrese de especificar ...
Copié una versión redactada (solo 3 miembros del reparto en la matriz) de EXACTAMENTE lo que hay en la demostración del video en un archivo jsfiddle y descubrí que todavía produce el mismo error. (Para referencia, la demostración de Egghead está aquí: http://www.thinkster.io/angularjs/ET1iee6rnm/angularjs-ngfilter ). He leído al menos media docena de preguntas similares en este sitio hasta ahora y probé todas las soluciones ofrecidas, pero ninguna de ellas se deshace de este error o causa que la búsqueda de los Vengadores, que funciona bien en la demostración del video, funcione realmente correctamente.
HTML:
<div ng-app="myApp">
<div ng-controller="AvengersCtrl">
<input type="text" ng-model="search.$" />
<table>
<tr ng-repeat="actor in avengers.cast | filter:search">
<td>{{actor.name}}</td>
<td>{{actor.character}}</td>
</tr>
</table>
</div>
</div>
Javascript:
var myApp = angular.module(''myApp'', []);
myApp.factory(''Avengers'', function () {
var Avengers = {};
Avengers.cast = [
{
name: "Robert Downey Jr.",
character: "Tony Stark / Iron Man"
},
{
name: "Chris Evans",
character: "Steve Rogers / Captain America"
},
{
name: "Mark Buffalo",
character: "Bruce Banner / The Hulk"
}
];
return Avengers;
})
function AvengersCtrl($scope, Avengers) {
$scope.avengers = Avengers;
}
En pocas palabras, ¿puede alguien ofrecer una solución que funcione y deshacerse de este error, así como explicar en inglés simple (no en el nivel de doctorado "Obscurese angular") qué lo causa (en pocas palabras) y qué debe ser? hecho para evitarlo?
Edición: Disculpas, pero el enlace jsfiddle al que se hace referencia anteriormente en el tutorial ya no está activo. He eliminado el enlace roto. El tutorial mencionado todavía está disponible para su visualización.
Intente usar el cuerpo sin envoltura en el violín o sin envoltura en su violín:
Fiddle de trabajo: jsfiddle.net/Q5hd6
Explicación :
Angular comienza a compilar el DOM cuando el DOM está completamente cargado . Registra su código para ejecutar onLoad (opción de onLoad en fiddle) => es demasiado tarde para registrar su módulo myApp porque angular comienza a compilar el DOM y angular ve que no hay un módulo llamado myApp y lanza una excepción.
Al usar No Wrap - In Head , su código se ve así:
<head>
<script type=''text/javascript'' src=''//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js''></script>
<script type=''text/javascript''>
//Your script.
</script>
</head>
Su script tiene una oportunidad de ejecutarse antes de que angular comience a compilar el DOM y el módulo myApp ya se haya creado cuando angular comience a compilar el DOM.
Para las personas que encuentran esta publicación antigua en la web al buscar el mensaje de error, existe otra causa posible del problema.
Podría simplemente tener un error tipográfico en su llamada al script, incluso si ya ha hecho las cosas descritas en la otra excelente respuesta. Así que asegúrese de que puede utilizar la ortografía correcta en las etiquetas de su script.
Para las personas que tienen el mismo error con un código similar:
$(function(){
var app = angular.module("myApp", []);
app.controller(''myController'', function(){
});
});
Eliminando el $ (function () {...}); Resuelto el error.
Resulta que recibí este error porque mi módulo solicitado is not bundled in the minification prosses debido a la falta de ortografía
así que asegúrese de que su módulo exista en el archivo js minificado (busque una palabra dentro de él para estar seguro)
Tienes que jugar con JSFiddle opción de carga:
configúrelo en " No wrap - in body " en lugar de "onload"
Fiddle de trabajo: http://jsfiddle.net/zQv9n/1/
Tuve que cambiar el archivo js, para incluir "function ()" al principio, y también "()" en la línea final. Que resolvio el problema