ng-view ne fonctionne pas

Par Fatima Dirham, il y a 9 ans

Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code, j'ai essayé d'utiliser ng-view mais elle ne fonctionne pas
voilà ma page principale : index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test ng-view</title> </head> <body ng-app="myapp"> <script src="angular/angular.min.js"></script> <script src="angular/angular-route.min.js"></script> <script src="js/app.js"></script> <a href="#/1"> titre 1</a> <a href="#/2"> titre 2</a> <a href="#/3"> titre 3</a> <hr/> ** c'est ng-view ** <br/> <ng-view></ng-view> </body> </html>

voilà mes pages à injecter :
page1.html

<div> <h1> <strong>page 1</strong></h1> <p align="center"> bonjour : titre 1</p> </div>

page2.html

<div> <h1> <strong>page 2</strong></h1> <p align="center"> bonjour : titre 2</p> </div>

page1.html

<div> <h1> <strong>page 3</strong></h1> <p align="center"> bonjour : titre 3</p> </div>

voilà le code js : app.js

var app=angular.module("myapp",["ngRoute"]); app.config(function($routeProvider){ $routeProvider.when("/1",{templateUrl:"views/page1.html"}) .when("/2",{templateUrl:"views/page2.html"}) .when("/3",{templateUrl:"views/page3.html"}) });

quand je tape l'url suivant

http://localhost:8080/index.html

j'obtient ma page index.html, mais lorsque je clique sur le lien titre1 ou titre2 ou bien titre3, ne n'obtient rien et voilà url apparu sur le navigateur quand je clique sur l'un des liens
titre 1

http://localhost:8080/index.html#!#%2F1

titre 2

http://localhost:8080/index.html#!#%2F2

titre 3

http://localhost:8080/index.html#!#%2F3

je ne sais pas d'où le probleme, merci de votre aide

11 réponses

Fatima Dirham, il y a 9 ans

voilà l'arborescence

+static +angular -angular-route.min.js -angular.min.js +js -app.js +views -page1.html -page2.html -page3.html -index.html

et rien ne s'affiche sur le console

Defy, il y a 9 ans

tu as testé de rajouter ./ devant le chemin de tes views? on sais jamais

Fatima Dirham, il y a 9 ans

ça ne marche pas

betaWeb, il y a 9 ans

Salut,

Essaye de charger tes scripts juste avant la fermeture de la balise <body>. Tu n'as aucune erreur dans ta console ?

Fatima Dirham, il y a 9 ans

betaWeb
j'ai essayé ce que vous avez demandé mais le probleme reste le meme et je n'ai aucune erreur dans la console

Maenhyr, il y a 9 ans

Bonjour,

d'après la doc, ils semblerait qu'il faille enlever les hash ici :

<a href="#/1"> titre 1</a> <a href="#/2"> titre 2</a> <a href="#/3"> titre 3</a>

devient donc

<a href="1"> titre 1</a> <a href="2"> titre 2</a> <a href="3"> titre 3</a>
Fatima Dirham, il y a 9 ans

prbaron
j'ai essayé mais j'ai obtenu un erreur qui s'affiche sur la page html

Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as a fallback. Thu May 04 16:32:28 BST 2017 There was an unexpected error (type=Not Found, status=404). No message available
Fatima Dirham, il y a 9 ans

jimibi
je n'ai pas bien compris, la compilation passe normallement sans erreur

Maenhyr, il y a 9 ans

Il semblerait qu'il manque une route pour /error. Qu'est ce qui provoque la redirection vers cette page ?

Fatima Dirham, il y a 9 ans

/error apparait lorsque j'enleve le " # " de liens

Fatima Dirham, il y a 9 ans

Bonjour,
j'ai essayé de changer les fichiers angular par les liens et ça marche, Apparemment, le problème réside dans les fichiers angular que j'ai
je ne sais pas pourquoi
merci