Question

我在我的角应用程序中使用Angular UI路由器，我已启用HTML5模式，通过在配置中使用$ locationProvider来删除#form我的URL。

angular.module('myApp', ['ui.router'])
 .config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
       .state('home', {
            url: '/',
            templateUrl: 'views/home.html',
            controller:'HomeController'
        })
        .state('about', {
            url: '/about',
            templateUrl: 'views/about.html',
            controller:''
       })
       .state('skills', {
            url: '/skills',
            templateUrl: 'views/skills.html',
            controller: ''
       })
       .state('projects', {
            url: '/projects',
            templateUrl: 'views/projects.html',
            controller: 'ProjectsController'
       })
       .state('contact', {
            url: '/contact',
            templateUrl: 'views/contact.html',
            controller: ''
       });
    $locationProvider.html5Mode(true);
});

我也设置了

<base href="/">

标记在index.html文件中。路由工作正常，我可以导航到页面，＃被删除但是当我使用浏览器上的重新加载按钮刷新页面时，我得到一个404错误页面。

我正在使用Webstorm IDE进行开发。有人可以为我提供解决方案吗？

Answer 1

启用HTML5模式你的url hash＃成为hashbang＃！然后它在浏览器上返回没有hashbang的url。所以即使浏览器上的网址类似于

http://www.example.com/about

实际的hashbang url是这样的。

http://www.example.com/#!/about

尝试根据此更改您的htaccess文件。它应该位于index.html所在的公共目录中，如果你使用的是apache。

RewriteEngine On  
  # If an existing asset or directory is requested go to it as it is
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]

  # If the requested resource doesn't exist, use index.html
  RewriteRule ^ /index.html

AngularJS：使用启用了Html5模式的Angular Ui Router时，页面重新加载失败

1 个答案: