AngularJS

**dx007** · 30/11/2014, 11h35

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

**kaari kosaku** · 30/11/2014, 20h07

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

**dx007** · 30/11/2014, 22h36

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 !

**kaari kosaku** · 30/11/2014, 23h54

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) {...});

**dx007** · 01/12/2014, 11h14

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 !

**corv0** · 31/08/2016, 12h08

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

AngularJS - Erreur [ng:areq]

Discussions similaires

Partager

Partager