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