在AngularJS 1.2中启用HTML 5模式

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);"这一行,该网站就会运行.但是,由于我正在迁移现有站点,因此我的URL中不能有哈希标记.

我误解了html5mode(true)是如何工作的吗？或者,我做错了什么？

谢谢

Answer 1

如果您正在使用html5mode,则需要在服务器端进行更改,以便index.html在任何URL请求上返回您的入口点(主应用程序页面).然后angular app将解析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:在应用程序模块中注入位置提供程序,并将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]

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

希望这可以帮助.