Erreur d’architecture AngularJS

**Hippocrène** · 03/09/2015, 17h52

Bonjour,

j’ai tenté de reproduire l’architecture du code AngularJS de ce tutoriel, mais j’ai échoué car je n’obtient aucun résultat : mon code HTML ne parvient pas à (lire ?) mon code AngularJS.

Mon code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html ng-app="app">
	<head>
		<meta charset="UTF-8">
		<title>Titre</title>
	</head>
        <body>
		<div class="lateral_panel" ng-controller="selectCtrl as selectCtrl">{{selectCtrl.texte}}</div>
 
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
		<script src="app.module.js"></script>
	</body>
</html>

Mon code app.module.js :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
angular
   .module('app', ['selectCtrl']);

Mon contrôleur selectCtrl.js :

Code javascript :

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
(function() {
    'use strict';
 
	angular
		.module('app')
		.controller('selectCtrl', selectCtrl['$scope']);
 
 
 
		function selectCtrl() {
 
			var vm = this;
			vm.texte = 'A';
 
 
		}
 
})();

Savez-vous où se trouve l’erreur ?

**Marco46** · 04/09/2015, 10h20

Quand tu n'obtiens pas ce que tu pensais obtenir le premier réflexe c'est d'aller lire la console de ton browser. Et mieux quand tu postes un problème tu postes le ou les messages d'erreur avec !

Sinon je vois plusieurs choses :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ng-controller="selectCtrl as selectCtrl"

Pourquoi donner à l'alias exactement le même nom que l'aliasé ???

Dans app.module.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
angular
   .module('app', ['selectCtrl']);

Les dépendances d'un module doivent être des modules, pas des composants contenus dans les modules.

Ta déclaration du module devrait être :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
angular
   .module('app', []);

Dans selectCtrl.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
angular
	.module('app')
	.controller('selectCtrl', selectCtrl['$scope']);

Jamais vu une telle notation pour configurer l'injection de dépendances. Utilises plutôt ng-annotate permettant l'injection via annotation ou bien une déclaration explicite via $inject :

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
 
(function(angular) {
    'use strict';
 
    // 1- déclaration du service
    angular
        .module('myModule')
        .factory('MyService', myServiceFn);
 
    // 2- déclaration des dépendances
    myServiceFn.$inject = ['dep1', 'dep2'];
 
    // 3- implémentation du service
    function myServiceFn(dep1, dep2) {
        // implémentation
    }
 
})(angular);

Normalement si tu règles tout ça tout devrait rentrer dans l'ordre. Les principaux soucis à mon avis c'est ton affectation du contrôleur au module et la déclaration de dépendance qui n'existe pas au module app.

**Hippocrène** · 04/09/2015, 10h40

D’accord,

j’ai modifié mon code selon tes conseils.

J’ai donc mon fichier app.module.js :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
angular
   .module('app', []);

Mon code selectCtrl.js :

Code JavaScript :

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
(function(angular) {
    'use strict';
 
	angular
		.module('app')
		.controller('selectCtrl', selectCtrl);
 
 
		function selectCtrl() {
 
			var vm = this;
			vm.texte = 'A';
 
		}
 
})(angular);

Le message d’erreur affiché par la console :

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
Error: [ng:areq] <a href="http://errors.angularjs.org/1.4.4/ng/areq?p0=selectCtrl&p1=not%20a%20function%2C%20got%20undefined" target="_blank">http://errors.angularjs.org/1.4.4/ng...ot%20undefined</a>
L/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js:6:416
<a href="mailto:pb@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js">pb@https://ajax.googleapis.com/ajax/...angular.min.js</a>:22:41
<a href="mailto:Sa@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js">Sa@https://ajax.googleapis.com/ajax/...angular.min.js</a>:22:128
Xe/this.$get</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js:80:25
<a href="mailto:N@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js">N@https://ajax.googleapis.com/ajax/l...angular.min.js</a>:59:447
<a href="mailto:K@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js">K@https://ajax.googleapis.com/ajax/l...angular.min.js</a>:60:287
<a href="mailto:g@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js">g@https://ajax.googleapis.com/ajax/l...angular.min.js</a>:54:326
<a href="mailto:g@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js">g@https://ajax.googleapis.com/ajax/l...angular.min.js</a>:54:349
<a href="mailto:g@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js">g@https://ajax.googleapis.com/ajax/l...angular.min.js</a>:54:349
V/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js:53:388
yc/d/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js:20:4
kf/this.$get</n.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js:133:35
kf/this.$get</n.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js:133:264
yc/d/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js:19:477
<a href="mailto:e@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js">e@https://ajax.googleapis.com/ajax/l...angular.min.js</a>:39:94
yc/d@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js:19:1
<a href="mailto:yc@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js">yc@https://ajax.googleapis.com/ajax/...angular.min.js</a>:20:179
<a href="mailto:Zd@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js">Zd@https://ajax.googleapis.com/ajax/...angular.min.js</a>:19:1
@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js:292:238
<a href="mailto:a@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js">a@https://ajax.googleapis.com/ajax/l...angular.min.js</a>:174:283
Hf/c@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js:35:124

**Marco46** · 04/09/2015, 10h58

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="app.module.js"></script>

Le fichier selectCtrl.js n'est pas importé donc c'est normal d'obtenir "selectCtrl&p1=not%20a%20function%2C%20got%20undefined""

J'avais même pas pensé à vérifier les imports tellement c'est basique. Merci de faire un petit effort stp.

**Hippocrène** · 04/09/2015, 11h03

Ah ? ce n’est pas justement l’intérêt d’avoir un fichier app.module.js qui gère tout ? C’est dommage…

Quoi qu’il en soit, j’ai importé le fichier selectCtrl.js dans mon fichier HTML et je n’ai pas plus de résultat, si ce n’est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

SyntaxError: expected expression, got '--'

en plus du grand message de tout à l’heure.

EDIT : non en fait, c’est un oubli de ma part. J’avais laissé « -- » dans mon code.

Maintenant, je n’ai plus de message d’erreur, et plus rien d’afficher. Cela doit venir de mon utilisation du :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var vm = this;
vm.texte = 'A';

qui ne doit pas remplacer $scope aussi simplement que ça, je suppose…

**Marco46** · 04/09/2015, 11h27

J'ai fait un plunker histoire d'en avoir le coeur net et ça fonctionne. Ya forcément un truc que tu fais mal.

Ah ? ce n’est pas justement l’intérêt d’avoir un fichier app.module.js qui gère tout ? C’est dommage…

Si tu n'importes pas dans la page tes scripts comment veux-tu qu'ils s'exécutent ?

**Hippocrène** · 04/09/2015, 11h39

Le problème était visiblement que je n’avais pas mis un controllerAs (selectCtrl as sel) puisque ça fonctionne maintenant, merci. 😊

Si tu n'importes pas dans la page tes scripts comment veux-tu qu'ils s'exécutent ?

Mais dans ce cas n’y a-t-il pas un moyen d’importer seulement le app.module.js ? Sinon, je trouve qu’il y a vraiment moins d’intérêt à l’utiliser. 😐

**Marco46** · 04/09/2015, 12h26

Envoyé par freddy1492

Mais dans ce cas n’y a-t-il pas un moyen d’importer seulement le app.module.js ? Sinon, je trouve qu’il y a vraiment moins d’intérêt à l’utiliser. 😐

Tu fais une confusion entre deux choses :

- L'import des ressources javascript dans ta webapp
- L'import des modules dans ta webapp

Il s'agit de deux choses complètement différentes. Importer un module ne fonctionne que dans le cadre de Angular, c'est à dire après avoir importé ton code source dans ta webapp.

L'intérêt d'avoir une séparation entre l'implémentation des composants des modules et des déclarations des modules en elles mêmes est simplement de savoir facilement où l'on met les choses. Si tu n'as pas un fichier spécifique pour déclarer tes modules ça signifie que tu vas avoir tes déclarations de modules au hasard dans les fichiers de code source des composants des modules.

Je m'explique :

Admettons que tu as un module A qui contient 1 contrôleur, 2 directives et 3 services. Cela signifie que tu as 6 fichiers js qui composent ton module.
Si tu ne crées pas un septième fichier pour déclarer ton module, où vas-tu déclarer ton module ? Dans l'un des fichiers des composants ?
Oui mais alors tu vas galérer pour savoir dans lequel tu as déclaré ton module et tu risques de le déclarer 2 fois ce qui conduit à des erreurs très pénibles à debug.

Petit rappel pour comprendre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
angular
        .module('myModule');

Le code ci-dessus ne déclare pas un module, il fait référence à un module. C'est un getter de module si tu préfères.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
angular
        .module('myModule', ['dependance1', 'dependance2']);

Le code ci-dessus déclare un module avec 2 dépendances (qui sont des modules, et pas des composants de modules).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
angular
        .module('myModule', []);

Le code ci-dessus déclare un module sans dépendance.

La nuance est de taille, parce que si tu déclares tes modules avec tes composants et que tu le fais 2 fois par exemple, la 2ème déclaration va écraser la déclaration précédente et tu perdras les composants déclarés.

Par exemple si tu fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
angular
        .module('myModule', [])
        .controller('MyCtrl', implCtrlFn);
 
angular
        .module('myModule')
        .service('MyService', implServiceFn);
 
angular
        .module('myModule', [])
        .controller('MySecondCtrl', implSecondCtrlFn);

Quand Angular va déclarer MySecondCtrl, il va écraser le module myModule et tu vas perdre MyCtrl et MyService.

Voilà pourquoi déclarer les modules dans un fichier dédié est une bonne pratique.

**Hippocrène** · 04/09/2015, 12h36

Aaah… ok ! Très bon exemple. 😀

Je comprends, maintenant. Et, finalement, c’est bien d’avoir à déclarer ses fichiers dans le HTML, c’est plus évident à relire après. 😏

Erreur d’architecture AngularJS

AngularJS

Discussions similaires

Partager

Partager