Estou criando uma aplicação de teste com AngularJs usando o sistema de rotas ngRoute, os controllers criados estão funcionando, porém, as variáveis globais neles não estão sendo atualizadas na view. O browser expressa um erro:
Error: [ng:areq] Argument 'controllers/ContatosController.js' is not a function, got undefined
Esse mesmo erro aparece quando o outro controller é requisitado. Achei um link, Controller not a function, got undefined, while defining controllers globally, onde diz no segundo exemplo da resposta onde é necessário colocar a função $controllerProvider.allowGlobals();
mesmo assim não funcionou.
Testei outros jeitos encontrados em outros posts mas nenhum me serviu.
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/ContatosController.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/contatos.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>
Como disse anteriormente, as views estão sendo carregadas e geradas na tela, somente as variáveis no $scope
não estão sendo mostradas.