I'm creating a test application with AngularJs using the ngRoute routing system, the created controllers are working, however, the global variables in them are not being updated in the view. The browser expresses an error:
Error: [ng: areq] Argument 'controllers / ContactsController.js' is not a function, got undefined
This same error appears when the other controller is requested. I found a link, Controller not a function, got undefined, while defining controllers globally , where it says in the second example of the answer where it is necessary to put the $controllerProvider.allowGlobals(); function even though it did not work.
I tested other ways found in other posts but none served me.
public / index.html
<!doctype html>
<html ng-app="contatooh">
<head>
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<title>Contatooh</title>
<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap-theme.css">
</head>
<body class="container">
<div ng-view></div>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular-route/angular-route.js"></script>
<script src="js/main.js"></script>
<script src="js/controllers/ContatosController.js"></script>
<script src="js/controllers/contatoController.js"></script>
</body>
</html>
public / js / main.js
angular.module('contatooh', ['ngRoute'])
.config(function($controllerProvider, $routeProvider) {
$controllerProvider.allowGlobals();
$routeProvider.when('/contatos',{
templateUrl: '../partials/contatos.html',
controller: 'controllers/ContatosController.js'
})
.when('/contato/:contatoId', {
templateUrl: '../partials/contato.html',
controller: 'controllers/ContatoController.js'
})
.otherwise({redirectTo: '/contatos'});
});
public / controllers / ContactsController.js
angular.module('contatooh').controller('ContatosController',
function($scope) {
$scope.total = 0;
$scope.incrementa = function() {
$scope.total++;
};
$scope.contatos = [{
"_id": 1,
"nome": "Contato Angular 1",
"email": "[email protected]"
}, {
"_id": 2,
"nome": "Contato Angular 2",
"email": "[email protected]"
}, {
"_id": 3,
"nome": "Contato Angular 3",
"email": "[email protected]"
}];
});
public / partials / contacts.html
<div class="jumbotron">
<h1 class="text-center">
Bem-vindo ao Contatooh
</h1>
</div>
<button class="btn btn-primary" ng-click="incrementa()">
Novo
</button>
<p>Contatos cadastrados: {{total}}</p>
<div class="table-responsive">
<table class="table table-hover">
<tr>
<th>NOME</th>
<th>E-MAIL</th>
<th class="text-center">Ação</th>
</tr>
<tr ng-repeat="contato in contatos">
<td>
<a>{{contato.nome}}</a>
</td>
<td>{{contato.email}}</td>
<td class="text-center">
<button class="btn btn-warning">
Remover
</buttom>
</td>
</tr>
</table>
</div>
As I said earlier, views are being loaded and generated on the screen, only the variables in $scope are not being displayed.