Question

我的英语不是很好，但我试着解释清楚。我正在尝试优化基于纯Angular到SEO的网站。这是链接http://www.sanjosejumpstart.com/tests/project/ 当你第一次来到网站并开始点击链接时，路由工作正常，但刷新页面时，我收到错误

未找到

在此服务器上找不到请求的URL / tests / project / automotive。

此外，尝试使用ErrorDocument处理请求时遇到404 Not Found错误。

我无法理解为什么会发生这种情况。（可能是因为哈希消失了？）

有些人知道如何解决这个问题吗？

索引html上的BASE标记看起来

 <base href="http://www.sanjosejumpstart.com/tests/project/">

和路线配置看起来像：

.config(['$httpProvider', '$stateProvider', '$urlRouterProvider',   '$locationProvider', 
 function($httpProvider, $stateProvider, $urlRouterProvider, $locationProvider) {

$httpProvider.defaults.transformRequest.push(LockJS.postConvert);
                                $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
$httpProvider.interceptors.push('Interseptor');

 /* activating html5 mode */
 $locationProvider.hashPrefix('!');
 $locationProvider.html5Mode(true);

 $urlRouterProvider.otherwise('/home');
 $stateProvider
   .state('home', {
     url: '/home',
      views: {
       '': { 
         templateUrl: 'templates/main-page-content.html' 
       },
       'article@home': {
          templateUrl: 'templates/main-page/app-main-article.html',
          controller: 'MainArticleCtrl'
        },
        'services@home': {
           templateUrl: 'templates/main-page/app-main-services-list.html',
           controller: 'MainServicesCtrl'
        },
        'services-info@home': {
            templateUrl: 'templates/main-page/app-services-info.html',
            controller: 'MainServicesInfoCtrl'
        },
        'aside@home': {
           templateUrl: 'templates/main-page/app-aside-content.html'
        },
        'middle-slider@home': {
           templateUrl: 'templates/main-page/app-middle-slider.html'
        },
        'map@home': {
           templateUrl: 'templates/main-page/app-map.html'
        }
      }  
    })
    .state('automotive', {
       url: '/automotive',
       views: {
         '': {
           template: '<h1>automotive view</h1>'
         }
       }
    })

  }])

然后是更多的州。谢谢你的任何建议。

Answer 1

您需要设置服务器，以便为所有不是的请求返回index.html页面：

API调用（让这些都以/api开头，以便更轻松）
静态文件请求（将这些请求全部以/pub或类似的方式开始）

然后加载index.html，Angular将引导您的应用程序，这将涉及检查路线并加载正确的页面。

我为什么要使用`/api`或`/pub`？

确切的前缀并不是非常重要（尽管它应该有意义）。有用的是，通过为所有API端点使用公共前缀（例如，使用$http或$resource服务调用的路由），您将不会与应用中的任何客户端路由重叠。< / p>

例如，如果您没有遵循此规则，则说您配置了以下服务器端路由：

/products - 获取产品列表为JSON

然后你设置了一个客户端路由：/products，当你输入www.myserver.com/products时，你的意思是有点混乱。

从技术上讲，如果服务器配置正确，它可以告诉/products要求JSON的AJAX请求和/products的“正常”HTTP GET请求之间的区别。但它仍然不理想，因为你无法从URL中分辨出你的意思。你必须看看它是如何被调用的。

替代方案：放弃HTML5模式

如果你不能像我上面说的那样配置服务器，你需要禁用HTML5Mode。这样，所有相对URL都将在#之后，因此Web服务器获得的唯一文件请求是/test/project的默认页面。

Answer 2

我找到了解决方案，您现在可以看到所有重定向：

http://www.sanjosejumpstart.com/tests/project/home

这是解决方案：

Apache服务器

1）索引必须是php，而不是html - index.php

2）在文件的头部添加BASE标记，如= <base href="/tests/project/">

3）在app config中 - $locationProvider.html5Mode(true)

无需添加$ locationProvider.hashPrefix（＆＃39;！＆＃39;）;

最后.htaccess

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /Locksmith-Project/project/
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)       index.php/#/$1 
</IfModule>

希望对某人有所帮助

带有locationProvider AngularJS的BASE标记

2 个答案:

我为什么要使用`/api`或`/pub`？

替代方案：放弃HTML5模式

带有locationProvider AngularJS的BASE标记

2 个答案:

我为什么要使用/api或/pub？

替代方案：放弃HTML5模式

我为什么要使用`/api`或`/pub`？