14

我正在开发一个需要使用 HTML 5 模式的应用程序。由于我正在迁移现有站点以使用 AngularJS 1.2，因此我的 URL 中不能有“#”标签。目前，我有以下内容：

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);”这一行，该站点将正常运行。但是，由于我正在迁移现有站点，我的 URL 中不能再包含井号标签。

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

谢谢

4

4 回答 4

10

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

于 2013-10-06T17:23:29.467 回答
5

以下是最常见 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 有效。

于 2014-02-25T21:56:30.077 回答
5

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

第 1 步：在您的应用模块中注入位置提供程序并将 html5mode 设置为 true

$locationProvider.html5Mode(true);

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

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

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

<base href="/">

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

创建一个 .htaccess 并将其放在与 index.html 相同的目录中，或者您甚至可以使用现有的。将以下行添加到 .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]

最后一行非常重要。基本上，它会告诉您的服务器是否找到任何形式为“/home”的链接，它将重定向到“/#/home”，然后 angularJS 可以适当地处理。这样做，它实际上并没有改变地址栏中显示的 url，而且你有一个漂亮的 url。如果您也尝试重新加载页面，您将不会收到 404 错误。

希望这可以帮助。

于 2015-04-22T12:59:04.617 回答
1

首先启用 $locationProvider.html5Mode(true);

启用 html 5 模式 true 后，您可以在 .htaccess 中插入此代码

开始

选项 +FollowSymLinks

重写引擎开启

     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]

结尾

于 2015-12-25T13:42:04.343 回答