AngularJS：ui-route $の状態でhtml5モードのURLを取得できません。

Question

状態管理にui-routerを使用していますが、私の.htaccess書き換えルールに問題があると思います。 /＃/ accountスタイルのURLを使用すると、私のすべての州が機能しました。今、私はhtml5モードを有効にしましたが、私のアプリは以前と同じようにレンダリングされません。それは私のindex.htmlとすべての私のjsとcssファイルなどをロードするようですが、実際にはどの状態も初期化していません。ここで

は私のフォルダ構造である：ここに私のapp/

へ

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

私のバーチャルホストのDocumentRootのポイントは私の状態と私のapp.jsである：ここでは

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

は私の書き換えコードです/ appの.htaccessに座っている。私はこれが間違っていると思う。

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

Answer 1

この設定は、html5modeとui-routerを使用している多くのApacheユーザーにとって効果的です。

<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> 

また、<base href>バグの犠牲者でないことを確認してください。詳細は、ui-router FAQを参照してください。

Answer 2

あなたが$locationProvider.html5Mode(true)作品を作るためにあなたの.htaccessファイルでこれを設定することができますApacheの設定を編集することはできません共有ホスティングで作業した場合（@Shanimalが@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] 

そして、 HTML <head>に<base href="/path/to/app/">を追加することを忘れないでください。