BEGIN

Question

我正在开发一款需要使用HTML 5模式的应用。由于我正在迁移现有网站以使用AngularJS 1.2，因此我的网址中不能包含“＃”标记。目前，我有以下内容：

angular.module('myApp', ['ngRoute']).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);

  $routeProvider
    .when("/home", {templateUrl:'home.html', controller:'homeController'})
    // other routes are defined here..
    .otherwise({redirectTo: '/home'});
  }]);

不幸的是，当我访问“http://myServer/home”时，启用html 5模式时我的应用无效。我得到了404.但是，当我访问http://myServer/时，它有效。当我启用html5模式时，它就像深度链接不起作用。如果我注释掉“$ locationProvider.html5mode（true）;”这一行，该网站就会运行。但是，由于我正在迁移现有网站，因此我的网址中不能包含哈希标记。

我是否误解了html5mode（true）的工作原理？或者，我做错了什么？

谢谢

Answer 1

如果您正在使用html5mode，则需要在服务器端进行更改，以便在任何网址请求中返回您的入口点index.html（主应用页面）。然后，角度应用将解析URL并加载所需的页面。

Answer 2

以下是大多数常见Web服务器的解决方案列表：Apache，nginx，IIS和express。 https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#wiki-how-to-configure-your-server-to-work-with-html5mode

该链接位于ui-router的wiki中，但它与此无关，此答案对ngRoute有效。

Answer 3

我在设置应用时遇到了类似的问题。我试图实现漂亮的URL，因为URL中的＃非常令人不安。这就是我解决问题的方法。

步骤1：在您的app模块中注入位置提供程序，并将html5mode设置为true

$locationProvider.html5Mode(true);

第2步：在index.html中插入基本标记有人说这不是必需的，但是当我尝试删除标签并实现相同时，我收到了一个错误。它说locationProvider需要一个基本标记。

<base href="/specify-app-directory-here/">

如果它在根目录中，则以下行就足够了

<base href="/">

步骤3：您需要在服务器上设置URL重写。我，我自己是一个初学者，但发现它很简单。如果您正在使用Apache，那么就是这样做的。

创建.htaccess并将其放在与index.html相同的目录中，或者甚至可以使用现有的.htaccess。将以下行添加到.htaccess

Options +FollowSymLinks 

RewriteEngine On
RewriteBase /base-as-specified-in-base-tag/

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^([a-zA-Z]+)$ #/$1 [NC,L]

最后一行是非常重要的。基本上，它会告诉您的服务器是否找到表格的任何链接＆＃34; / home＆＃34;它会将其重定向到＆＃34; /＃/ home＆＃34;然后angularJS可以适当地处理。这样做，它实际上并没有改变地址栏中显示的网址，你有一个漂亮的网址。如果您尝试重新加载页面，则不会出现404错误。

希望这有帮助。

Answer 4

首先启用$ locationProvider.html5Mode（true）;

启用html 5模式后，您可以插入这段代码在.htaccess

中

BEGIN

选项+ FollowSymLinks

上的RewriteEngine

     RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) your file root /index.php [NC,L]

在AngularJS 1.2中启用HTML 5模式

4 个答案:

BEGIN

END