web-dev-qa-db-fra.com

Erreur: [ng: areq] L'argument 'MyCtrl' n'est pas une fonction, obtenu indéfini

Je suis nouveau à Angularjs et je suivais un tutoriel mais j'ai eu l'erreur dans le titre. 

Code HTML:

<div data-ng-app="myApp">
    <div data-ng-controller="MyCtrl">
    <form>
        <table>
        <tr style="font-weight: bold">
          <td>ID</td>
          <td>Name</td>
          <td>Surname</td>
          <td>House</td>
          <td>Address</td>
          <td>Locality</td>
          <td>Contact</td>
          <td>Contact 2</td>
          <td>Contact 3</td>
          <td>Reply</td>
          <td>Edit</td>
        </tr>
        <tr data-ng-repeat="person in persons">
            <td>{{person.ID}}</td>
            <td>{{person.Name}}</td>
            <td>{{person.Surname}}</td>
            <td>{{person.House}}</td>
            <td>{{person.Address}}</td>
        </tr>


        </table>
    </form>
    </div>
</div>

<script type="text/javascript">
    //Defining a Angular module
    var myApp = angular.module('myApp', []); 
    //Defining a Angular Controller 
    myApp.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) { 

    //Retrieving the List of people 
    GetPersons(); 
    //Displaying the Save button 
    $scope.DisplaySave = true; 

    function GetPersons() { 
    //Defining the $http service for getting the people 
    $http({
     method: 'GET', url: '/api/data' 
     }). 
     success(function (data) {
      if (data != null || data != 'undefined') { 
        //Assigning people data to the $scope variable
        $scope.persons = data; 
        //Clearing the Person object in create context and Showing default Gender(Male) Checked 
        $scope.newperson = { 
        Id: ''
        }; 
        } 
        }) 
        .error(function (error) { 
            //Showing error message 
            $scope.status = 'Unable to retrieve people' + error.message; 
        });
    }
} ]);
</script>

Contrôleur API:

public class DataController : ApiController
    {
        //GET api/data

        public IEnumerable<CommonLayer.Telesales> GetPeople()
        {
            return new BusinessLayer.Telesales().getUserSession(User.Identity.Name).AsEnumerable();
        }

Plus de détails d'erreur:

magicplayer:init: set version: 1.0.1
adme: onDOMStart: got code: user_key=f52009a2292c2b524ac9af2801caef4c443d7cdc7697dff171f77b3c81cd26fa gender=1 age=4
Error: [ng:areq] Argument 'MyCtrl' is not a function, got undefined
http://errors.angularjs.org/1.2.18/ng/areq?p0=MyCtrl&p1=not%20a%20function%2C%20got%20undefined
    at http://localhost:12570/Scripts/angular.js:78:12
    at assertArg (http://localhost:12570/Scripts/angular.js:1475:11)
    at assertArgFn (http://localhost:12570/Scripts/angular.js:1485:3)
    at http://localhost:12570/Scripts/angular.js:7198:9
    at http://localhost:12570/Scripts/angular.js:6592:34
    at forEach (http://localhost:12570/Scripts/angular.js:327:20)
    at nodeLinkFn (http://localhost:12570/Scripts/angular.js:6579:11)
    at compositeLinkFn (http://localhost:12570/Scripts/angular.js:6028:13)
    at compositeLinkFn (http://localhost:12570/Scripts/angular.js:6031:13)
    at compositeLinkFn (http://localhost:12570/Scripts/angular.js:6031:13)
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:12570/Images/accent.png
onMessageFromBackground: method=statPixel

qu'est-ce que je fais mal? Je cherche d'autres solutions mais il semble que mon problème soit un peu différent. 

javascriptasp.net-mvcangularjs
10
rikket

Il s'avère que j'avais et la balise html suivante dans la page de mise en page qui renvoyait cette erreur 

<html lang="en ng-app">

Suppression du ng-app de la balise et le code fonctionne parfaitement

8
rikket

Dans mon cas, je venais juste d’oublier d’ajouter un script de contrôleur à index.html

5
Hans Petter Naumann

J'ai eu ce genre d'erreur quand j'ai mal orthographié le nom de mon contrôleur. Il a été mis en majuscule dans le fichier js, mais pas dans la balise ng-controller du fichier html.

3
klooth

Cela peut parfois arriver lorsque nous ne lions pas correctement le module/contrôleur à DOM. Je suis arrivé à la même erreur et j'ai trouvé que mon ng-app était vide

<html ng-app="">

Je devais fournir le nom du module. J'ai donné et cela a fonctionné!

<html ng-app="app">
2
Anil Jeeyani

J'ai eu cette erreur en utilisant une boîte de dialogue Material Design dans mon contrôleur Angularjs avec une typo très difficile à trouver:

templateUrl: 'template.html';

Lorsque j'ai remplacé le point-virgule par la virgule appropriée, le problème a été résolu.

templateUrl: 'template.html',
2
James Drinkard

Je me suis rendu fou pendant deux heures après avoir vérifié et revérifié toutes les suggestions. Mais il s'est avéré qu'une fois les données de mon navigateur Chrome effacées (cookies, données d'applications hébergées, images et fichiers en cache), l'erreur a disparu. Même une actualisation ne semble pas effacer suffisamment tous les éléments énumérés.

1
EdtheC

Parfois, nous utilisons le même nom de module en usine, les contrôleurs et le module principal.so, C’est la raison principale pour laquelle il générera une erreur Erreur: [ng: areq] Argument, n’utilisez pas le même nom de module lorsque vous appelez vos services, contrôleurs, usine. 

1
Gaurav verma

J'ai utilisé <html ngapp> avec angular 1.4.8

Changé à 1.2.8 et s'est débarrassé de l'erreur.

Mon code HTML avait <div class ="container" ng-controller="AppCtrl">

et j'ai eu un fichier controller.js avec la fonction

function AppCtrl(){ console.log("Hello from controller") }

0
PipoTells

Dans mon cas:

  • par erreur, j'ai eu deux balises de corps <body ng-controller="CtrlWasNotFound"> <body></body </body>
  • non seulement cela - le app.js a renvoyé le code HTML de index.html (utilisait gulp et avait un problème de configuration
0
Ricky Levi
<sript

au lieu de

<script

;) en reliant controller.js. Dans mon cas

0
user1923363

Pour résoudre ce problème, j'ai dû découvrir que j'avais mal orthographié le nom du contrôleur dans la déclaration des routes angulaires:

.when('/todo',{
            templateUrl: 'partials/todo.html',
            controller: 'TodoCtrl'
        })
0
MadPhysicist