1

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.

2 Respostas 2

2

Eu posso estar errado, porém acredito que a definição de controller dentro de um objeto consumido por when() deve apontar para o nome da função declarada de um controller, e não para um arquivo .js - até porque um mesmo javascript pode definir vários controllers. Assim:

    $routeProvider.when('/contatos',{
        templateUrl: '../partials/contatos.html',
        controller: 'ContatosController'
    })
2
  • Estou começando com javascript, e pensando bem, faz sentido mesmo ser o nome do controller e não o arquivo .js. Tô utilizando um pluguin que "ajuda" na hora de escrever o local dos arquivos, e quando detectou as aspas simples ele automaticamente deu a opção de colocar o local do arquivo. Obrigado.
    – O_Vagner
    Commented 24/05/2016 às 17:17
  • @VagnerRigonMizdal Não por isso, é sempre um prazer ajudar!
    – OnoSendai
    Commented 24/05/2016 às 17:18
1

Faça dessa forma

 $routeProvider.when('/contatos',{
        templateUrl: '../partials/contatos.html',
        controller: 'ContatosController'
    })

Você tem que informar o controller e não o arquivo.js

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .