$RouteProvider : rien ne fonctionne

1 pièce(s) jointe(s)

Bonjour à tous,

J'ai commencé à développer un site web, mais ne m'étant pas assez documenté, je n'ai absolument pas intégrer de $RouteProvider.
Je n'avais donc pas un site en "single page".

J'ai donc voulu m'y mettre, et ai créé un Route.js qui est le fichier faisant la navigation, un index.html qui sert de page principale, puis des inscription.html, connexion.html et affiche_aide.html qui sont des pages qui seront chargées depuis index.html.

Au niveau du dossier contenant tous les fichiers, le voici :
Pièce jointe 206755

index.html, inscription.html connexion.html affiche_aide.html et Route.js sont à la racine.
Les controllers de inscription.html, connexion.html et affiche_aide.html sont dans le dossier "controller".

Route.js :

Code:

1
2
3
4
5
6
7
8
 
var app = angular.module('Route', ['ngRoute'])
    app.config(function($routeProvider) {
        $routeProvider
            .when('/', {templateUrl: 'connexion.html'})
            .when('/liste-aides', {templateUrl: 'affiche_aides.html'})
            .otherwise({redirectTo: '/inscription', templateUrl: 'inscription.html'});
});

index.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
 
<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="Content-Language" content="fr" />
		<meta name="Description" content="" />
		<meta name="Keywords" content="" />
		<meta name="Subject" content="" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="css/profil2.css" />
		<link rel="stylesheet" href="css/Profil_V3.css" />
        <title>Page index qui load 3 autres pages</title>
    </head>
 
	<body ng-app="Route">
		<div ng-view></div>
	</body>
 
	<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
	<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js"></script>
	<script src= "controller/ControllerSubscribe.js"></script>
	<script src= "controller/ControllerConnection.js"></script>
	<script src= "controller/ControllerDisplayRequest.js"></script>
	<script src= "Route.js"></script>
</html>

inscription.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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<div ng-app="Subscribe">
 
	<a href="#/liste-aides">listes des aides</a>
	<a href="#/">home</a>
	<a href="#/sdfsdfsdfsdf">Le otherwise</a>
 
	<div class="container"> <!-- Contenu principal-->
		<div class="row">
			<div class="col-lg-12">
				<div class="col-lg-6"> <!-- Block d'inscription -->
					<div class="row">
						<div class="col-lg-12">
							<div class="content-inscription">
								<header>
									<h1>Inscription</h1>
									<p>Inscription gratuite. Devenez un héros du quotidien</p>
								</header>
 
								<form ng-submit="Subscribe()" ng-controller="ControllerSubscribe">
									<div class="form-group">
										<label for="exampleInputEmail1">Email *</label><span id="error" ng-bind="message">   Cet email est déjà utilisé.</span>
										<input ng-model="Email" id="Email" type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" required/>
									</div>
									<div class="form-group">
										<label for="exampleInputPassword1">Mot de passe *</label>
										<input ng-model="Pwd" id="Pwd" type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required/>
									</div>
									<div class="col-lg-6">
										<div class="form-group">
											<label for="FirstName">Prénom *</label>
											<input ng-model="FirstName" id="FirstName" type="text" class="form-control" placeholder="Prénom" required/>
										</div>
									</div>
									<div class="col-lg-6">
										<div class="form-group">
											<label for="LastName">Nom *</label>
											<input ng-model="LastName" id="LastName" type="text" class="form-control" placeholder="Nom" required/>
										</div>
									</div>
									<div class="col-lg-offset-1 col-lg-3">
										<div class="form-group">
											<label for="Day">Jour *</label>
											<script>
                                                                                        document.write("<select ng-model='Day' id='Day' name='Day' class='form-control' size='1' required/>");
                                                                                        for (var day = 1; day <= 31; day += 1)
                                                                                        {
                                                                                                document.write("<option>" + day + "</option>");
                                                                                        }
                                                                                        document.write("</select>");
                                                                                        </script>
										</div>
									</div>
									<div class="col-lg-3">
										<div class="form-group">
											<label for="Month">Mois *</label>
											<script>
                                                                                        document.write("<select ng-model='Month' id='Month' name='Month' class='form-control' size='1' required/>");
                                                                                        var month = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"]
                                                                                        for (var i = 0; i <= 11; i += 1)
                                                                                        {
                                                                                                document.write("<option>" + month[i] + "</option>");
                                                                                        }
                                                                                        document.write("</select>");
                                                                                        </script>
										</div>
									</div>
									<div class="col-lg-3">
										<div class="form-group">
											<label for="Year">Année *</label>
											<script>
                                                                                        document.write("<select ng-model='Year' id='Year' name='Year' class='form-control' size='1' required/>");
                                                                                        var YearStart = 1900;
                                                                                        var YearEnd = 2002;
                                                                                        while (YearEnd >= YearStart)
                                                                                        {
                                                                                                document.write("<option>" + YearEnd + "</option>");
                                                                                                YearEnd -= 1;
                                                                                        }
                                                                                        document.write("</select>");
                                                                                        </script>
										</div>
									</div>
 
									<div class="col-lg-offset-1 col-lg-10 col-lg-offset-1">
										<div class="form-group text-center">
											<h2 for="Competence">Compétences :</h2>
										</div>
									</div>
									<center>
										<div class="col-lg-offset-1 col-lg-10 col-lg-offset-1" >
											<div class="col-lg-4">
												<input ng-model="informatique" id="informatique" type="checkbox" class="form-control" value="informatique"/>Informatique
											</div>
											<div class="col-lg-4" >
												<input ng-model="menage" id="menage" type="checkbox" class="form-control" value="ménage"/>Ménage/Entretien
											</div>
											<div class="col-lg-4" >
												<input ng-model="bricolage" id="bricolage" type="checkbox" class="form-control" value="bricolage"/>Bricolage
											</div>
										</div>
										<div class="col-lg-offset-1 col-lg-10 col-lg-offset-1" >
											<div class="col-lg-4">
												<input ng-model="enseignement" id="enseignement" type="checkbox" class="form-control" value="enseignement"/>Enseignement
											</div>
											<div class="col-lg-4" >
												<input ng-model="gardiennage" id="gardiennage" type="checkbox" class="form-control" value="gardiennage"/>Gardiennage
											</div>
											<div class="col-lg-4" >
												<input ng-model="jardinnage" id="jardinnage" type="checkbox" class="form-control" value="jardinnage"/>Jardinnage
											</div>
										</div>
										<br>
										<div class="text-center">
											<button type="submit" class="btn btn-default">S'inscrire</button>
										</div>
									</form>
 
									<div class="row separators">
										<div class="col-md-5">
											<div class="ligne-separator"></div>
										</div>
										<div class="col-md-2 text-center">
											Ou avec
										</div>
										<div class="col-md-5">
											<div class="ligne-separator"></div>
										</div>
									</div>
 
									<div class="row separators">
										<div class="col-md-3">
											<img class="img-inscription" src="" alt="Facebook"/>
										</div>
										<div class="col-md-3">
											<img class="img-inscription" src="" alt="Twitter"/>
										</div>
										<div class="col-md-3">
											<img class="img-inscription" src="" alt="Linkedin"/>
										</div>
										<div class="col-md-3">
											<img class="img-inscription" src="" alt="Viadeo"/>
										</div>
									</div>
 
								</div>
							</div>
						</div>
					</div> <!-- /// Block d'inscription ///-->
 
					<div class="col-lg-6"> <!-- Block de Présentation -->
						<div class="row">
							<div class="col-lg-12">
								<div class="content-informations">
									<h2>Qu'est-ce que Ummanity ?</h2>
									<p>Umannity est un réseau social “civilitaire”.<br/>
										Il permet de rapprocher différents utilisateurs en fonction de leurs besoins et de leurs compétences afin qu’ils s’entraident. <br><br>
										Une fois l’aide terminée, l’utilisateur est récompensé avec des points en fonction du temps passé sur la tâche. Ces points sont ensuite échangeables contre des offres chez de multiples partenaires commerciaux.
									</p>
									<h2>Devenez un héros du quotidien</h2>
									<p>Devenez un héros du quotidienDevenez un héros du quotidienDevenez un héros du quotidien.<br>
										Devenez un héros du quotidienDevenez un héros du quotidienDevenez un héros du quotidienDevenez un héros du quotidienDevenez un héros du quotidien<br>
									</p>				
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

connexion.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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<div ng-app="Connection">
 
	<a href="#/liste-aides">listes des aides</a>
	<a href="#/">home</a>
	<a href="#/sdfsdfsdfsdf">Le otherwise</a>
 
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div class="col-lg-6">
					<div class="row">
						<div class="col-lg-12">
							<div class="content-inscription">
								<header>
									<h1>Connexion</h1>
									<p>Connectez-vous et revêtez votre cape de héros</p>
								</header>
 
								<form ng-submit="Connection()" ng-controller="ControllerConnection">
									<div class="form-group">
										<label for="exampleInputEmail1">Email</label> <span id="error" ng-show="Error">Mauvais e-mail ou mot de passe</span>
										<input type="email" ng-model="Email" id="Email" class="form-control" id="exampleInputEmail1" placeholder="Email">
									</div>
									<div class="form-group">
										<label for="exampleInputPassword1">Mot de passe</label>
										<input type="password" ng-model="Pwd" id="Pwd" class="form-control" id="exampleInputPassword1" placeholder="Password">
									</div>
									<div class="text-center">
										<button type="submit" class="btn btn-default">Se connecter</button>
									</div>
								</form>
 
								<div class="row separators">
									<div class="col-md-5">
										<div class="ligne-separator"></div>
									</div>
									<div class="col-md-2 text-center">
										Ou avec
									</div>
									<div class="col-md-5">
										<div class="ligne-separator"></div>
									</div>
								</div>
 
								<div class="row separators">
									<div class="col-md-3">
										<img class="img-inscription" src="" alt="Facebook"/>
									</div>
									<div class="col-md-3">
										<img class="img-inscription" src="" alt="Twitter"/>
									</div>
									<div class="col-md-3">
										<img class="img-inscription" src="" alt="Linkedin"/>
									</div>
									<div class="col-md-3">
										<img class="img-inscription" src="" alt="Viadeo"/>
									</div>
								</div>
 
							</div>
						</div>
					</div>
				</div> <!-- /// Block d'inscription ///-->
 
				<div class="col-lg-6"> <!-- Block de Présentation -->
					<div class="row">
						<div class="col-lg-12">
							<div class="content-informations">
								<h2>Qu'est-ce que Ummanity ?</h2>
								<p>Umannity est un réseau social “civilitaire”.<br/>
									Il permet de rapprocher différents utilisateurs en fonction de leurs besoins et de leurs compétences afin qu’ils s’entraident. <br><br>
									Une fois l’aide terminée, l’utilisateur est récompensé avec des points en fonction du temps passé sur la tâche. Ces points sont ensuite échangeables contre des offres chez de multiples partenaires commerciaux.
								</p>
								<h2>Devenez un héros du quotidien</h2>
								<p>Devenez un héros du quotidienDevenez un héros du quotidienDevenez un héros du quotidien.<br>
									Devenez un héros du quotidienDevenez un héros du quotidienDevenez un héros du quotidienDevenez un héros du quotidienDevenez un héros du quotidien<br>
								</p>				
							</div>
						</div>
					</div>
				</div> <!-- /// Block de Présentation ///-->
			</div>
		</div>
	</div> <!-- ///Contenu principal ///-->
</div>

affiche_aides.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
<div ng-app="DisplayRequest">
	<div ng-controller="ControllerDisplayRequest">
 
	<a href="#/liste-aides">listes des aides</a>
	<a href="#/">home</a>
	<a href="#/sdfsdfsdfsdf">Le otherwise</a>
 
		<div class="well w col-sm-9">
			<div class="row">	
				<div class="well col-sm-12">
					<ul class="nav nav-tabs nav-justified" data-tabs="tabs">
						<li><a class="n b" href="#AllHelps" ng-click='setSkill()' data-toggle="tab">Toutes les demandes</a></li>
						<span ng-repeat="parsedSkill in parsedSkills">
							<li> <a ng-click='setSkill(parsedSkill)' class="n b margin" href="#bySkill" data-toggle="tab"> {{parsedSkill}}</a> </li>
						</span>
					</ul>
					<input type="text" id="searchText" ng-model="searchText" placeholder="Recherche">
					<div id="my-tab-content" class="tab-content">
						<div class="tab-pane active panel-bord text-padding" id="AllHelps">
							<span id="error" ng-show="Error1">Impossible de charger les demandes d'aides.</span>
							<p ng-repeat="data1 in allhelpdata | filter:search">
								1[name:]{{data1.name}}	[date:]{{data1.date}}  		[description:]{{data1.description}} 		 		[skills:]{{data1.skills}}
							</p>
						</div>
						<div class="tab-pane panel-bord text-padding" id="bySkill">			
							<span id="error" ng-show="Error2">Impossible de charger les demandes d'aides.</span>
							<p ng-repeat="data2 in skillshelpdata | filter:searchBySkill | filter:search">
								2<a ng-href="Aide.html#/?id={{data2.id}}">[Name:]{{data2.name}} [date:]{{data2.date}}		[skills:]{{data2.skills}}</a>
							</p>
						</div>
					</div>
				</div>
			</div>					
		</div>
	</div>
</div>

Malheureusement, lorsque je lance ma page index.html, absolument rien ne se passe, une page blanche alors que devrait s'afficher connexion.html vu que : .when('/', {templateUrl: 'connexion.html'}).

Citation:

En plus de ça, je me demande si plusieurs <ng-app> dans index.html ne posent pas un problème ?
Vu qu'il y a celui de index.html puis celui des .html chargés.

Merci à tous pour votre aide.

Salut , j'ai ça :
http://nicolash.org/angular/truc22Sq....html#/accueil

Le code :

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html ng-app="monApp">
  <head>
   <meta charset="utf8" >
    <title>Squelette de base d application MVC Angular</title>
        <!-- CHARGEMENT DES LIBRAIRIES -->
        <!-- APPEL LIB ANGULAR -->
        <script src="angular-1.3.13/angular.min.js"></script>
        <script src="angular-route.min.js"></script>
        <script src="librairies/angular-locale_fr-fr.js"></script>
         <!-- CSS DE L APPLICATION -->   
        <link href="app10.css" media="screen" rel="stylesheet" type="text/css" /></link>
 
   <!--Debut de scripting AngularJs : -->   
        <script>
 
        <!-- Déclaration des modules utilisés par l application MVC Angular, ngRoute est obligatoire pour router les vues : Les modules sont spécifiés entre Crochets, on en trouve des centaines sur internet, ils extendent les capacités d Angular, ce sont des librairies -->
         var monApp = angular.module('monApp',['ngRoute'])
 
 
 
        <!-- Configuration des vues et de leurs controleurs affiliés, avec ng-route . Note : Les vues peuvent partager le même controleur-->
        .config(function ($routeProvider, $locationProvider){
          $routeProvider
            .when('/accueil', {
              templateUrl: 'defaut.html',
              controller: 'accueilCtrl'
            })
            .when('/liste', {
              templateUrl: 'liste.html',
              controller: 'listeCtrl'
            })
            .when('/detail', {
              templateUrl: 'detail.html',
              controller: 'editDetailsCtrl'
            })
            .when('/statistiques', {
              templateUrl: 'stats.html',
              controller: 'stats'
            })          
            .otherwise({redirectTo: '/accueil'});
        })
 
 
 
 
 
 
        <!-- Ci-dessous, les différents controleurs qui opèrent sur les vues, ils peuvent partager le modèle de data à l'aide d'une factory, à ce moment là, il faut inclure la factory dans les options du controleur.. Généralement, les controleurs sont dans un répertoire séparé appellé "controllers" pour être à la norma bower Grunt -->
 
        <!-- LE CONTROLEUR DE L ACCUEIL -->
        .controller("accueilCtrl", function($scope) {
            $scope.bonjour = "Mr Durand";
        <!-- FIN DU CONTROLEUR -->
        })
 
        <!-- LE CONTROLEUR DE LA LISTE -->
        .controller("listeCtrl", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })
 
        <!-- LE CONTROLEUR D UN OBJET A EDITER -->
        .controller("editDetailsCtrl", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })
 
        <!-- LE CONTROLEUR DES STATISTIQUES -->
        .controller("stats", function($scope) {
        <!-- FIN DU CONTROLEUR -->
        })
 
    </script>
 </head>
 
 
 
 <!-- La page HTML générale -->
<body ng-controller="accueilCtrl" >
 
	<!-- Le menu, qui appelle,grâce à HREF, les différentes vues HTML situées plus bas, puis les affiche dans la balise ng-view -->
	<div class="container ">
		<div class="menu designDiv"> 
			<a href="#/accueil" class="">Accueil</a>
			<a href="#/liste" class="">Liste  </a>
			<a href="#/detail" class="">Details</a>
			<a href="#/statistiques" class="">Stats</a>
		</div>
		<!-- Cette balise NG-View va afficher les différentes vues -->
		<div id="main" class="designDiv">
			<div ng-view></div>
		</div>
	</div>
</body>
 
 
 
<!-- Voici maintenant la liste des vues qui s affichent dans la balise ng-view(voir plus haut), qui doivent généralement être dans un fichier séparé, normalement dans un réperoire "views", pour être à la norme BOWER -->
<!-- VUE HTML : DEFAUT-->
    <script type="text/ng-template" id="defaut.html">
        Bonjour {{bonjour}} je suis la vue de l accueil.
    </script>
 
<!-- VUE HTML : LISTE -->
    <script type="text/ng-template" id="liste.html">
        Bonjour, je suis la vue qui présente une liste d objets.
    </script>
 
<!-- VUE HTML : LISTE -->
    <script type="text/ng-template" id="detail.html">
        Bonjour, je suis la vue qui présente le detail d un objet.
    </script> 
 
 
<!-- VUE HTML : STATS -->
    <script type="text/ng-template" id="stats.html">
        Bonjour, je suis la vue qui présente des statistiques.
    </script>

Ou sur mon blog : https://nicolashcodes.wordpress.com/...outing-de-vue/

Mise à part le fait que mes Controllers se trouvent dans d'autres modules, je ne vois pas de différences entre nos codes :/
Mais ça me fait penser à quelque chose, est-il pertinent de vouloir un site web en single-page lorsqu'il s'agit d'un site web dynamique lambda où l'on cherche d'avoir un très bon SEO ?
Avec une seule page, je me demande si le référencement naturel des pages n'est pas d'un coup limité.

Normalement, ng-app n'est pas spécifié dans les vues, mais uniquement dans index.html

Bonjour à tous,

Après des recherches, il semblerait que mon code ne fonctionne pas par raison de sécurité.
En effet, que ce soit sur IE ou Google Chrome, ça ne fonctionne pas, mais si le lance Google Chrome en desactivant manuellement la sécurité, ça fonctionne.
Je travaille en local, et ce qui semble poser problème est que j'utilise des appels AJAX alors que mes url's sont des "file:///C:/Users/Georges/Desktop/Umannity/index.html#/"

Savez vous comment faire pour continuer à travailler normalement en local ? Dois-je installer WAMP pour travailler en local par exemple ? :s

merci de vos réponses

Ce dont tu parles correspond au allow-cross-origin qui bloque par sécurité les url's extérieur. Pour chrome, il existe un plugin nommé "Allow-Control-Allow-Origin", tu le trouveras directement en tapant ça sur google.

Bon courage,

A+

Merci, mais il me faut une solution pour IE :s

Dans ce cas là, tu es obligé de regarder comment configurer la réponse qu'envoie le serveur pour autorisé cross-origin. Sans certitude car je n'ai jamais fais mais de ce que j'ai pu lire sur le sujet, il semble que ce soit la voie à prendre. Jette un oeil sur cela, tu trouveras bien ton bonheur au bout d'un moment ^^

J'ai trouvé pas mal de "header"s pour résoudre mon problème, mais je pensais que ça venait du fait que je travaille en local, pas que le serveur avait un problème de CORS :/

Bas après tu as également la possibilité de placé ton projet dans www de wamp et le lancer avec localhost/monProjet, si tout est local cela devrait fonctionner !

Pour un problème de cross-origin , se traduisant par le message "Error: Accès refusé." sur IE :
Si vous travailler en local dans un simple dossier, il y a un problème de sécurité entre AJAX et votre URL de type file:///C:/Users/NAMEs/Desktop/Projecty/index.html#/

Pour résoudre ce problème : Installer WAMP, mettre votre dossier de travail dans wamp/www et lancez le serveur wamp.
Allez à l'adresse http://127.0.1 et tout devrait fonctionner :)