otherwise - ¿Cómo configurar routeProvider y locationProvider en angularJS?
ng-view (6)
Quiero activar html5Mode en angularJS, pero no sé por qué no funciona. ¿Hay algún problema con mi código?
angular
.module(''myApp'',[])
.config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when(''/'', {
templateUrl: ''partials/home.html'',
controller: HomeCtrl
});
$routeProvider.when(''/tags/:tagId'', {
templateUrl: ''partials/result.html'',
controller: TagResultCtrl
});
//$routeProvider.otherwise({redirectTo: ''/home'', controller: HomeCtrl});
});
en html
<a href="tags/{{tag.id}}"><img data-ng-src="{{tag.imageUrl}}"></a>
@Solución simple
Yo uso un servidor HTTP de Python simple. Cuando estoy en el directorio de la aplicación Angular en cuestión (usando un MBP con Mavericks 10.9 y Python 2.x) simplemente ejecuto
python -m SimpleHTTPServer 8080
Y eso configura el servidor simple en el puerto 8080 que le permite visitar localhost:8080 en su navegador para ver la aplicación en desarrollo.
Espero que haya ayudado!
A continuación se muestra cómo se puede configurar $ locationProvider utilizando requireBase=false flag para evitar configurar la base href <head><base href="/"></head> :
var app = angular.module("hwapp", [''ngRoute'']);
app.config(function($locationProvider){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
})
});
AngularJS proporciona una manera simple y concisa de asociar rutas con controladores y plantillas usando un objeto $routeProvider . Al actualizar recientemente una aplicación a la última versión (1.2 RC1 en el momento actual), me di cuenta de que $routeProvider ya no está disponible en el script estándar angular.js.
Después de leer el registro de cambios, me di cuenta de que el enrutamiento ahora es un módulo separado (creo que es un gran movimiento), además de animación y algunos otros. Como resultado, las definiciones de módulos estándar y el código de configuración como el siguiente ya no funcionarán si se está moviendo a la versión 1.2 (o futura):
var app = angular.module(''customersApp'', []);
app.config(function ($routeProvider) {
$routeProvider.when(''/'', {
controller: ''customersController'',
templateUrl: ''/app/views/customers.html''
});
});
Como lo arreglas?
Simplemente agregue angular-route.js además de angular.js a su página (tome una versión de angular-route.js aquí; tenga en cuenta que actualmente es una versión candidata de lanzamiento que se actualizará) y cambie la definición del módulo para que parezca el seguimiento:
var app = angular.module(''customersApp'', [''ngRoute'']);
Si está usando animaciones, necesitará angular-animation.js y también necesitará hacer referencia al módulo apropiado:
var app = angular.module(''customersApp'', [''ngRoute'', ''ngAnimate'']);
Su Código puede ser el siguiente:
var app = angular.module(''app'', [''ngRoute'']);
app.config(function($routeProvider) {
$routeProvider
.when(''/controllerone'', {
controller: ''friendDetails'',
templateUrl: ''controller3.html''
}, {
controller: ''friendsName'',
templateUrl: ''controller3.html''
}
)
.when(''/controllerTwo'', {
controller: ''simpleControoller'',
templateUrl: ''views.html''
})
.when(''/controllerThree'', {
controller: ''simpleControoller'',
templateUrl: ''view2.html''
})
.otherwise({
redirectTo: ''/''
});
});
El único problema que veo son los enlaces relativos y las plantillas que no se cargan correctamente debido a esto.
De la documentación relativa al modo HTML5.
Enlaces relativos
Asegúrese de verificar todos los enlaces relativos, imágenes, scripts, etc. Debe especificar la base de URL en la cabecera de su archivo html principal (
<base href="/my-base">) o debe usar URL absolutas (comenzando con/) en todas partes porque las direcciones URL relativas se resolverán en direcciones URL absolutas utilizando la dirección URL absoluta inicial del documento, que a menudo es diferente de la raíz de la aplicación.
En su caso, puede agregar una barra inclinada / en atributos href ( $location.path hace automáticamente ) y también a templateUrl al configurar las rutas. Esto evita rutas como example.com/tags/another y asegura que las plantillas se carguen correctamente.
Aquí hay un ejemplo que funciona:
<div>
<a href="/">Home</a> |
<a href="/another">another</a> |
<a href="/tags/1">tags/1</a>
</div>
<div ng-view></div>
Y
app.config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when(''/'', {
templateUrl: ''/partials/template1.html'',
controller: ''ctrl1''
})
.when(''/tags/:tagId'', {
templateUrl: ''/partials/template2.html'',
controller: ''ctrl2''
})
.when(''/another'', {
templateUrl: ''/partials/template1.html'',
controller: ''ctrl1''
})
.otherwise({ redirectTo: ''/'' });
});
Si usa Chrome, deberá ejecutar esto desde un servidor.
tu podrías intentar:
<a href="#/controllerone">Controller One</a>||
<a href="#/controllerTwo">Controller Two</a>||
<a href="#/controllerThree">Controller Three</a>
<div>
<div ng-view=""></div>
</div>
Prueba esto
Si está implementando su aplicación en el contexto raíz (por ejemplo, https://myapp.com/ ), configure la URL base en /:
<head>
<base href="/">
...
</head>