javascript 在 AngularJS 1.2 中启用 HTML 5 模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19211576/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enabling HTML 5 Mode in AngularJS 1.2
提问by user70192
I'm working on an app that needs to use HTML 5 mode. Due to the fact that I am migrating an existing site to use AngularJS 1.2, I cannot have '#' tags in my URL. Currently, I have the following:
我正在开发一个需要使用 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'});
}]);
Unfortunately, when I visit 'http://myServer/home', my app does not work when html 5 mode is enabled. I get a 404. However, when I visit http://myServer/it works. Its like deep-linking doesn't work when I have html5 mode enabled. If I comment out the line that says "$locationProvider.html5mode(true);", the site functions. However, once again, I cannot have hash tags in my URL due to the fact I'm migrating an existing site.
不幸的是，当我访问“ http://myServer/home”时，我的应用程序在启用 html 5 模式时不起作用。我得到一个 404。但是，当我访问http://myServer/它时。当我启用 html5 模式时，它就像深层链接不起作用一样。如果我注释掉“$locationProvider.html5mode(true);”那行，站点就会运行。但是，再一次，由于我正在迁移现有站点，因此我的 URL 中不能有哈希标记。
Am I misunderstanding how html5mode(true) works? Or, am I doing something wrong?
我误解了 html5mode(true) 的工作原理吗？或者，我做错了什么？
Thank you
谢谢
采纳答案by Yaroslav Pogrebnyak
If you're using html5modeyou need make changes on the server side to return your entry point index.html(main app page) on any URL request. Then angular app will parse URL and load needed page.
如果您正在使用，html5mode您需要在服务器端进行更改以index.html在任何 URL 请求上返回您的入口点（主应用程序页面）。然后 angular 应用程序将解析 URL 并加载所需的页面。
回答by oori
Here's a list of solutions for most common web servers: Apache, nginx, IIS and express. https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#wiki-how-to-configure-your-server-to-work-with-html5mode
以下是最常见 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
The link is in ui-router's wiki, but it has nothing to do with it, this answer is valid with ngRoute.
该链接在 ui-router 的 wiki 中，但与它无关，此答案对 ngRoute 有效。
回答by neeraj
I had a similar problem while setting up my app. I was trying to implement pretty URLs as the # in the URL was very disturbing. This is how I solved the problem.
我在设置我的应用程序时遇到了类似的问题。我试图实现漂亮的 URL，因为 URL 中的 # 非常令人不安。这就是我解决问题的方法。
Step 1: Inject the location provider in your app module and set html5mode to true
第 1 步：在您的应用模块中注入位置提供程序并将 html5mode 设置为 true
$locationProvider.html5Mode(true);
Step 2: Insert the base tag in your index.html Some people say this is not required but I got an error when I tried removing the tag and implementing the same. It says locationProvider requires a base tag.
第 2 步：在 index.html 中插入基本标签 有人说这不是必需的，但是当我尝试删除标签并实现相同的内容时出现错误。它说 locationProvider 需要一个基本标签。
<base href="/specify-app-directory-here/">
If it is in the root, the following line will suffice
如果它在根目录中，以下行就足够了
<base href="/">
Step 3: You will need to setup URL rewritting on your server. I, myself am a beginner but found it quite simple. If you are using an Apache just this is how you do it.
第 3 步：您需要在服务器上设置 URL 重写。我，我自己是一个初学者，但发现它很简单。如果您使用的是 Apache，这就是您的操作方式。
Create an .htaccess and place it in the same directory as your index.html, or you can even use an existing one. Add the following lines to the .htaccess
创建一个 .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]+)$ #/ [NC,L]
The last line is what is very important. Basically it tells your server if it finds any links of the form "/home" it will redirect it to "/#/home" which angularJS can then handle appropriately. In doing so, it does not actually change the url displayed in the address bar and you have a pretty url. If you try reloading the page also, you will not get a 404 error.
最后一行是非常重要的。基本上它会告诉您的服务器，如果它找到任何形式为“/home”的链接，它会将其重定向到“/#/home”，然后 angularJS 可以适当地处理。这样做，它实际上并没有更改地址栏中显示的 url，并且您有一个漂亮的 url。如果您也尝试重新加载页面，则不会出现 404 错误。
Hope this helps.
希望这可以帮助。
回答by bramhadev mishra
first enable $locationProvider.html5Mode(true);
首先启用 $locationProvider.html5Mode(true);
after enabling html 5 mode true you can insert this code in .htaccess
启用 html 5 mode true 后，您可以在 .htaccess 中插入此代码
BEGIN
开始
Options +FollowSymLinks
选项 +FollowSymLinks
RewriteEngine on
重写引擎开启
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]
