HTML5モードを使用するには、サーバー側でURLを書き換える必要があります。基本的に、アプリケーションのエントリポイント(index.htmlなど)へのすべてのリンクを書き換える必要があります。<base>
この場合、タグを要求することも重要です。これにより、AngularJSは、アプリケーションのベースとなるURLの部分と、アプリケーションが処理する必要のあるパスを区別できるようになります。詳細については、AngularJS Developer Guide-Using $ location HTML5 mode Server Sideを参照してください。
更新
方法:html5Mode 1で動作するようにサーバーを構成する
html5Modeを有効にすると、その#
文字はURLで使用されなくなります。この#
記号は、サーバー側の設定を必要としないので便利です。を使用しない#
場合、URLはより見栄えがよくなりますが、サーバー側の書き換えも必要になります。ここではいくつかの例を示します。
Apacheリライト
<VirtualHost *:80>
ServerName my-app
DocumentRoot /path/to/app
<Directory /path/to/app>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</Directory>
</VirtualHost>
Nginxの書き換え
server {
server_name my-app;
index index.html;
root /path/to/app;
location / {
try_files $uri $uri/ /index.html;
}
}
Azure IISの書き換え
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
高速書き換え
var express = require('express');
var app = express();
app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));
app.all('/*', function(req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile('index.html', { root: __dirname });
});
app.listen(3006); //the port you want to use
こちらもご覧ください