101 votes

angularjs 1.6.0 (dernière maintenant) les routes ne fonctionnent pas

Je m'attendais à voir cette question sur Stackoverflow, mais n'a pas. Apparemment je suis le seul à avoir ce problème qui me semble être très commun.

J'ai un projet de base que je suis en train de travailler sur mais les routes ne semblent pas fonctionner, même si tout ce que j'ai fait jusqu'à présent semble être de droite.

J'ai ce bout de code html dans mon index.html le fichier:

<html>
<head ng-app="myApp"> 
    <title>New project</title>
    <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script>

    <script src="app.js"></script>
</head>
<body>
    <a href="#/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>
</html>

et voici mon app.js:

var app = angular.module('myApp', ['ngRoute']);


app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/add-quote', {
            templateUrl: 'views/add_quote.html',
            controller: 'QuoteCtrl'
        })
        .otherwise({ redirectTo: '/' });
}]);

Maintenant, quand je viens de visiter la page, voici ce que j'obtiens dans l'url:

http://localhost:8000/admin#!/

et quand je clique sur l' Add quote bouton, j'obtiens ceci:

http://localhost:8000/admin#!/#%2Fadd-devis

Quel peut être le problème ici? Merci pour l'aide

173voto

georgeawg Points 31282

Utilisez simplement hashbang #! dans le href:

 <a href="#!/add-quote">Add Quote</a>

En raison de aa077e8, le hachage par défaut-préfixe utilisé pour $emplacement de hachage-bang Url a changé à partir de la chaîne vide ('') pour le bang ('!').

Si vous voulez vraiment ne pas avoir de hachage-préfixe, vous pouvez restaurer le comportement précédent en ajoutant un bloc de configuration de votre application:

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

Pour plus d'informations, voir


Désolé pour monter sur mes grands chevaux, mais... Comment fait-il libéré? C'est énorme, la rupture de bug. — @MiloTheGreat

La modification de rupture que par #14202 doit être restauré comme la spécification de référence a déjà été officiellement obsolète #15715

Je vais fermer ce sujet car nous n'avons pas tous les commentaires. Hésitez pas à rouvrir cette question si vous pouvez fournir de nouveaux commentaires.

https://github.com/angular/angular.js/issues/15715#issuecomment-281785369

39voto

v-tec Points 576

Incluez simplement les ! dans les href :

 <body>
    <a href="#!/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>
 

6voto

lixonn Points 101

Je ne pouvais pas faire fonctionner le routage dans la 1.6.4, alors j’ai décidé d’utiliser l’angulaire 1.5.11 et le routage fonctionne bien même si j’avais besoin de définir tous mes routages dans (..) les fonctions suivies de "/".

Si vous pouvez vous en tenir à une version plus ancienne de Angular, envisagez-la, car elle pourrait vous épargner des nerfs ...

 var app = angular.module("myApp", ["ngRoute"]);

app.config(function($routeProvider) {
$routeProvider
.when("/layoutandviewbox", {
    templateUrl : "views/layout-and-viewbox.html"
})
.when("/basicshapes", {
    templateUrl : "views/basic-shapes.html"
})
.when("/advancedshapes", {
    templateUrl : "views/advanced-shapes.html"
})
.when("/groups", {
    templateUrl : "views/groups.html"
})
.when("/transformations", {
    templateUrl : "views/transformations.html"
})
.when("/effects", {
    templateUrl : "views/effects.html"
})
.when("/", {
    templateUrl : "views/basic-shapes.html"
});
});
 

0voto

Pranav V R Points 771
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.hashPrefix('');
  $routeProvider
    .when('/add-quote', {
      templateUrl: 'views/add_quote.html',
      controller: 'QuoteCtrl'
    })
    .otherwise({ redirectTo: '/' });
}]);

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X