angularアドレスバー番号を削除
38094 ワード
AngularJSフレームワークは、HTML 5モードのルーティングを提供し、直接#番号を削除することができます.$locationProviderを設定します.html 5 Mode(true)でいいです.
1.baseタグの追加
2.appを編集する.js、$locationProviderを追加html5Mode(true);
3.htmlページのジャンプ部分の'#/'を削除する
たとえば、次のように変更します.
4.WebServerアドレス転送
1.baseタグの追加
<html lang="zh-CN" ng-app="app"> <head> <base href="/"> // base // head>2.appを編集する.js、$locationProviderを追加html5Mode(true);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { $stateProvider ...// $locationProvider.html5Mode(true); }]);3.htmlページのジャンプ部分の'#/'を削除する
たとえば、次のように変更します.
4.WebServerアドレス転送
WebServer地址转发配置根据个人项目选择配置，本人用到的是tomcat，其他没有测试。
传送门：http://www.cnblogs.com/softidea/archive/2016/07/07/5651421.html
tomcat
这里需要使用到UrlRewriteFilter这个插件，使用方法： 1.将urlrewritefilter-4.0.3.jar包放入应用目录“WEB-INF/lib”下。 2.在WEB-INF/web.xml配置文件中加入：
UrlRewriteFilter
org.tuckey.web.filters.urlrewrite.UrlRewriteFilter UrlRewriteFilter /* REQUEST FORWARD
3.WEB-INFディレクトリに「urlrewrite.xml」転送ルールファイルを新規作成します.内容は次のとおりです.
<urlrewrite>
<rule> <from>^/[a-zA-Z]+(/([a-zA-Z]|[0-9])*)*$from> <to>/index.htmlto> rule> urlrewrite>
ここでrule部分マッチングアドレスは正規表現を用いており、ここでは後述しない.これでルール設定が完了し、tomcatを再起動してページをリフレッシュし、#も404もなくなります.
Nginx
Nginxはtry_を使用していますfiles、nginxのプロファイルを変更し、try_を追加files構成.server {
server_name localhost;
root /www;
location / {
try_files $uri $uri/ /index.html; } }
ここでrootのディレクトリは、ng-appの定義ファイルhtmlに対応するディレクトリである
Apache
ServerName localhost
DocumentRoot /www
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]
IIS <system.webServer>
<rewrite>
<rules> <rule name="Main Rule" stopProcessing="true"> <match url=".*" >match> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" >add> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" >add> conditions> <action type="Rewrite" url="/" >action> rule> rules> rewrite> system.webServer>
Express var express = require('express');
var app = express();
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(8080); //the port you want to use
3.WebServer地址转发
tomcat
这里需要使用到UrlRewriteFilter这个插件，使用方法： 1.将urlrewritefilter-4.0.3.jar包放入应用目录“WEB-INF/lib”下。 2.在WEB-INF/web.xml配置文件中加入：
UrlRewriteFilter
org.tuckey.web.filters.urlrewrite.UrlRewriteFilter UrlRewriteFilter /* REQUEST FORWARD
3.WEB-INFディレクトリに「urlrewrite.xml」転送ルールファイルを新規作成します.内容は次のとおりです.
<urlrewrite>
<rule> <from>^/[a-zA-Z]+(/([a-zA-Z]|[0-9])*)*$from> <to>/index.htmlto> rule> urlrewrite>
ここでrule部分マッチングアドレスは正規表現を用いており、ここでは後述しない.これでルール設定が完了し、tomcatを再起動してページをリフレッシュし、#も404もなくなります.
Nginx
Nginxはtry_を使用していますfiles、nginxのプロファイルを変更し、try_を追加files構成.server {
server_name localhost;
root /www;
location / {
try_files $uri $uri/ /index.html; } }
ここでrootのディレクトリは、ng-appの定義ファイルhtmlに対応するディレクトリである
Apache
ServerName localhost
DocumentRoot /www
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]
IIS <system.webServer>
<rewrite>
<rules> <rule name="Main Rule" stopProcessing="true"> <match url=".*" >match> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" >add> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" >add> conditions> <action type="Rewrite" url="/" >action> rule> rules> rewrite> system.webServer>
Express var express = require('express');
var app = express(); 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(8080); //the port you want to use
3.WebServerアドレス転送
tomcat
ここではUrlRewriteFilterというプラグインを使用する必要があります.使用方法:1.urlrewritefilter-4.0.3.JArパッケージはアプリケーションディレクトリ「WEB-INF/lib」の下に入れます.2.WEB-INF/web.xmlプロファイルに追加:
UrlRewriteFilter
org.tuckey.web.filters.urlrewrite.UrlRewriteFilter UrlRewriteFilter /* REQUEST FORWARD
3.WEB-INFディレクトリに「urlrewrite.xml」転送ルールファイルを新規作成します.内容は次のとおりです.
<urlrewrite>
<rule> <from>^/[a-zA-Z]+(/([a-zA-Z]|[0-9])*)*$from> <to>/index.htmlto> rule> urlrewrite>
ここでrule部分マッチングアドレスは正規表現を用いており、ここでは後述しない.これでルール設定が完了し、tomcatを再起動してページをリフレッシュし、#も404もなくなります.
Nginx
Nginxはtry_を使用していますfiles、nginxのプロファイルを変更し、try_を追加files構成.server {
server_name localhost;
root /www;
location / {
try_files $uri $uri/ /index.html; } }
ここでrootのディレクトリは、ng-appの定義ファイルhtmlに対応するディレクトリである
Apache
ServerName localhost
DocumentRoot /www
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]
IIS <system.webServer>
<rewrite>
<rules> <rule name="Main Rule" stopProcessing="true"> <match url=".*" >match> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" >add> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" >add> conditions> <action type="Rewrite" url="/" >action> rule> rules> rewrite> system.webServer>
Express var express = require('express');
var app = express();
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(8080); //the port you want to use
WebServerアドレス転送構成は個人項目によって構成を選択し、本人が使用したのはtomcatであり、その他はテストされていない.
転送ゲート:http://www.cnblogs.com/softidea/archive/2016/07/07/5651421.html