Angular: Module name is not loaded in the ngApp html tag

Asked

Viewed 250 times

0

I’m doing a basic angular test that reads a simple json and displays on the screen.

My problem is that when I put the module name in the ng-app tag, all functions of the angular stop working.

Inspecting Chrome code found error:

Failed to instantiate module Meumodulo due to: Error: [$injector:nomod] Module 'Meumodulo' is not available! You either misspelled the module name or forgot to load it. If registering a 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 the two changed the result.

I’m starting in the field studies and I have no idea what might be 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>
    <script src="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]" }
]

Upshot:

<!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>
    <script src="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>
javascript angularjs node.js bootstrap

  • you are starting the wrong module, the right would be var myModulo = angular.module('Meumodulo', ['ngRoute']);

  • a was a typo, but correct and still does not work.

1 answer

2

Dude, it blew up because you put module, and it’s module.

tries to do so:

angular.module('MeuModulo', ['ngRoute']);
angular.module('MeuModulo').controller('MeuController',funcion($scope, $http)

  • See also that the function are spelled wrong.

  • It didn’t work, my problem is when I tag ng-app the angular works, but if I put ng-app="Meumodulo" (or any name) it stops working. Even when I do something easier like this: <html ng-app="X"> <body> <Nav ng-click="$Event.preventDefault()"> <a href="#" ng-click="choice='Home'">Home</a> </Nav> <p>Look at your school: {choice}}</p> </body> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> </html>

Browser other questions tagged javascript angularjs node.js bootstrap

You are not signed in. Login or sign up in order to post.