AngularJS - Question de scope

Version imprimable

Bonjour à tous,

j'essaie de faire une appli. web pour m'autoformer et je bloque sur un petit problème avec AngularJs. Peut-être pourrez-vous m'aider :).

J'ai une master page en trois parties avec un header, une page content et un footer.

Lorsque je lance mon appli. sur un serveur tomcat, la page d'acceuil s'ouvre avec mes trois parties et en "content" j'ai ma page login.html.

Le problème est le suivant :

j'ai des buttons dans mon login.html pour gérer l'internationalisation qui fonctionnent très bien :

Code:

1
2
3
4
5
6
 
<!-- le code dans login.html -->
 
<img src="assets/images/buttons/flags/france2.png" class="classFlag" onclick="changeLang('fr');" ng-click="internationalization()"></img>
 
<img src="assets/images/buttons/flags/royaumeUni2.png" class="classFlag" onclick="changeLang('en');" ng-click="internationalization()"></img>

Code:

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
 
// mon module javascript
 
eModule.controller('LoginCtrl',function($scope, loginService, $location){
 
	// [...]
 
	$scope.internationalization = function(){
		var tmpLang = localStorage.getItem("lang");
		if(tmpLang == "fr"){
			$scope.lbSignIn = "Identifiez-vous";
			$scope.lbLogin = "Identifiant";
			$scope.lbPwd = "Mot de passe";
			$scope.lbRemember = "Rester connect�";
			$scope.lbSubmit = "Connexion";
			$scope.lbReturn = "Retour au catalogue";
		}else{
			$scope.lbSignIn = "Sign in";
			$scope.lbLogin = "Login";
			$scope.lbPwd = "Password";
			$scope.lbRemember = "Remember me";
			$scope.lbSubmit = "Sign in";
			$scope.lbReturn = "Back to catalog";
		}
	};
 
});

mais si je déplace ces buttons dans le header, ils ne fonctionnent plus.

Je ne comprend pas pourquoi il fonctionne dans la partie content, mais pas dans le header. Je soupçonne un problème de scope mais bon...

Voici le code de ma master page (avec les buttons) :

Code:

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
66
67
68
69
70
71
72
73
74
75
76
77
78
 
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>eCollection</title>
 
<!-- JQUERY doit être chargé avant ANGULARJS -->
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery-ui/jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui/jquery-ui.css">
 
<!-- ANGULARJS -->
<script type="text/javascript" src="angular/angular.js"></script>
<script type="text/javascript" src="angular/angular-route.js"></script>
<script type="text/javascript" src="angular/angular-resource.js"></script>
 
<script type="text/javascript" src="js/modules.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/factories.js"></script>
<script type="text/javascript" src="js/routeConf.js"></script>
 
<!-- BOOTSTRAP -->
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css">
 
<!-- MASTER_PAGE -->
<script type="text/javascript" src="js/masterHeader.js"></script>
<link rel="stylesheet" type="text/css" href="css/masterHeader.css">
<link rel="stylesheet" type="text/css" href="css/masterContent.css">
<link rel="stylesheet" type="text/css" href="css/masterFooter.css">
 
</head>
 
<body ng-app="eModule">
 
	<header id="masterHeader">
 
		<table id="tabMasterHeader">
			<tr>
				<td id="tdLogo">
					<img alt="logo1" src="assets/images/logos/logoMasterPage.png" id="imgLogo">
				</td>
				<td id="tdTitle">
 
					<table id="tabFlags">
						<tr>
							<td class="tdFlag">
								<img src="assets/images/buttons/flags/france2.png" class="classFlag" onclick="changeLang('fr');" ng-click="internationalization()"></img>
							</td>
							<td class="tdFlag">
								<img src="assets/images/buttons/flags/royaumeUni2.png" class="classFlag" onclick="changeLang('en');" ng-click="internationalization()"></img>
							</td>
							<td class="tdFlag">
								<img src="assets/images/buttons/flags/espagne2.png" class="classFlag" onclick="changeLang('es');" ng-click="internationalization()"></img>
							</td>
							<td class="tdFlag">
								<img src="assets/images/buttons/flags/allemagne2.png" class="classFlag" onclick="changeLang('de');" ng-click="internationalization()"></img>
							</td>
						</tr>
					</table>
 
				</td>
			</tr>
		</table>
 
	</header>
 
	<div ng-view id="masterContent"></div>
 
	<footer id="masterFooter">
		&copy; AUTOFORMATION - Created by Paladice
	</footer>
 
</body>
 
</html>

Merci d'avance pour votre aide.

08/03/2016, 20h29
tchize_

Tu peux faire voir ton app.js?
08/03/2016, 22h30
Logan Mauzaize

Tu ne lies pas le controller à ton DOM : https://code.angularjs.org/1.4.9/doc...e/ngController
09/03/2016, 00h17
Maitre2B

Citation:

Envoyé par Logan Mauzaize

Tu ne lies pas le controller à ton DOM : https://code.angularjs.org/1.4.9/doc...e/ngController

Bonjour,

Je complète ça réponse car elle peut sembler peu précise.
Dans ton HTML, tu dois faire le lien entre ta page HTML et ton module angularjs, ce que tu fais avec ng-app="eModule" et eModule.controller('LoginCtrl',function($scope, loginService, $location)

Mais tu dois aussi marquer le controller que tu appelles depuis ton HTML, cad "LoginCtrl".
il faut donc rajouter une <div ng-controller="LoginCtrl"> </div> par exemple

Salut,

merci à tous pour vos réponses.

Malheureusement, je ne comprend toujours pas.

Comme vous pouvez le voir dans mon poste précédent à la ligne 36 du code HTML de ma master page, j'ai cette ligne :

Code:

<body ng-app="eModule">

Cette master page englobe ma page login (à la ligne 70 de ce même code HTML) :

Code:

<div ng-view id="masterContent"></div>

Lorsque mes boutons se trouvent dans login.html, ils fonctionnent et mettent à jour les libellés de login.html, dont voici le code HTML :

Code:

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
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
 
</head>
<body>
 
	<nav>
		<div id="blocFlags">
 
			<table id="tabFlags">
				<tr>
					<td class="tdFlag">
						<img src="assets/images/buttons/flags/france2.png" class="classFlag" onclick="changeLang('fr');" ng-click="internationalization()"></img>
					</td>
					<td class="tdFlag">
						<img src="assets/images/buttons/flags/royaumeUni2.png" class="classFlag" onclick="changeLang('en');" ng-click="internationalization()"></img>
					</td>
					<td class="tdFlag">
						<img src="assets/images/buttons/flags/espagne2.png" class="classFlag" onclick="changeLang('es');" ng-click="internationalization()"></img>
					</td>
					<td class="tdFlag">
						<img src="assets/images/buttons/flags/allemagne2.png" class="classFlag" onclick="changeLang('de');" ng-click="internationalization()"></img>
					</td>
				</tr>
			</table>
 
		</div>
 
		<div class="container">
			<form novalidate="novalidate" name="loginForm">
				<h2 class="form-signin-heading">{{lbSignIn}}</h2>
				<div class="input-group">
					<span class="input-group-addon">@</span>
					<input type="email" class="form-control" placeholder="{{lbLogin}}" ng-model="login" name="loginInput" required autofocus>
				</div>
				<div class="input-group">
					<span class="input-group-addon" style="color:rgb(230,230,230);">@</span>
					<input type="password" class="form-control" placeholder="{{lbPwd}}" name="pwdInput" required ng-model="pwd">
				</div>
 
				<label>
				<input id="ckbRemember" type="checkbox" value="remember-me"> {{lbRemember}}
				</label>
				<button id="btnSubmit" class="btn btn-lg btn-primary btn-block" type="submit" ng-click="isAuthenticate(login,pwd)">{{lbSubmit}}</button>
				<button id="btnReturn" class="btn btn-lg btn-primary btn-block" type="submit" ng-click="gotoCatalog()">{{lbReturn}}</button>
				{{messageLogin}}
			</form>
		</div>
 
	</nav>
 
</body>
</html>

Comme vous pouvez le voir, il n'y a pas de ng-app (je suppose que login.html l'hérite de ma master page), et pourtant les boutons fonctionnent. On rentre bien dans la fonction "internationalization()" de mon controller LoginCtrl.

Mais si je déplace ces boutons dans ma master page, ils ne fonctionnent plus.

Pour information, voici le code épuré de mon javascript des controllers :

Code:

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
 
// --------------------------------------------------- MASTER PAGE // ne fonctionne pas
eCollectionModule.controller('IndexCtrl',function($scope, indexService, $location){
 
	var tmpLang = localStorage.getItem("lang");
 
	$scope.internationalization = function(){
		var tmpLang = localStorage.getItem("lang");
		if(tmpLang == "fr"){
			$scope.lbSignIn = "Identifiez-vous";
			$scope.lbLogin = "Identifiant";
			$scope.lbPwd = "Mot de passe";
			$scope.lbRemember = "Rester connect�";
			$scope.lbSubmit = "Connexion";
			$scope.lbReturn = "Retour au catalogue";
		}else{
			$scope.lbSignIn = "Sign in";
			$scope.lbLogin = "Login";
			$scope.lbPwd = "Password";
			$scope.lbRemember = "Remember me";
			$scope.lbSubmit = "Sign in";
			$scope.lbReturn = "Back to catalog";
		}
		$location.path("/login");
	};
 
});
 
 
 
// --------------------------------------------------- LOGIN // fonctionne
eCollectionModule.controller('LoginCtrl',function($scope, loginService, $location){
 
	var tmpLang = localStorage.getItem("lang");
 
	$scope.internationalization = function(){
		var tmpLang = localStorage.getItem("lang");
		if(tmpLang == "fr"){
			$scope.lbSignIn = "Identifiez-vous";
			$scope.lbLogin = "Identifiant";
			$scope.lbPwd = "Mot de passe";
			$scope.lbRemember = "Rester connect�";
			$scope.lbSubmit = "Connexion";
			$scope.lbReturn = "Retour au catalogue";
		}else{
			$scope.lbSignIn = "Sign in";
			$scope.lbLogin = "Login";
			$scope.lbPwd = "Password";
			$scope.lbRemember = "Remember me";
			$scope.lbSubmit = "Sign in";
			$scope.lbReturn = "Back to catalog";
		}
	};
 
});

Voilà, j'espère que certains d'entre vous pourrons continuer à m'aider :). Merci d'avance.

09/03/2016, 11h00
Marco46
Quelques définitions au préalable :

SPA = une application web sur une seule page. Cela signifie que tu n'as qu'une seule page web, c'est ton index.html. Tout le reste sont des vues. Elles n'ont pas à contenir de body ni de DTD ni rien d'autre que directement le html nécessaire qui sera intégré par angular dans ton index.html.
Si l'utilisateur appuie sur F5, il relance l'application from scratch.

La directive ng-app. Elle marque le début et la fin de ton application. Le DOM est un arbre. ng-app est placé sur une branche de cet arbre. Tout ce qui est contenu dans cette branche est dans le cadre de l'application. Tout ce qui est en dehors n'est pas pris dans le cadre.
Quand angular.js est importé dans ton index.html, il scanne le DOM à la recherche de ng-app, quand il la trouve, il démarre la webapp.
Si tu veux plus de détail, j'ai pris des notes sur mon github.

Le scope. C'est la glue entre les vues (les .html) et la logique de ta webapp (les .js). En conséquence c'est un espace de publication de données dans les vues. Ce que tu mets dans ton scope peut être bindé dans la vue.
Le scope, comme le DOM est un arbre. Sa racine est le $rootScope que l'on peut considérer comme correspondre à ng-app dans le DOM.

Le contrôleur. En angularJS un contrôleur est le constructeur du scope. C'est là que l'on publie dans la vue en affectant au scope des valeurs et des fonctions en provenance des services. La syntaxe controllerAs est fortement conseillée. L'usage du service $scope est à prohiber (trop de mauvaises pratiques en découle, suppression de ce service dans angular2).
Il y a plusieurs manières de déclarer un contrôleur :
- dans le DOM avec la directive ng-controller
- dans les routes (dépends du système de routage utilisé)
- dans les directives

Déclarer un contrôleur revient donc à créer un scope qui héritera de son parent.

Si par exemple tu as :
Code:

1 2 3 4 5 6 <div ng-app"myApp"> <div ng-controller="ctrlA"> <div ng-controller="ctrlB"></div> </div> </div>
ctrlB hérite de ctrlA. Donc B dispose des infos publiées dans A.
C'est une très très mauvaise pratique que d'utiliser l'héritage des scopes pour partager des données entre 2 vues/controllers. Pour partage des données on passe par un service que l'on injecte au besoin.
Code:

1 2 3 4 5 <div ng-app"myApp"> <div ng-controller="ctrlA"></div> <div ng-controller="ctrlB"></div> </div>
Dans ce cas il n'y a pas d'héritage entre A et B.

Dans ton cas, on ne sait pas si c'est un problème d'héritage ou si c'est un problème de déclaration de controllers parce qu'on ne voit pas où tu les déclares dans tes vues.

Ca serait plus simple de t'aider avec l'ensemble du code. Un plunkr par exemple.
09/03/2016, 11h51
paladice

Un grand merci pour ta réponse très détaillée et aussi parce que je ne connaissais pas Plunker, ça pourra me servir ^^.

Je ne sais pas si c'est correct mais voici le lien de ce que je vient de créer en Plunk : https://plnkr.co/edit/COA1Wi9tFbMjropuubY5?p=info

Peut-être que mon problème vient du routeConf.js ? Peut-être que le controller associé à ma page ne l'est pas correctement ?
09/03/2016, 12h24
Marco46

Ya plusieurs problèmes. Il faut que tu relises bien la doc sur le routage.

- ta vue login est construite comme une page autonome (body, title, doctype, etc ... tout ça ne doit pas être présent)
- ton masterPage est déclaré comme une vue ET comme ta page principale. C'est un problème.

Si tu as 2 vues dans ta webapp il te faut 3 pages :
- index.html qui va être le container de ta webapp, il contient le body title doctype, imports js, ng-app, etc ...
- le template de ta 1ère vue
- le template de ta 2ème vue

Dans tes routes, tu ne déclares pas le index.html, seulement 1 route pour chaque vue.
09/03/2016, 14h58
paladice

Encore merci.

J'ai donc modifier mon code sur Eclipse et sur Plunker.

J'ai transformer mon login.html en template. Petite question, en faisant cela je suis obligé de déclarer les pages javascript de chaque vue dans ma master page non ? Si par exemple j'ai 2 vues avec du code javascript différent, il faudra que je j'importe mon JS dans la master page du coup ?
J'ai virer dans le routage la liaison vers ma master page. J'ai ajouter dans ma master page les boutons d'internationalisation mais le problème subsiste :/. J'ai aussi essayé d'ajout ng-controller="IndexCtrl" dans la balise <header>, ligne 37 dans mon masterPage.html. Pas de changement :/.

Avez-vous une idée ?
09/03/2016, 17h01
Marco46

Ton plunker ne s'exécute pas. Tous tes chemins d'imports sont faux. Certains noms de fichiers également.

Citation:

Envoyé par paladice

J'ai transformer mon login.html en template. Petite question, en faisant cela je suis obligé de déclarer les pages javascript de chaque vue dans ma master page non ?

Bien sur. Rappelles-toi que tu n'as qu'une seule page : masterPage.html que tu devrais appeler index.html comme le veut la convention web.

Citation:

Envoyé par paladice

Si par exemple j'ai 2 vues avec du code javascript différent, il faudra que je j'importe mon JS dans la master page du coup ?

Toutes tes ressources doivent être importées dans ton index.html comme sur n'importe quel site web. La différence avec une SPA c'est que tu n'as qu'une seule page web. Tu es donc bien obligé de les importer ici !

Citation:

Envoyé par paladice

J'ai virer dans le routage la liaison vers ma master page. J'ai ajouter dans ma master page les boutons d'internationalisation mais le problème subsiste :/. J'ai aussi essayé d'ajout ng-controller="IndexCtrl" dans la balise <header>, ligne 37 dans mon masterPage.html. Pas de changement :/.

Avez-vous une idée ?

Non mais ton plunker ne fonctionne pas donc difficile de tester.

Code:

onclick="changeLang('fr');"

Pourquoi ce code alors que tu as mis des ng-click ?

Pour info il y a des modules pour gérer l'internationalisation. Ce n'est pas du tout comme cela qu'il faut s'y prendre mais je suppose qu'il s'agit plus d'un exercice.
09/03/2016, 17h54
paladice

Merci.

Citation:

Envoyé par Marco46

Ton plunker ne s'exécute pas. Tous tes chemins d'imports sont faux. Certains noms de fichiers également.

Le plunker fonctionne, pfiouuu j'ai galéré lol.

Citation:

Envoyé par Marco46

Bien sur. Rappelles-toi que tu n'as qu'une seule page : masterPage.html que tu devrais appeler index.html comme le veut la convention web.

Master page renommée ^^.

Citation:

Envoyé par Marco46

Toutes tes ressources doivent être importées dans ton index.html comme sur n'importe quel site web. La différence avec une SPA c'est que tu n'as qu'une seule page web. Tu es donc bien obligé de les importer ici !

Bien reçu, merci.

Citation:

Envoyé par Marco46

Code:

onclick="changeLang('fr');"

Pourquoi ce code alors que tu as mis des ng-click ?

Je ne sais pas comment passer le paramètre lang dans le controller du coup je fais en deux étapes :
1/ je change la langue dans le localStorage
2/ je la recupère dans le controller

Citation:

Envoyé par Marco46

Pour info il y a des modules pour gérer l'internationalisation. Ce n'est pas du tout comme cela qu'il faut s'y prendre mais je suppose qu'il s'agit plus d'un exercice.

Oui, c'est pour l'exercice (ça m'arrange bien de dire ça :p).

Voilà, le plunker fonctionne et comme tu peux le constater, les boutons de ma page login.html fonctionnent (ceux du bas) mais ceux de ma page index.html ne fonctionnent pas. J'ai essayer de mettre ng-controller="IndexCtrl" dans ma page index.html mais ça n'a pas fonctionné. je ne l'ai peut etre pas mis au bon endroit ?
En fait, je viens de me rendre compte qu'ils ont l'air de fonctionner au début, mais quand j'utilise ceux du dessous, ceux du dessus ne fonctionnent plus.
10/03/2016, 14h21
Marco46

J'ai forké ton plunkr et j'ai fait quelques modifs.

J'ai supprimé la gestion du localStorage vu que c'est pas le sujet pour le moment.

Si t'as des questions ... L'idée c'est de passer par un service.
10/03/2016, 16h20
paladice

Effectivement, ça fonctionne impeccable =D merci * 1000. Je vais essayer de comprendre ce qui n'allait pas.

Citation:

Envoyé par Marco46

Si t'as des questions ... L'idée c'est de passer par un service.

J'avais lu dans un tuto en anglais qu'on pouvais utiliser des "factory". Je suppose que c'est la même chose que les services ?
10/03/2016, 16h29
Marco46

Citation:

Envoyé par paladice

Je vais essayer de comprendre ce qui n'allait pas.

A mon avis c'est l'héritage par prototype de javascript qui foutait le bordel. C'est pour cette raison qu'il est fortement conseillé de ne publier que des objets complexes dans la vue et jamais de primitives directement.

C'est à dire qu'au lieu de publier directement prénom et nom tu vas publier un objet data qui a pour membres prénom et nom. Et dans ta vue tu accès à prénom en faisant data.prenom.

Ceci dit, si tu cherches à faire de l'internationalisation ce n'est pas la bonne méthode.

Citation:

Envoyé par paladice

J'avais lu dans un tuto en anglais qu'on pouvais utiliser des "factory". Je suppose que c'est la même chose que les services ?

Oui, ce gist devrait t'aider à comprendre.
11/03/2016, 09h02
paladice

Citation:

Envoyé par Marco46

A mon avis c'est l'héritage par prototype de javascript qui foutait le bordel. C'est pour cette raison qu'il est fortement conseillé de ne publier que des objets complexes dans la vue et jamais de primitives directement.

Ah ok, je vois un peu mieux le truc je pense.

Citation:

Envoyé par Marco46

Oui, ce gist devrait t'aider à comprendre.

Parfait merci =D.