Le rotte angularjs 1.6.0 (ultima ora) non funzionano

98

Mi aspettavo di vedere questa domanda su Stackoverflow ma non l'ho fatto. Apparentemente sono l'unico ad avere questo problema che mi sembra molto comune.

Ho un progetto di base su cui sto lavorando ma le vie non sembrano funzionare anche se tutto quello che ho fatto finora sembra essere giusto.

Ho questo pezzo di html nel mio index.htmlfile:

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

ed ecco il mio 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: '/' });
}]);

Ora, quando visito la pagina, ecco cosa ottengo nell'URL:

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

e quando clicco sul Add quotepulsante, ottengo questo:

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

Quale può essere il problema qui? Grazie per l'aiuto

— Awa Melvine
fonte

1

possibilmente correlato? github.com/angular/angular.js/commit/…

— Claies

172

Usa semplicemente hashbang nell'href #!:

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

A causa di aa077e8 , il prefisso hash predefinito utilizzato per gli URL hash-bang di $ location è cambiato dalla stringa vuota ( '') al bang ( '!').

Se in realtà non vuoi avere un prefisso hash, puoi ripristinare il comportamento precedente aggiungendo un blocco di configurazione alla tua applicazione:

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

Per ulteriori informazioni, vedere

Mi dispiace salire sul mio cavallo alto ma ... come è stato rilasciato? Questo è un bug enorme e dannoso. - @MiloTheGreat

La modifica decisiva come da # 14202 dovrebbe essere ripristinata poiché la specifica di riferimento era già ufficialmente deprecata # 15715

Chiudo questo numero perché non abbiamo alcun feedback. Sentiti libero di riaprire questo problema se puoi fornire un nuovo feedback.

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

— georgeawg
fonte

16

Mi dispiace salire sul mio cavallo alto ma ... come è stato rilasciato? Questo è un bug enorme e dannoso.

— MiloTheGreat

2

@MiloTheGreat non esitare a lasciare il tuo feedback al team di AngularJS - github.com/angular/angular.js/issues/15715

— georgeawg

39

Includere semplicemente il !nel href:

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

— v-tec
fonte

7

Wow, ore sprecate seguendo tutorial deprecati sul routing ... tutto quello che mi mancava era il '!'. Grazie!

— Philippe Maes

Con tutto il jumpo mumpo su hash e hashbang non ho mai pensato che "!" sembra un personaggio illegale che appare senza riferimento. E se solo lo accetto e riconosco che esiste, il problema sarebbe stato risolto.

— Mohammed Joraid

Anch'io ... questo mi stava facendo impazzire!

— VictorEspina

6

Non riuscivo a far funzionare il routing nella 1.6.4, quindi ho deciso di usare l'angular 1.5.11 e il routing funziona bene anche se avevo bisogno di definire tutti i miei percorsi in quando (..) funziona con trailing "/"

Se attenersi a una versione precedente di angular è un'opzione per te, considerala poiché potrebbe salvarti i nervi ...

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
fonte

In che modo rimanere su 1.5 influisce sull'aggiornamento ad Angular 2/3/4/5 / ecc? NgUpgrade funziona da 1.5 a 2+? Sento che ngUpgrade potrebbe non essere fattibile per noi. (sì, questo commento sarà per lo più invisibile e ululerà nel vento)

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

0

Prova questo potrebbe aiutare ...

In html o visualizza pagina

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

Nella pagina dello script

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

— Manikantan
fonte