Question

我正在尝试使用$ locationProvider.html5Mode（true）解决问题;刷新页面时。

它修复了网址中的localhost/#/home哈希，但是当我刷新页面时，它会显示404。

我正在使用nginx local。

正在运行angularjs v1.0.7。最新版本显然不起作用。

标题

<base href="/">

角

var app = angular.module('myApp', []);

app.config(function($routeProvider, $locationProvider) {
      $routeProvider
      .when('/', {
        templateUrl: 'home.html',
        title: 'home'
      })
      .when('/about', {
        templateUrl: 'about.html',
        title: 'about'
      })
      .when('/contact', {
        templateUrl: 'contact.html',
        title: 'contact'
      })
      .otherwise({
        redirectTo: '/'
      });
      $locationProvider.html5Mode(true);
    });

Answer 1

当您使用Html5模式时，您的链接从http://example.com/#about变为http://example.com/about，但有一个原因是您收到404 - 您使用的服务器端解决方案是什么？由于您的后端返回404而不是angularJS路由器本身，因为为了使其在html5模式下可访问，您需要提供相同的html页面，其中js包含在服务器端的新路由中，就像您提供给您的主页加载您的角度应用程序。例如，在Laravel中，您可以想象您的站点根目录是这样的，并且您的角度应用程序代码位于home.blade.php

    Route::get('/',function(){ return view('home');});

因此您需要创建指向同一视图的相同路径，以便使用标记加载角度js应用程序，然后您的角度路由器将根据路由视图正确显示您所需的模板。

   Route::get('/about',function(){ return view('home');});
   Route::get('/contact',function(){ return view('home');});

如果您使用不同的服务器端框架或解决方案，希望您已经掌握了在直接访问时解决404问题需要做什么的主要想法 - 只需在服务器端设置指向主页的相同路由加载角度js应用程序。如果您不使用nginx提供静态html文件的任何服务器端框架，则需要设置/contacts /about个位置以指向包含角度应用程序的文档根index.html。

for expample

location / {
    root   /srv/www/example.com/public_html;
    index  index.html index.htm;
}
location /about/ {
    root   /srv/www/example.com/public_html;
    index  index.html index.htm;
}
location /contacts/ {
    root   /srv/www/example.com/public_html;
    index  index.html index.htm;
}

AngularJS：页面刷新404，使用$ locationProvider.html5Mode清理网址

1 个答案: