IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AngularJS Discussion :

$RouteProvider : rien ne fonctionne


Sujet :

AngularJS

  1. #1
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2011
    Messages
    90
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2011
    Messages : 90
    Points : 57
    Points
    57
    Par défaut $RouteProvider : rien ne fonctionne
    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 :
    Nom : directory.png
Affichages : 504
Taille : 31,1 Ko

    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 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 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 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 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'}).

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

  2. #2
    Invité
    Invité(e)
    Par défaut
    Salut , j'ai ça :
    http://nicolash.org/angular/truc22Sq....html#/accueil




    Le code :
    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
    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/
    Dernière modification par Invité ; 13/04/2016 à 11h32.

  3. #3
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2011
    Messages
    90
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2011
    Messages : 90
    Points : 57
    Points
    57
    Par défaut
    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é.

  4. #4
    Invité
    Invité(e)
    Par défaut
    Normalement, ng-app n'est pas spécifié dans les vues, mais uniquement dans index.html

  5. #5
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2011
    Messages
    90
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2011
    Messages : 90
    Points : 57
    Points
    57
    Par défaut
    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

  6. #6
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2015
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Finistère (Bretagne)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Octobre 2015
    Messages : 34
    Points : 24
    Points
    24
    Par défaut
    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+

  7. #7
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2011
    Messages
    90
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2011
    Messages : 90
    Points : 57
    Points
    57
    Par défaut
    Merci, mais il me faut une solution pour IE :s

  8. #8
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2015
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Finistère (Bretagne)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Octobre 2015
    Messages : 34
    Points : 24
    Points
    24
    Par défaut
    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 ^^

  9. #9
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2011
    Messages
    90
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2011
    Messages : 90
    Points : 57
    Points
    57
    Par défaut
    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 :/

  10. #10
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2015
    Messages
    34
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Finistère (Bretagne)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Octobre 2015
    Messages : 34
    Points : 24
    Points
    24
    Par défaut
    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 !

  11. #11
    Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2011
    Messages
    90
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Septembre 2011
    Messages : 90
    Points : 57
    Points
    57
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. CURL: plus rien ne fonctionne !
    Par supergrey dans le forum Windows
    Réponses: 3
    Dernier message: 13/04/2008, 12h35
  2. Rien ne fonctionne plus depuis que j'ai mis un mot de passe
    Par beegees dans le forum Installation
    Réponses: 8
    Dernier message: 05/03/2008, 14h37
  3. Au secours, plus rien ne fonctionne !
    Par rrouxel dans le forum SharePoint
    Réponses: 4
    Dernier message: 21/02/2008, 15h13
  4. Réponses: 3
    Dernier message: 13/06/2007, 14h57
  5. [X][C#..] subreports : "rien" ne fonctionne
    Par v1nce dans le forum SDK
    Réponses: 4
    Dernier message: 07/03/2007, 12h04

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo