AngularJS: ngRoute no funciona
(3)
5 y descubrí por qué no funcionaba antes
Olvidé incluir lo siguiente en index.html
<div ng-view></div>
Estoy tratando de hacer que esta ruta simple funcione y no puedo entender cuál es el problema.
Este es el HTML:
<html lang="en" ng-app="app">
.
.
.
<a href="#voip">
<div class="col-lg-3 service">
<img src="assets/img/voip.svg"/>
<h4 ng-bind-html="content.home.voip_header"></h4>
<p ng-bind-html="content.home.voip_txt"></p>
</div>
</a>
<section id="view">
<div ng-view></div>
</section>
Esta es la ruta:
var app = angular.module(''app'',[
''ngRoute'',
''ngSanitize''
]);
app.config([''$routeProvider'',function($routeProvider){
$routeProvider
.when(''/voip'',{
templateUrl:''assets/templates/voip.html''
});
}]);
La plantilla se carga si especifico ''lo contrario'' como se muestra a continuación. Pensé que tal vez estaba usando la sintaxis incorrecta en mi atributo href, pero busqué en todas partes y parece que así es como debería ser.
.otherwise({
redirectTo:''/voip''
})
Otra cosa es que si escucho
$routeChangeSuccess
, el evento se activa, pero la vista no se carga.
¿Algunas ideas?
Es correcto porque está utilizando angular 1.6 y ha habido un cambio en el prefijo hash predeterminado:
Debido a aa077e8, 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 su aplicación no usa el modo HTML5 o se está ejecutando en navegadores que no admiten el modo HTML5, y no ha especificado su propio prefijo hash, ¡las URL del lado del cliente ahora contendrán un! prefijo. Por ejemplo, en lugar de mydomain.com/#/a/b/c, la URL se convertirá en mydomain.com/#!/a/b/c.
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 (''''); }]); Source
Entonces tienes algunas opciones:
1. Establecer HTML5mode verdadero
$locationProvider.html5Mode(true);
y en html establece la base en el encabezado html:
<base href="/">
Por último, cambie
<a ng-href="#voip">
a
<a ng-href="voip">
2. Use la forma 1.6
Cambio
<a ng-href="#voip">
a
<a ng-href="#!voip">
3. Regrese al comportamiento anterior desde 1.5 - establezca el prefijo hash manualmente
app.config([''$locationProvider'', function($locationProvider) {
$locationProvider.hashPrefix('''');
}]);
intente usar signos de exclamación en html5 + ajs 1.6.
por ejemplo, en lugar de href = "# home" ..... escriba href = "#! home". Funcionó para mí después de 4 horas de rascarse la cabeza.