web-dev-qa-db-fra.com

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

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

Je travaille sur un projet de base, mais les itinéraires ne semblent pas fonctionner, même si tout ce que j'ai fait jusqu'à présent semble être correct.

J'ai ce morceau de HTML dans mon fichier index.html:

<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 je reçois dans l'URL:

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

et quand je clique sur le bouton Add quote, je reçois ceci:

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

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

angularjsangular-routingngrouteangularjs-ng-routeangularjs-1.6
96
Awa Melvine

Utilisez simplement hashbang #! dans le href:

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

En raison de aa077e8 , le préfixe de hachage par défaut utilisé pour les URL de hash-bang $ location est passé de la chaîne vide ('') à la bang ('!').

Si vous souhaitez réellement ne pas avoir de préfixe de hachage, vous pouvez restaurer le comportement précédent en ajoutant un bloc de configuration à votre application:

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

Pour plus d'informations, voir

Désolé de monter sur mon grand cheval mais ... Comment cela a-t-il été libéré? Ceci est énorme, bug de rupture. - @ MiloTheGreat

La modification décisive de # 14202 devrait être annulée car la spécification de référence était déjà officiellement obsolète # 15715

Je vais fermer ce problème car nous n'avons reçu aucun retour. N'hésitez pas à rouvrir ce problème si vous pouvez fournir de nouveaux commentaires.

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

166
georgeawg

Incluez simplement le ! dans le href:

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

Le routage ne fonctionnant pas dans la version 1.6.4, j’ai donc décidé d’utiliser angular 1.5.11. Le routage fonctionne bien, même si j’avais besoin de définir tous mes routages dans les cas où (..) fonctionne avec le fin ("/ "

Si vous en tenir à une ancienne version de angular est une option pour vous, 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"
});
});
5
lixonn

Essayez celui-ci pourrait aider ...

En html ou voir la page

 <body>
       <a href="#/Home.html">Home</a>
       <div ng-view></div>
 </body>

Dans la page de script

var app=angular
.module('myModule',['ngRoute'])
.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/Home', {
      templateUrl: 'FolderName/Home.html',
      controller: 'homeCtr'
    })
      $locationProvider.hashPrefix('');
     });
0
Manikantan
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.hashPrefix('');
  $routeProvider
    .when('/add-quote', {
      templateUrl: 'views/add_quote.html',
      controller: 'QuoteCtrl'
    })
    .otherwise({ redirectTo: '/' });
}]);
0
Pranav V R