I'm doing a basic angled test that reads a simple json and displays on the screen.
My problem is that when I put in the module name the module name in the ng-app tag all angular functions stop working.
Inspecting the chrome code I found the error:
Failed to instantiate module MyModule due to: Error: [$ injector: nomod] Module 'MyModule' is not available! You either misspelled the module name or forgot to load it. If registering module ensure that you specify the dependencies as the second argument.
NOTE: I tried to run this html directly in the browser and in Tomcat, neither of them changed the result.
I'm starting at angular studies and I have no idea what's missing.
HTML:
<!doctype html>
<html ng-app="MeuModulo">
<head>
<meta charset="utf-8">
<title>AngularJS - EX 3</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="teste3.js"></script>
</head>
<body ng-controller="MeuController">
<p><b>Lista:</b></p>
<ul>
<li ng-repeat="agenda in registros">
{{agenda.nome}} - <em>{{agenda.email}}</em>
</li>
</ul>
</body>
</html>
JS file:
//teste3.js
var myModulo = angular.module('MeuModulo', ['ngRoute']);
myModulo.controller('MeuController',funcion($scope, $http) {
$http.get('teste3.json')
.then(funcion(retorno){
$scope.registros = retorno.data;
});
});
JSON used:
[
{ "nome":"Rafael", "email":"[email protected]" },
{ "nome":"Yara", "email":"[email protected]" },
{ "nome":"Renan", "email":"[email protected]" },
{ "nome":"Thaisa", "email":"[email protected]" },
{ "nome":"Naiara", "email":"[email protected]" }
]
Outcome:
<!doctype html>
<html ng-app="MeuModulo">
<head>
<meta charset="utf-8">
<title>AngularJS - EX 3</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="teste3.js"></script>
</head>
<body ng-controller="MeuController">
<p><b>Lista:</b></p>
<ul>
<li ng-repeat="agenda in registros">
{{agenda.nome}} - <em>{{agenda.email}}</em>
</li>
</ul>
</body>
</html>