Angular: Module name is not loaded in html ngApp tag

0

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>
    
asked by anonymous 29.06.2017 / 22:01

1 answer

2

Dude, why did you put module, and it's module.

try to do so:

angular.module('MeuModulo', ['ngRoute']);
angular.module('MeuModulo').controller('MeuController',funcion($scope, $http)
    
29.06.2017 / 22:16