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

98

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 très courant.

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

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

<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, lorsque je viens de visiter la page, voici ce que j'obtiens dans l'url:

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

et quand je clique sur le Add quotebouton, j'obtiens ceci:

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

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

angularjs angular-routing ngroute angularjs-ng-route angularjs-1.6 Awa Melvine
la source
1
peut-être lié? github.com/angular/angular.js/commit/…
Claies

Réponses:

172

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 hachage $ location a changé de la chaîne vide ( '') à bang ( '!').

Si vous ne souhaitez 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, consultez

Désolé de monter sur mon grand cheval mais ... Comment cela a-t-il été publié? C'est un bug massif et cassant. - @MiloTheGreat

Le changement de rupture comme par # 14202 devrait être annulé car la spécification de référence était déjà officiellement obsolète # 15715

Je vais clôturer ce problème car nous n'avons aucun commentaire. N'hésitez pas à rouvrir ce numéro si vous pouvez fournir de nouveaux commentaires.

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

georgeawg
la source
16
Désolé de monter sur mon grand cheval mais ... Comment cela a-t-il été publié? C'est un bug massif et cassant.
MiloTheGreat
2
@MiloTheGreat n'hésitez pas à laisser vos commentaires à l'équipe AngularJS - github.com/angular/angular.js/issues/15715
georgeawg
39

Incluez simplement le !dans le href:

<body>
    <a href="#!/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>
v-tec
la source
7
Wow, j'ai perdu des heures à suivre des didacticiels obsolètes sur le routage ... tout ce qui me manquait était le '!'. Je vous remercie!
Philippe Maes
Avec tout le jumpo mumpo sur les hashes et le hashbang, je n'ai jamais pensé que "!" semble être un caractère illégal qui apparaît sans référence. Et si je l'acceptais et reconnaissais son existence, le problème aurait été résolu.
Mohammed Joraid
Moi aussi ... ça me rendait fou!
VictorEspina le
6

Je ne pouvais pas faire fonctionner le routage en 1.6.4 alors j'ai décidé d'utiliser angular 1.5.11 et le routage fonctionne bien bien que je devais définir tous mes routages dans when (..) fonctionne avec "/"

Si vous en tenir à une ancienne version d'angular est une option pour vous, envisagez-la car cela peut vous sauver les 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"
});
});
Lixonn
la source
Comment le fait de rester sur 1.5 affecte-t-il la mise à niveau vers Angular 2/3/4/5 / etc? NgUpgrade fonctionne-t-il de la version 1.5 à la version 2+? Je pense que ngUpgrade n'est peut-être pas viable pour nous. (ouais ce commentaire sera pour la plupart invisible et hurlant dans le vent)
eflat
0 
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.hashPrefix('');
  $routeProvider
    .when('/add-quote', {
      templateUrl: 'views/add_quote.html',
      controller: 'QuoteCtrl'
    })
    .otherwise({ redirectTo: '/' });
}]);
Pranav VR
la source
0

Essayez celui-ci pourrait vous 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('');
     });
Manikantan
la source