AngularJS: impossibile ottenere gli URL in modalità html5 con lo stato di percorso $ u

Question

Sto utilizzando ui-router 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 attivato 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.

Qui è la mia struttura di cartelle:

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

miei vhosts DocumentRoot punti alla mia app/

Ecco il mio 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' 
      }, 
      'search@': {} 
     }, 
     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', 
      }, 
      'search@': {} 
     }, 
     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 riscrittura che si trova in .htaccess in/app. Penso che questo potrebbe essere sbagliato.

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

Answer 1

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

<VirtualHost *:80> 
    ServerName my-app 

    DocumentRoot /path/to/app 

    <Directory /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] 
    </Directory> 
</VirtualHost> 

Inoltre si prega di assicurarsi che non sei una vittima di <base href> bug. Vedi lo ui-router FAQ per maggiori informazioni.

Answer 2

Se si lavora in un hosting condiviso, che non permette di modificare la configurazione di Apache è possibile impostare questo nel file .htaccess per rendere $locationProvider.html5Mode(true) lavoro (come @Shanimal sottolineato in 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 <base href="/path/to/app/"> nell'HTML <head>.