Global variables do not update in the view with Angularjs

Asked

Viewed 484 times

1

I am creating a test application with Angularjs using the ngRoute route system, the controllers created 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/Contactoscontroller.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 place the function $controllerProvider.allowGlobals(); it still didn’t 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/Contactscoontroller.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 before, the views are being loaded and generated on the screen, only the variables in the $scope are not being shown.

angularjs

2 answers

2


I may be wrong, but I believe the definition of controller within an object consumed by when() should point to the name of the declared function of a controller, and not to a file .js - even because the same javascript can define several controllers. Thus:

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

  • I’m starting with javascript, and on second thought, it actually makes sense to be the name of controller and not the file .js. I’m using a plug that "helps" when writing the location of the files, and when detected the simple quotes it automatically gave the option to put the location of the file. Thank you.

  • @Vagnerrigonmizdal Not so it is always a pleasure to help!

1

Do it that way

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

You have to inform the controller and not the.js file.

Browser other questions tagged angularjs

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