Las rutas de angularjs 1.6.0 (la última ahora) no funcionan

98

Esperaba ver esta pregunta en Stackoverflow, pero no lo hice. Aparentemente soy el único que tiene este problema que me parece muy común.

Tengo un proyecto básico en el que estoy trabajando, pero las rutas no parecen funcionar aunque todo lo que he hecho hasta ahora parece correcto.

Tengo esta pieza de html en mi index.htmlarchivo:

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

y aquí está mi 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: '/' });
}]);

Ahora, cuando visito la página, esto es lo que obtengo en la URL:

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

y cuando hago clic en el Add quotebotón, obtengo esto:

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

¿Cuál puede ser el problema aquí? Gracias por la ayuda

— Awa Melvine
fuente

1

posiblemente relacionado? github.com/angular/angular.js/commit/…

— Claies

172

Simplemente use hashbang #!en el href:

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

Debido a aa077e8 , el prefijo hash predeterminado utilizado para las URL de hash-bang de $ location ha cambiado de la cadena vacía ( '') al bang ( '!').

Si realmente desea no tener un prefijo hash, puede restaurar el comportamiento anterior agregando un bloque de configuración a su aplicación:

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

Para más información, ver

Siento subirme a mi caballo pero ... ¿Cómo se publicó esto? Este es un error enorme que se rompe. - @MiloTheGreat

El cambio radical como el # 14202 debe revertirse ya que la especificación de referencia ya estaba oficialmente obsoleta # 15715

Voy a cerrar este problema porque no tenemos ningún comentario. No dude en volver a abrir este problema si puede proporcionar nuevos comentarios.

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

— Georgeawg
fuente

16

Siento subirme a mi caballo pero ... ¿Cómo se publicó esto? Este es un error enorme que se rompe.

— MiloTheGreat

2

@MiloTheGreat no dude en dejar sus comentarios con el equipo de AngularJS - github.com/angular/angular.js/issues/15715

— georgeawg

39

Simplemente incluya el !en href:

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

— v-tec
fuente

7

Wow horas perdidas siguiendo tutoriales obsoletos sobre enrutamiento ... todo lo que me faltaba era el '!'. ¡Gracias!

— Philippe Maes

Con todo el jumpo mumpo sobre hashes y hashbang, nunca pensé que "!" parece un personaje ilegal que aparece sin referencia. Y si lo acepto y reconozco su existencia, el problema se habría resuelto.

— Mohammed Joraid

Yo también ... ¡esto me estaba volviendo loco!

— VictorEspina

6

No pude hacer que el enrutamiento funcionara en 1.6.4, así que decidí usar angular 1.5.11 y el enrutamiento funciona bien, aunque necesitaba definir todas mis enrutamientos en funciones when (..) con el final "/"

Si optar por una versión anterior de angular es una opción para usted, considérelo, ya que puede salvarle los nervios ...

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
fuente

¿Cómo afecta permanecer en 1.5 la actualización a Angular 2/3/4/5 / etc? ¿Funciona ngUpgrade de 1.5 a 2+? Siento que ngUpgrade puede no ser viable para nosotros. (sí, este comentario será mayormente invisible y aullará en el viento)

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

0

Pruebe este podría ayudar ...

En html o ver página

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

En la página de script

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

— Manikantan
fuente