IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AngularJS Discussion :

AngularJS - Erreur [ng:areq]


Sujet :

AngularJS

  1. #1
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Novembre 2014
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2014
    Messages : 14
    Points : 10
    Points
    10
    Par défaut AngularJS - Erreur [ng:areq]
    Bonjour,
    Voilà je débute juste sur AngularJS et déjà j'ai un petit souci au niveau de la pratique.
    En gros c'est mon petit controlleur qui ne veut pas se compiler dans la page html...
    J'ai déjà regardé un peu partout dans le forum mais les solutions me reviennent incompréhensibles...(eh ui, je suis un gros 0 je sais)

    Voici mon code tout simple :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html>
    <head lang="fr">
        <meta charset="UTF-8">
        <title>test du controller</title>
        <script src="bower_components/angular/angular.js"></script>
    </head>
    <body ng-app>
    <p ng-controller="testController">
        {{ tamtam }}
    </p>
     
    <script type="text/javascript">
        function testController($scope){
            $scope.tamtam = "ma super route";
        }
    </script>
    </body>
    </html>
    -----------------------------------------------------------------
    dans le navigateur ça m'affiche:
    {{ tamtam }}
    en dur....
    et dans la console j'ai une erreur : Error: [ng:areq] Argument 'testController' is not a function

    Je crois que la compilation ne marche pas....pourtant le script angular.js est bien chargé j'ai vérifié !

    Merci beaucoup de votre aide !

    Bon week à tous !

    ***************************
    Config:
    windows 8 64bit
    ide: webstorm

  2. #2
    Membre habitué
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    125
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2007
    Messages : 125
    Points : 149
    Points
    149
    Par défaut
    Yo

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <body ng-app="test">
    <p ng-controller="testController">
        {{ tamtam }}
    </p>
     
    <script type="text/javascript">
        var app = angular.module('test', [])
        .controller('testController', ['$scope', function ($scope) {
            $scope.tamtam = 'ma super route';
        }])
    </script>
    mieux ? :O

  3. #3
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Novembre 2014
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2014
    Messages : 14
    Points : 10
    Points
    10
    Par défaut
    Merci kaari-kosaku,
    Du coup ça marche mieux effectivement mais, je ne comprends pas grand-chose à ton code vu que je débute et que je ne vois pas encore très bien pourquoi tu as connecté un module, ni aussi d'ailleurs la valeur de var app que tu déclares...
    tout de même merci à toi !

  4. #4
    Membre habitué
    Profil pro
    Inscrit en
    Septembre 2007
    Messages
    125
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2007
    Messages : 125
    Points : 149
    Points
    149
    Par défaut
    Je te conseille de faire tout le tutorial sur le site d'angular, il t'apprend les bases essentielles.

    Mais bon comme tu débute je vais essayer d'expliquer le plus simplement possible mon code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <body ng-app="test">
    ...
    ...
    var app = angular.module('test', []);
    ng-app suffit pour bootstrapper le template html (dire à angular, tu dois interpréter le code qui est là-dedans), mais ce que je fais grâce à angular.module c'est que je déclare mon application angular et je lui donne un nom, ici 'test'.
    Le deuxième paramètre de angular.module est les dépendances que j'injecte dans mon module (par ex. 'ng-sanitize', 'angularUI'...), il est optionnel, (j'aurais pu ne pas mettre ", []" mais c'est un reflexe).


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    app.controller('testController', function ($scope) {...});
    Ensuite j'ajoute un controller à l'application, celà se fait via la fonction controller().

    le fait d'avoir déclaré le controlleur comme suit : controller('testController', ['$scope', function ($scope) {}])
    peut être rebutant au premier abord, certe je l'admet mais il y a une très bonne raison derrière ça.

    On peut le déclarer de la manière simple comme ci-dessus mais celà va poser un problème si on minifie notre code. Le minifieur va alors prendre un malin plaisir à changer le nom de la variable $scope, ce qui serait dramatique pour angular (le script ne fonctionnerait plus), du coup cette technique de déclaration permet de spécifier le nom de la variable dans une chaine de caractère, qui sera conservée lors du passage du minifieur.



    Pour résumer :
    le code suivant est une version épurée et tu pourra t'en contenter :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var app = angular.module('test');
    app.controller('testController', function ($scope) {...});

  5. #5
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Novembre 2014
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Novembre 2014
    Messages : 14
    Points : 10
    Points
    10
    Par défaut
    C'est noté !
    Merci beaucoup pour ces infos kaari ! Ça m'aide beaucoup surtout que la doc en fr n’existe toujours pas pour AngularJS !

    C'est sympa de venir en aide aux autres, merci !

  6. #6
    Membre du Club
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Février 2013
    Messages
    116
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : Consultant informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2013
    Messages : 116
    Points : 55
    Points
    55
    Par défaut
    Bonjour à vous 2.
    Je début aussi sur AngularJS, mais j'ai le même problème que cité précédemment lorsque j'utilise le debug.

    Voici le code:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
     
        <!doctype html>
        <html ng-app>
          <head>
              <title>Les Scope et Controller</title>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
            <meta charset="UTF-8">
          </head>
          <body ng-app="myApp">
     
           <input type="text" ng-model="query">
     
            <select ng-model="order">
                <option value="-username">Organiser par nom</option>
                <option value="content">Organiser par contenu</option>
            </select>
     
            <div ng-controller="CommentsCtrl">
                <ul>
                    <div ng-repeat="comment in comments | filter:{content:query} | orderBy:order">
                        <p><strong>{{comment.username}}</strong><br>
                                   {{comment.content}}
                                   {{comment.email}}</p>
                    </div>    
                </ul>                                             
             </div>
     
     
            <script>
     
               var myApp = angular.module('myApp',[]);
               myApp.controller('CommentsCtrl', ['$scope', function($scope){
     
              $scope.comments = [
     
                {
                  "username":"Dillon",  
                  "city":"Nile",  
                  "email":"dillonwelch@furnigger.com",  
                  "content":"elit sint excepteur pariatur coluptate"    
                },
                {
                  "username":"Anthony",  
                  "city":"PALERMO",  
                  "email":"anthony.palermo@gmail.com",  
                  "content":"lorem ipsum dolor sit amet"    
                },
                {
                  "username":"Jale",  
                  "city":"Ankara",  
                  "email":"jale.yildirim@hotmail.fr",  
                  "content":"ipsum sit amet dolor"    
                },
                {
                  "username":"Goku",  
                  "city":"Planète Vegeta",  
                  "email":"ssjblue@dbz.org",  
                  "content":"tu as l'air très fort"    
                }   
              ];    
            }]);
            </script>
     
          </body>
        </html>
    Si vous avez une idée je suis preneur.

    Cordialement

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 27/05/2002, 20h46
  2. erreur IDL:omg.org/CORBA/MARSHAL:1.0
    Par Pinggui dans le forum CORBA
    Réponses: 3
    Dernier message: 13/05/2002, 16h05
  3. [Kylix] Erreur objet
    Par Anonymous dans le forum EDI
    Réponses: 1
    Dernier message: 22/03/2002, 10h41

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo