AngularJS: ui-route $ state ile html5 modu URL'leri alamıyorum

Question

Durum yönetimi için ui-router kullanıyorum ama .htaccess yeniden yazma kurallarıyla ilgili sorun yaşıyorum. Tüm eyaletlerim/#/hesap stili URL'lerini kullanırken çalıştı. Şimdi html5 modunu etkinleştirdim, ancak uygulamam daha önce olduğu gibi oluşturmuyor. Benim index.html ve tüm js ve css dosyalarımı yükler gibi görünüyor ama aslında herhangi bir eyaleti başlatamıyor. İşte

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

benim yeniden yazma kodu: İşte benim devletlerle benim app.js olduğunu

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

Benim sankonlar benim app/

puan documentRoot: Burada

benim klasör yapısı Bu/app içinde .htaccess oturur. Sanırım bu yanlış olabilir.

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

Answer 1

Bu yapılandırma html5mode ve ui-yönlendirici kullanarak Apache kullanıcıların çoğu için çalıştı.

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

Ayrıca <base href> hata kurbanı olmadığından emin olun. Daha fazla bilgi için ui-router FAQ'a bakın.

Answer 2

ise (@Shanimal @nfiniteloop yanıtında belirttiği gibi) $locationProvider.html5Mode(true) iş yapmak için size .htaccess dosyasında bu ayarlayabilirsiniz Apache yapılandırmasını düzenlemek için izin vermez paylaşılan barındırma çalışan:

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] 

Ve HTML <head>'da <base href="/path/to/app/">'u eklemeyi unutmayın.