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

— Awa Melvine
source

1

peut-être lié? github.com/angular/angular.js/commit/…

— Claies

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
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
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
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
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
source