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 :
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 html : 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 <!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 html : 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
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 quils sentraident. <br><br> Une fois laide terminée, lutilisateur 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 html : 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
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 quils sentraident. <br><br> Une fois laide terminée, lutilisateur 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 html : 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 <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'}).
En plus de ça, je me demande si plusieurs <ng-app> dans index.html ne posent pas un problème ?Error: Accès refusé.
at Anonymous function (http://ajax.googleapis.com/ajax/libs....min.js:92:209)
at q (http://ajax.googleapis.com/ajax/libs...r.min.js:89:65)
at Anonymous function (http://ajax.googleapis.com/ajax/libs....min.js:86:214)
at Anonymous function (http://ajax.googleapis.com/ajax/libs...min.js:118:207)
at m.prototype.$eval (http://ajax.googleapis.com/ajax/libs...min.js:132:347)
at m.prototype.$digest (http://ajax.googleapis.com/ajax/libs...min.js:129:357)
at m.prototype.$apply (http://ajax.googleapis.com/ajax/libs...min.js:133:111)
at Anonymous function (http://ajax.googleapis.com/ajax/libs....min.js:19:477)
at e (http://ajax.googleapis.com/ajax/libs...r.min.js:39:87)
at d (http://ajax.googleapis.com/ajax/libs....min.js:19:398)
Error: [$compile:tpload] http://errors.angularjs.org/1.4.5/$compile/tpload?p0=connexion.html&p1=undefined&p2=undefined
at Anonymous function (http://ajax.googleapis.com/ajax/libs...min.js:143:414)
at Anonymous function (http://ajax.googleapis.com/ajax/libs...min.js:118:207)
at m.prototype.$eval (http://ajax.googleapis.com/ajax/libs...min.js:132:347)
at m.prototype.$digest (http://ajax.googleapis.com/ajax/libs...min.js:129:357)
at m.prototype.$apply (http://ajax.googleapis.com/ajax/libs...min.js:133:111)
at Anonymous function (http://ajax.googleapis.com/ajax/libs....min.js:19:477)
at e (http://ajax.googleapis.com/ajax/libs...r.min.js:39:87)
at d (http://ajax.googleapis.com/ajax/libs....min.js:19:398)
at yc (http://ajax.googleapis.com/ajax/libs....min.js:20:172)
at Zd (http://ajax.googleapis.
Vu qu'il y a celui de index.html puis celui des .html chargés.
Merci à tous pour votre aide.
Partager