route - Las rutas de angularjs 1.6.0(la última ahora) no funcionan
routing angular 1 (5)
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 a pesar de que todo lo que he hecho hasta ahora parece estar bien.
Tengo esta pieza de html en mi archivo
index.html
:
<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 acabo de visitar la página, esto es lo que obtengo en la URL:
y cuando hago clic en el botón
Add quote
, obtengo esto:
¿Cuál puede ser el problema aquí? Gracias por la ayuda
No pude conseguir que la ruta funcionara en 1.6.4, así que decidí usar angular 1.5.11 y la ruta funciona bien, aunque necesitaba definir todas mis rutas en cuando (..) funciona con "/" al final
Si apegarse a una versión anterior de angular es una opción para usted, considérelo, ya que puede salvar sus 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"
});
});
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 del script
var app=angular
.module(''myModule'',[''ngRoute''])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when(''/Home'', {
templateUrl: ''FolderName/Home.html'',
controller: ''homeCtr''
})
$locationProvider.hashPrefix('''');
});
Simplemente incluya el
!
en el
href
:
<body>
<a href="#!/add-quote">Add Quote</a>
<div ng-view ></div>
</body>
Simplemente use hashbang
#!
en el href:
<a href="#!/add-quote">Add Quote</a>
Debido a
github.com/angular/angular.js/commit/…
, el prefijo hash predeterminado utilizado para las URL de hash-bang de $ location ha cambiado de la cadena vacía (
''''
) a la explosión (
''!''
).
Si realmente no desea 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
- AngularJS GitHub Pull # 14202 Cambió el hashPrefix predeterminado a ''!''
- AngularJS Guide - Migration - aa0077e8
Lamento subirme a mi caballo pero ... ¿Cómo se liberó? Esto es masivo, rompiendo el error. - @MiloTheGreat
El cambio de ruptura como en # 14202 debería revertirse ya que la especificación de referencia ya estaba oficialmente en desuso # 15715
Voy a cerrar este problema porque no tenemos comentarios. Siéntase libre de reabrir este problema si puede proporcionar nuevos comentarios.
- https://github.com/angular/angular.js/issues/15715#issuecomment-281785369
app.config([''$routeProvider'', ''$locationProvider'', function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('''');
$routeProvider
.when(''/add-quote'', {
templateUrl: ''views/add_quote.html'',
controller: ''QuoteCtrl''
})
.otherwise({ redirectTo: ''/'' });
}]);