AngularJS: nie można uzyskać adresu URL trybu HTML z ui-route $ state

Question

Do zarządzania państwem używam ui-router, ale myślę, że mam problem z moimi regułami przepisywania .htaccess. Wszystkie moje stany działały, gdy używano adresów URL w stylu/#/account. Teraz włączam tryb HTML5, ale moja aplikacja nie renderuje się tak jak wcześniej. Wygląda na to, że ładuję mój plik index.html i wszystkie moje pliki js i css itp., Ale nie inicjuję żadnych stanów.

Oto moja struktura folderów:

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

Moi vhostów DocumentRoot punktów do mojego app/

Oto moje app.js z moich stanów:

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

Oto mój kod przepisać który znajduje się w .htaccess w/app. Myślę, że to może być źle.

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

Answer 1

Konfiguracja ta pracowała dla wielu naszych użytkowników Apache korzystających html5mode i 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> 

Ponadto upewnij się, że nie jesteś ofiarą <base href> błędu. Aby uzyskać więcej informacji, patrz ui-router FAQ.

Answer 2

Jeśli pracujesz w dzielonego hostingu, który nie pozwala edytować konfigurację Apache tę można ustawić w pliku .htaccess aby $locationProvider.html5Mode(true) pracy (jak @Shanimal wskazał w @nfiniteloop odpowiedź):

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] 

I nie zapomnij dodać <base href="/path/to/app/"> w HTML <head>.