web-dev-qa-db-fra.com

Erreur: [ng: areq] à partir de angular contrôleur

C'est un long coup, mais quelqu'un a-t-il déjà vu cette erreur? J'essaie d'ajouter 'Transporters' en utilisant express, angular et mongoDB. Je reçois cette erreur chaque fois que j'accède à une page gérée par le contrôleur de transporteurs:

Error: [ng:areq] http://errors.angularjs.org/1.2.12/ng/areq?p0=TransportersController&p1=not%20aNaNunction%2C%20got%20undefined
    at Error (native)
    at http://localhost:3000/lib/angular/angular.min.js:6:450
    at tb (http://localhost:3000/lib/angular/angular.min.js:18:360)
    at Pa (http://localhost:3000/lib/angular/angular.min.js:18:447)
    at http://localhost:3000/lib/angular/angular.min.js:62:17
    at http://localhost:3000/lib/angular/angular.min.js:49:43
    at q (http://localhost:3000/lib/angular/angular.min.js:7:386)
    at H (http://localhost:3000/lib/angular/angular.min.js:48:406)
    at f (http://localhost:3000/lib/angular/angular.min.js:42:399)
    at http://localhost:3000/lib/angular/angular.min.js:42:67

Le contrôleur de transporteurs ressemble à ceci:

'use strict';

angular.module('mean.transporters').controller('TransportersController', ['$scope', '$routeParams', '$location', 'Global', 'Transporters', function ($scope, $routeParams, $location, Global, Transporters) {
    $scope.global = Global;

    $scope.create = function() {
        var transporter = new Transporters({
            name: this.name,
            natl_id: this.natl_id,
            phone: this.phone
        });
        transporter.$save(function(response) {
            $location.path('transporters/' + response._id);
        });

        this.title = '';
        this.content = '';
    };

    $scope.remove = function(transporter) {
        if (transporter) {
            transporter.$remove();

            for (var i in $scope.transporters) {
                if ($scope.transporters[i] === transporter) {
                    $scope.transporters.splice(i, 1);
                }
            }
        }
        else {
            $scope.transporter.$remove();
            $location.path('transporters');
        }
    };

    $scope.update = function() {
        var transporter = $scope.transporter;
        if (!transporter.updated) {
            transporter.updated = [];
        }
        transporter.updated.Push(new Date().getTime());

        transporter.$update(function() {
            $location.path('transporters/' + transporter._id);
        });
    };

    $scope.find = function() {
        Transporters.query(function(transporters) {
            $scope.transporters = transporters;
        });
    };

    $scope.findOne = function() {
        Transporters.get({
            transporterId: $routeParams.transporterId
        }, function(transporter) {
            $scope.transporter = transporter;
        });
    };
}]);

Dans mes vues, j'appelle la liste et crée des méthodes. Ils génèrent l'erreur ci-dessus

Je l'ai reçu de la angular docs pour ng: areq bien que je ne puisse toujours pas comprendre ce qui se passe

AngularJS affirme souvent que certaines valeurs seront présentes et vraies à l'aide d'une fonction d'assistance. Si l'assertion échoue, cette erreur est renvoyée. Pour résoudre ce problème, assurez-vous que la valeur attendue par l'assertion est définie et véridique.

Voici la vue qui appelle le contrôleur public/views/transporters/list.html:

<section data-ng-controller="TransportersController" data-ng-init="find()">
    <ul class="transporters unstyled">
        <li data-ng-repeat="transporter in transporters">
            <span>{{transporter.created | date:'medium'}}</span> /
            <h2><a data-ng-href="#!/transporters/{{transporter._id}}">{{transporter.name}}</a></h2>
            <div>{{transporter.natl_id}}</div>
            <div>{{transporter.phone}}</div>
        </li>
    </ul>
    <h1 data-ng-hide="!transporters || transporters.length">No transporters yet. <br> Why don't you <a href="/#!/transporters/create">Create One</a>?</h1>
</section>

Code de service des transporteurs:

angular.module('transporterService', [])
    .factory('Transporter', ['$http', function($http){
        // all return promise objects
        return {
            get: function(){
                return $http.get('/api/transporters');
            },
            create: function(transporterData){
                return $http.post('/api/transporters', transporterData);
            },
            delete: function(id){
                return $http.delete('/api/transporters/'+id);
            }
        };
    }]);
javascriptangularjsangularjs-controllermean-stack
64
Connor Leech

J'ai vécu cette erreur une fois. Le problème était que j'avais défini angular.module () à deux endroits avec des arguments différents.

Par exemple:

var MyApp = angular.module('MyApp', []);

ailleurs

var MyApp2 = angular.module('MyApp', ['ngAnimate']);
81
Tharanga

J'ai eu cette erreur deux fois:

1) Quand j'ai écrit:

var app = module('flapperNews', []);

au lieu de:

var app = angular.module('flapperNews', []);

2) Lorsque j'ai copié et collé du code HTML, et que le nom du contrôleur dans le code HTML ne correspond pas exactement au nom du contrôleur dans mon fichier app.js, par exemple:

index.html:

<script src="app.js"></script>
...
...
<body ng-app="flapperNews" ng-controller="MainCtrl">

app.js:

var app = angular.module('flapperNews', []);

app.controller('MyCtrl', ....

Dans le code HTML, le nom du contrôleur est "MainCtrl", et dans le js j'ai utilisé le nom "MyCtrl".

Il y a en fait un message d'erreur intégré dans l'URL d'erreur:

Erreur: [ng: areq] http://errors.angularjs.org/1.3.2/ng/areq?p0= MainCtrl & p1 = pas % 20 a % 20 fonction % 2C% 20 a obtenu % 20 undefined

La voici sans les hiéroglyphes:

MainCtrl pas une fonction eu undefined

En d'autres termes, "Il n'y a pas de fonction nommée MainCtrl. Vérifiez votre orthographe."

32
7stud

J'ai rencontré ce problème lorsque j'avais défini le module dans le contrôleur Angular, mais je n'ai pas défini le nom de l'application dans mon fichier HTML. Par exemple:

<html ng-app>

au lieu du correct:

<html ng-app="myApp">

quand j'avais défini quelque chose comme:

angular.module('myApp', []).controller(...

et référencé dans mon fichier HTML.

25
Anthony Panozzo

vous avez oublié d'inclure le contrôleur dans votre index.html. Le contrôleur n'existe pas.

<script src="js/controllers/Controller.js"></script>
14
ali pournemat

J'ai eu la même erreur et le problème est que je n'ai pas injecté le nouveau module dans l'application principale

var app = angular.module("geo", []);
...

angular
    .module('myApp', [
        'ui.router',
        'ngResource',
        'photos',
        'geo' //was missing
    ])
5
Angel M.

J'ai eu cette erreur aussi, j'ai changé le code comme ça puis ça a fonctionné.

html

 <html ng-app="app">

   <div ng-controller="firstCtrl">
       ...
   </div>

 </html>

app.js

(function(){

    var app = angular.module('app',[]);

    app.controller('firstCtrl',function($scope){    
         ...
    })

})();

Vous devez vous assurer que le nom dans le module est identique à ng-app

then div sera dans la portée de firstCtrl

4
tobyui

Vérifiez le nom de votre angular module ... quel est le nom de votre module dans votre app.js?

Dans votre TransportersController, vous avez:

angular.module('mean.transporters')

et dans votre TransportersService vous avez:

angular.module('transporterService', [])

Vous voudrez probablement référencer le même module dans chacun:

angular.module('myApp')
4
Chris

Le même problème s'est produit avec moi, mais mon problème était que je n'ajoutais pas le FILE_NAME_WHERE_IS_MY_FUNCTION.js

donc mon fichier.html n'a jamais trouvé où était ma fonction

Une fois que j'ai ajouté le "file.js" j'ai résolu le problème

<html ng-app='myApp'>
    <body ng-controller='TextController'>
    ....
    ....
    ....
    <script src="../file.js"></script>
    </body>
</html>

:)

4
Jorge Casariego

J'ai cette erreur lorsque le nom du contrôleur n'était pas le même (sensibilité à la casse!):

.controller('mainCOntroller', ...  // notice CO

et en vue

<div class="container" ng-controller="mainController">  <!-- notice Co -->
3
Dalibor

J'ai eu cette même erreur quand j'ai inclus le nom de fichier du contrôleur complet dans les Routes comme ceci:

app.config(function($routeProvider) {
    $routeProvider 
    .when('/', { 
        templateUrl: 'home.html',
        controller: 'mainController.js'
    })

    .when('/portfolio', { 
        templateUrl: 'portfolio.html',
        controller: 'mainController.js'
    })
});

Quand cela devrait être

app.config(function($routeProvider) {
    $routeProvider 
    .when('/', { 
        templateUrl: 'home.html',
        controller: 'mainController'
    })

    .when('/portfolio', { 
        templateUrl: 'portfolio.html',
        controller: 'mainController'
    })
});

Angular prend certaines choses que vous appelez, comme l'application et le contrôleur, et les expose dans des directives et dans l'ensemble de votre application, veillez à tout nommer de manière cohérente et vérifiez-le lors du débogage.

2
Virge Assault

Je sais que cela semble stupide, mais ne le vois pas encore ici :). J'ai eu cette erreur en oubliant le crochet de fermeture sur une fonction et son point-virgule associé, car il était anonyme assigné à un var à la fin de mon contrôleur.

Il semble que de nombreux problèmes avec le contrôleur (qu’ils soient dus à une erreur d’injection, à la syntaxe, etc.) provoquent cette erreur.

2
Nick Brady

La même erreur s'est produite dans une application de démonstration concernant la sécurité et l'état de la connexion. Aucune des autres solutions n'a aidé, mais simplement ouvrant une nouvelle fenêtre de navigateur anonyme a fait l'affaire.

En gros, il restait des cookies et des jetons d'une version précédente de l'application qui mettait AngularJS dans un état qu'elle n'avait jamais été supposée atteindre. Par conséquent, les assertions areq ont échoué.

1
dirkjot

Cela m'est arrivé lorsque j'ai plusieurs angular modules sur la même page.

J'ai rencontré cette erreur lorsque j'ai utilisé des vues partielles

Une vue partielle avait

<script src="~/Scripts/Items.js"></script>
<div ng-app="SearchModule">
    <div ng-controller="SearchSomething" class="col-md-1">
        <input class="searchClass" type="text" placeholder="Search" />
    </div>
</div>

Autre avait

<div ng-app="FeaturedItems" ng-controller="featured">
    <ul>
        <li ng-repeat="item in Items">{{item.Name}}</li>
    </ul>
</div>

Je les avais dans le même module avec un contrôleur différent et cela a commencé à fonctionner

1
Vignesh Subramanian

Il y a aussi une autre façon que cela pourrait arriver.

Dans mon application, j'ai un module principal qui s'occupe de la gestion de l'état du routeur ui, de la configuration, etc. La fonctionnalité réelle est définie dans d'autres modules.

J'avais défini un module

angular.module('account', ['services']);

qui contenait un contrôleur 'DashboardController', mais avait oublié de l'injecter dans le module principal où j'avais un état faisant référence à DashboardController.

Étant donné que DashboardController n’était pas disponible en raison de l’injection manquante, cette erreur a été renvoyée.

1
Kyle S

J'avais tout fait correctement, sauf la configuration du contrôleur dans $ stateProvider. J'ai utilisé le nom de fichier plutôt que le nom de la variable.

Le code suivant est faux:

formApp.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

       .state('management', {
            url: '/management',
            templateUrl: 'Views/management.html',
            controller: 'Controllers/ManagementController.js'
        });

et c'est la bonne approche;

formApp.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider

       .state('management', {
            url: '/management',
            templateUrl: 'Views/management.html',
            controller: 'ManagementController'
        });

Assurez-vous que vous avez remarqué;

contrôleur: 'ManagementController'

Et pour ceux qui sont curieux de connaître mon fichier de contrôleur ManagementController.js, cela ressemble à ceci:

formApp.controller('ManagementController', ['$scope', '$http', '$filter', '$state',function(scope, http, filter, state) {
    scope.testFunc = function() {
        scope.managementMsg  = "Controller Works Fine.";
    };
}]);

Pour ceux qui veulent un démarrage rapide angular squelette pour l'exemple ci-dessus, vérifiez ce lien https://github.com/zaferfatih/angular_skeleton

1
Zafer Fatih Koyuncu

J'ai commis une erreur stupide et perdu beaucoup de temps; j'ajoute donc cette réponse ici pour aider quelqu'un

J'ajoutais de manière incorrecte la variable $ scope (dépendance) (l'ajoutais sans guillemets)

par exemple ce que je faisais était quelque chose comme ça

angular.module("myApp",[]).controller('akshay',[$scope,

où la syntaxe souhaitée est comme ça

angular.module("myApp",[]).controller('akshay',['$scope',
1
Akshay Joshi

L'erreur sera visible lorsque votre contrôleur n'a pas pu être trouvé dans l'application. Vous devez vous assurer que vous utilisez les valeurs dans les directives ng-app et ng-controller.

1
Wand Maker

Dans mon cas, j’ai inclus app.js sous le contrôleur, alors que app.js devrait inclure tous les contrôleurs tels que

<script src="js/app.js"></script> 
<script src="js/controllers/mainCtrl.js"></script>
1
Ashwani Panwar

Cela m'est arrivé lors de l'utilisation de ng-include, et la page incluse avait des contrôleurs définis. Apparemment, ce n'est pas supporté.

Le contrôleur chargé par ng-include ne fonctionne pas

1
Trenton D. Adams

// inclure la dépendance du contrôleur en cas de troisième type

 var app = angular.module('app', ['controller']);

// premier type à déclarer le contrôleur // cela ne fonctionne pas bien

var FirstController = function($scope) {
    $scope.val = "First Value";
}

// Deuxième type de déclaration

app.controller('FirstController', function($scope) {
    $scope.val = "First Controller";
});

// Troisième et meilleur type

angular.module('controller',[]).controller('FirstController', function($scope) {
    $scope.val = "Best Way of Controller";
});
1
Waqar Haider