AngularJS

**paladice** · 08/03/2016, 15h48

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 :

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

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 :

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
 
// 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 :

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
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.

**tchize_** · 08/03/2016, 20h29

Tu peux faire voir ton app.js?

**Logan Mauzaize** · 08/03/2016, 22h30

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

**Maitre2B** · 09/03/2016, 00h17

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

**paladice** · 09/03/2016, 09h23

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 :

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

<body ng-app="eModule">

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

Code :

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

<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 :

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
 
<!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 :

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
 
// --------------------------------------------------- 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.

**Marco46** · 09/03/2016, 11h00

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 :

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

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 :

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

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.

AngularJS - Question de scope

Vue hybride

Discussions similaires

Partager

Partager