¿Cómo configurar routeProvider y LocationProvider en angularJS?

Quiero activar html5Mode en angularJS, pero no sé por qué no está funcionando. ¿Hay algo mal 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

   

El único problema que veo son vínculos relativos y plantillas que no se cargan correctamente debido a esto.

de los documentos sobre el modo HTML5

Enlaces relativos

Asegúrese de verificar todos los enlaces relativos, imágenes, secuencias de comandos, etc. Debe especificar la base de URL en el encabezado de su archivo html principal ( ) o debe usar direcciones URL absolutas (comenzando por / ) en todas partes porque las URL relativas se resolverán en direcciones URL absolutas utilizando la 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 en templateUrl al configurar las rutas. Esto evita rutas como example.com/tagshttps://stackoverflow.com/another y asegura que las plantillas se carguen correctamente.

Aquí hay un ejemplo que funciona:

  

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('https://stackoverflow.com/another', { templateUrl: '/partials/template1.html', controller: 'ctrl1' }) .otherwise({ redirectTo: '/' }); }); 

Si usas Chrome, deberás ejecutar esto desde un servidor.

AngularJS proporciona una forma simple y concisa de asociar rutas con controladores y plantillas utilizando un objeto $routeProvider . Mientras actualizaba 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 la secuencia de comandos angular.js estándar.

Después de leer el registro de cambios, me di cuenta de que el enrutamiento ahora es un módulo separado (una gran jugada, creo), así como la animación y algunos otros. Como resultado, las definiciones de módulo estándar y el código de configuración como el siguiente no funcionarán si se mueve 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 se vea como el seguimiento:

 var app = angular.module('customersApp', ['ngRoute']); 

Si está utilizando animaciones, necesitará angular-animation.js y también necesita hacer referencia al módulo apropiado:

  var app = angular.module('customersApp', ['ngRoute', 'ngAnimate']); 

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

Prueba esto

Si está implementando su aplicación en el contexto raíz (por ejemplo, https://myapp.com/ ), establezca la URL base en /:

   ...  

Documentación Angular

A continuación se muestra cómo se puede configurar $ locationProvider usando requireBase=false flag para evitar establecer href base :

 var app = angular.module("hwapp", ['ngRoute']); app.config(function($locationProvider){ $locationProvider.html5Mode({ enabled: true, requireBase: false }) }); 

tu podrías intentar:

 Controller One|| Controller Two|| Controller Three 

@Solución simple

Yo uso un servidor HTTP 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 permitiéndole visitar localhost:8080 en su navegador para ver la aplicación en desarrollo.

Espero que haya ayudado!