Chargement d'une page et ngViewDirective

**lgcaro29** · 06/01/2015, 12h01

Bonjour,

C'est encore moi avec mes problèmes d'angular js.

J'ai ma page 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 lang="fr" ng-app="myApp" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Go Voiturage</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="web/css/app.css">
<link rel="stylesheet" href="web/css/eventsview.css">
<link
	href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
 
<body>
 
	<div ng-view></div>
 
	<h1>GO VOITURAGE</h1>
 
		<h2> Bienvenue sur le site de covoiturage </h2>
 
		<h3><a href="/#/events" class="btn btn-primary">Liste des spectacles</a></h3>
 
</body>
 
</html>

app.js est :

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
'use strict';
 
/**
 * Déclaration de l'application routeApp
 */
var myApp = angular.module('myApp', [
                                     'ngRoute',
                                     'ui.bootstrap',
                                     'myAppControllers',
                                     ]);
 
/**
 * Configuration du module principal : myApp
 */
myApp.config(['$routeProvider',
              function($routeProvider) { 
 
	$routeProvider
	.when('/events', {
		templateUrl: 'pagehtml/events.html',
		controller: 'eventsCtrl'
	})
	.when('/crews', {
		templateUrl: 'pagehtml/crews.html',
		controller: 'crewsCtrl'
	})
	.otherwise({
		redirectTo: '/events'
	});
}
]);
 
/**
 * Définition des contrôleurs
 */
var myAppControllers = angular.module('myAppControllers', []);
 
//Contrôleur de la page des évènements
myAppControllers.controller('eventsCtrl', ['$scope', '$http', 
                                           function($scope, $htpp){
	$http({
		method : 'GET',
		url : 'rest/event/events/'
	}).success(function(data) {
		//console.log(data);
		$scope.events = data;
	});
}
]);
 
//Contrôleur de la page de contact
myAppControllers.controller('crewCtrl', ['$scope','$http', 
                                         function($scope, $htpp){
	$http({
		method : 'GET',
		url : 'rest/event/{id_event}/crews/'
	}).success(function(data) {
		//console.log(data);
		$scope.crews = data;
	});
}
]);

La page index s'affiche bien mais j'ai le message d'erreur suivant :

Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective
http://errors.angularjs.org/1.2.26/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24route%20%3C-%20ngViewDirective

Du coup lorsque je clique sur liste des événements, la page events.html ne s'affiche pas.

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
<!-- pagehtml/events.html -->
<section class="events">
 
    <h2>Liste des spectacles</h2>
 
    <div id="ng-app" ng-app="myApp" ng-controller="eventsCtrl">
		<div ng-repeat="event in events" class='eventBody'>
			<h2>{{event.titre}}</h2>
			<div class="eventData">A {{event.place}} le {{event.date}} à
				{{event.hour}}</div>
 
		</div>
	</div>
 
</section>

Merci pour votre aide.

**Marco46** · 06/01/2015, 15h34

Quelques remarques :

- Dans les liens de ton menu du index.html, pourquoi commencer tes url par un "/" ? Un dièse suffit.
- Ton template events.html contient une déclaration d'un ng-app ayant un nom identique à la ng-app de ton index.html. Dans ton contexte tu n'as pas besoin d'un 2ème ng-app. De +, 2 ng-app avec le même nom je suis pas certain que ça fonctionne correctement. Supprime celui du template.
- Déclare tes scripts en fin de page html, comme ça ils seront exécutés quand le html de l'index aura été chargé par le navigateur.
- Check tes chemins d'accès (les chemins d'accès des ressources je veux dire).
- Check le produit de ton build (ton livrable) pour vérifier qu'il ne manque rien dedans.

Chargement d'une page et ngViewDirective

AngularJS

Discussions similaires

Partager

Partager