routeprovider - ui router angularjs




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

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"
});
});

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:

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

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

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

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


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

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: '/' });
}]);




angularjs-1.6