anglejs 1.6.0 (aktuell) Routen funktionieren nicht

98

Ich hatte erwartet, diese Frage auf Stackoverflow zu sehen, tat es aber nicht. Anscheinend bin ich der einzige, der dieses Problem hat, das mir sehr häufig vorkommt.

Ich habe ein grundlegendes Projekt, an dem ich arbeite, aber die Routen scheinen nicht zu funktionieren, obwohl alles, was ich bisher getan habe, richtig zu sein scheint.

Ich habe dieses Stück HTML in meiner index.htmlDatei:

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

und hier ist mein 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: '/' });
}]);

Wenn ich jetzt nur die Seite besuche, bekomme ich Folgendes in der URL:

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

und wenn ich auf den Add quoteButton klicke, bekomme ich folgendes:

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

Was kann hier das Problem sein? Danke für die Hilfe

angularjs angular-routing ngroute angularjs-ng-route angularjs-1.6 Awa Melvine
quelle
1
möglicherweise verwandt? github.com/angular/angular.js/commit/…
Claies

Antworten:

172

Verwenden Sie einfach Hashbang #!in der href:

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

Aufgrund von aa077e8 wurde das Standard-Hash-Präfix, das für $ location-Hash-Bang-URLs verwendet wird, von der leeren Zeichenfolge ( '') in bang ( '!') geändert .

Wenn Sie tatsächlich kein Hash-Präfix haben möchten, können Sie das vorherige Verhalten wiederherstellen, indem Sie Ihrer Anwendung einen Konfigurationsblock hinzufügen:

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

Weitere Informationen finden Sie unter

Tut mir leid, dass ich auf mein hohes Pferd gestiegen bin, aber ... Wie wurde das veröffentlicht? Dies ist ein massiver, brechender Fehler. - @MiloTheGreat

Die bahnbrechende Änderung von # 14202 sollte zurückgesetzt werden, da die Referenzspezifikation bereits offiziell veraltet war # 15715

Ich werde dieses Problem schließen, da wir kein Feedback haben. Sie können dieses Problem gerne erneut öffnen, wenn Sie neues Feedback geben können.

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

georgeawg
quelle
16
Tut mir leid, dass ich auf mein hohes Pferd gestiegen bin, aber ... Wie wurde das veröffentlicht? Dies ist ein massiver, brechender Fehler.
MiloTheGreat
2
@ MiloTheGreat zögern Sie nicht, Ihr Feedback beim AngularJS-Team zu hinterlassen - github.com/angular/angular.js/issues/15715
georgeawg
39

Fügen Sie einfach das !in das href:

<body>
    <a href="#!/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>
v-tec
quelle
7
Wow verschwendete Stunden nach veralteten Tutorials zum Routing. Alles was mir fehlte war das '!'. Danke dir!
Philippe Maes
Bei all dem Jumpo Mumpo über Hashes und Hashbang hätte ich nie gedacht, dass "!" scheint ein illegales Zeichen zu sein, das ohne Bezug erscheint. Und wenn ich es einfach akzeptiere und anerkenne, dass es existiert, wäre das Problem gelöst.
Mohammed Joraid
Ich auch ... das hat mich verrückt gemacht!
VictorEspina
6

Ich konnte das Routing in 1.6.4 nicht zum Laufen bringen, daher habe ich mich für Angular 1.5.11 entschieden und das Routing funktioniert einwandfrei, obwohl ich alle meine Routings definieren musste, wenn (..) mit nachfolgendem "/" funktioniert.

Wenn es für Sie eine Option ist, sich an eine ältere Version von Angular zu halten, sollten Sie dies in Betracht ziehen, da dies Ihre Nerven retten kann ...

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
quelle
Wie wirkt sich das Bleiben auf 1.5 auf das Upgrade auf Angular 2/3/4/5 / etc aus? Funktioniert ngUpgrade von 1,5 bis 2+? Ich habe das Gefühl, dass ngUpgrade für uns möglicherweise nicht lebensfähig ist. (Ja, dieser Kommentar wird meistens unsichtbar sein und in den Wind heulen)
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
quelle
0

Versuchen Sie dies könnte helfen ...

In HTML oder Seite anzeigen

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

In der Skriptseite 

var app=angular
.module('myModule',['ngRoute'])
.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/Home', {
      templateUrl: 'FolderName/Home.html',
      controller: 'homeCtr'
    })
      $locationProvider.hashPrefix('');
     });
Manikantan
quelle