AngularJS: imansible ottenere url in modalità html5 con lo stato $ percorso ui

Sto usando l’ interfaccia utente per la gestione dello stato, ma penso di avere problemi con le mie regole di riscrittura .htaccess. Tutti i miei stati hanno funzionato usando gli URL di stile / # / account. Ora ho triggersto la modalità html5 ma la mia app non viene visualizzata come era prima. Sembra caricare il mio index.html e tutti i miei file js e css, ecc., Ma in realtà non inizializza nessuno stato.

Ecco la mia struttura di cartelle:

root/ app/ components/ angular/ ... images/ scripts/ controllers/ directives/ ... app.js styles/ views/ .htaccess ... 

I miei vhosts DocumentRoot punta alla mia app/

Ecco la mia app.js con i miei stati:

 'use strict'; angular.module('appointeddPortalApp', ['ngResource', 'ui.state', 'ui.compat', 'fundoo.services', 'ui.date', 'ngCookies']) .config(function ($stateProvider, $routeProvider, $locationProvider, $httpProvider) { var access = routingConfig.accessLevels; delete $httpProvider.defaults.headers.common["X-Requested-With"]; $httpProvider.defaults.useXDomain = true; $locationProvider.html5Mode(true); $stateProvider .state('root', { abstract: true, url: '', views: { 'header': { templateUrl: 'views/partials/header.html' }, 'search': { templateUrl: 'views/partials/search.html', controller: 'SearchCtrl' }, 'main': { templateUrl: 'views/main.html', controller: 'MainCtrl' }, 'footer': { templateUrl: 'views/partials/footer.html' }, }, }) .state('root.home', { url: '', views: { 'content': { templateUrl: 'views/home/index.html', controller: 'MainCtrl', } }, access: access.anon }) .state('root.about', { url: '/about', parent: 'root', views: { 'content': { templateUrl: 'views/about.html', controller: 'StaticCtrl' }, '[email protected]': {} }, access: access.anon }) .state('root.search', { url: '/search/:city/:category', views: { 'content': { templateUrl: 'views/search.html', controller: 'SearchCtrl' } }, access: access.anon }) .state('root.salons_profile', { url: '/salons/{id}', views: { 'content': { templateUrl: 'views/salons.profile.html', controller: 'SalonCtrl', }, '[email protected]': {} }, access: access.anon }) .state('root.account', { url: '/account', abstract: true, views: { 'content': { templateUrl: 'views/user/account.html', controller: 'AccountCtrl' } }, }) .state('root.account.info', { url: '', views: { 'account_head': { templateUrl: 'views/user/account.head.html', }, 'account_body': { templateUrl: 'views/user/account.my_appointedd.html', }, }, menus: { 'account': { identifier: 'my_appointedd', class: 'active' } }, access: access.user }) .state('root.account.appointments', { url: '/appointments', views: { 'account_head': { templateUrl: 'views/user/account.head.html', }, 'account_body': { templateUrl: 'views/user/account.appointments.html', }, }, menus: { 'account': { identifier: 'appointments', class: 'active' } }, access: access.user }) .state('root.account.details', { abstract: true, views: { 'account_head': { templateUrl: 'views/user/account.head.html', }, 'account_body': { templateUrl: 'views/user/account.details.html', }, }, access: access.user }) .state('root.account.details.account', { url: '/details', views: { 'right': { templateUrl: 'views/user/account.details.account.html', }, }, menus: { 'account': { identifier: 'details', class: 'active' }, 'settings': { identifier: 'account', class: 'active' } }, access: access.user }) .state('root.account.details.profile', { url: '/profile', views: { 'right': { templateUrl: 'views/user/account.details.profile.html', }, }, menus: { 'account': { identifier: 'details', class: 'active' }, 'settings': { identifier: 'profile', class: 'active' } }, access: access.user }); }) .run( [ '$location', '$state', '$stateParams', '$rootScope', '$cookies', 'Auth', function( $location, $state, $stateParams, $rootScope, $cookies, Auth){ $rootScope.client_id = '51a741eb3152c3ae7e000103'; $rootScope.$state = $state; $rootScope.$stateParams = $stateParams; $rootScope.$cookies = $cookies; $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ if (!Auth.authorize(toState.access)) { if(Auth.isLoggedIn()) $state.transitionTo('root.account'); else $state.transitionTo('root.home'); } }); 

Ecco il mio codice di riscrittura che si trova in .htaccess in / app. Penso che questo potrebbe essere sbagliato.

  Options +FollowSymLinks RewriteEngine On RewriteBase / RewriteRule ^(components|images|scripts|styles|views)($|/) - [L] RewriteRule ^(.*)$ index.html [L]  

Questa configurazione ha funzionato per molti dei nostri utenti Apache usando html5mode e ui-router.

  ServerName my-app DocumentRoot /path/to/app  RewriteEngine on # Don't rewrite files or directories RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] # Rewrite everything else to index.html to allow html5 state links RewriteRule ^ index.html [L]   

Assicurati inoltre di non essere vittima del bug . Vedi le domande frequenti sull’i-router per maggiori informazioni.

Se lavori in un hosting condiviso che non consente di modificare la configurazione di Apache puoi impostarlo nel tuo file .htaccess per rendere $locationProvider.html5Mode(true) work (come @Shanimal puntato nella risposta @nfiniteloop):

 RewriteEngine on RewriteBase /path/to/app #change this! # Don't rewrite files or directories RewriteCond %{REQUEST_FILENAME} -f [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^ - [L] # Rewrite everything else to index.html to allow html5 state links RewriteRule ^ index.html [L] 

E non dimenticare di aggiungere nel HTML.