angular去掉地址栏#号
来源：互联网 发布：网络汇聚怎么做 编辑：程序博客网 时间：2024/06/03 20:26
AngularJS框架提供了一种HTML5模式的路由，可以直接去掉#号。通过设置$locationProvider.html5Mode(true)就行了。
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页面中跳转部分的 ' #/ ' 去掉
例如:<a href="#/detail"></a> 修改为<a href="detal"></a>
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配置文件中加入：
<filter> <filter-name>UrlRewriteFilter</filter-name> <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class></filter><filter-mapping> <filter-name>UrlRewriteFilter</filter-name> <url-pattern>/*</url-pattern> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher></filter-mapping>3.在WEB-INF目录新建“urlrewrite.xml”转发规则文件。内容如下：
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE urlrewrite PUBLIC "-//tuckey.org//DTD UrlRewrite 3.0//EN" "http://tuckey.org/res/dtds/urlrewrite3.0.dtd"><urlrewrite> <rule> <from>^/[a-zA-Z]+(/([a-zA-Z]|[0-9])*)*$</from> <to>/index.html</to> </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
<VirtualHost *:80> ServerName localhost DocumentRoot /www <Directory /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] </Directory></VirtualHost>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配置文件中加入：
<filter> <filter-name>UrlRewriteFilter</filter-name> <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class></filter><filter-mapping> <filter-name>UrlRewriteFilter</filter-name> <url-pattern>/*</url-pattern> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher></filter-mapping>3.在WEB-INF目录新建“urlrewrite.xml”转发规则文件。内容如下：
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE urlrewrite PUBLIC "-//tuckey.org//DTD UrlRewrite 3.0//EN" "http://tuckey.org/res/dtds/urlrewrite3.0.dtd"><urlrewrite> <rule> <from>^/[a-zA-Z]+(/([a-zA-Z]|[0-9])*)*$</from> <to>/index.html</to> </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
<VirtualHost *:80> ServerName localhost DocumentRoot /www <Directory /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] </Directory></VirtualHost>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 use3.WebServer地址转发
tomcat
这里需要使用到UrlRewriteFilter这个插件，使用方法： 1.将urlrewritefilter-4.0.3.jar包放入应用目录“WEB-INF/lib”下。 2.在WEB-INF/web.xml配置文件中加入：
<filter> <filter-name>UrlRewriteFilter</filter-name> <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class></filter><filter-mapping> <filter-name>UrlRewriteFilter</filter-name> <url-pattern>/*</url-pattern> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher></filter-mapping>
3.在WEB-INF目录新建“urlrewrite.xml”转发规则文件。内容如下：
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE urlrewrite PUBLIC "-//tuckey.org//DTD UrlRewrite 3.0//EN" "http://tuckey.org/res/dtds/urlrewrite3.0.dtd"><urlrewrite> <rule> <from>^/[a-zA-Z]+(/([a-zA-Z]|[0-9])*)*$</from> <to>/index.html</to> </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
<VirtualHost *:80> ServerName localhost DocumentRoot /www <Directory /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] </Directory></VirtualHost>
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
阅读全文
0 0
- angular去掉地址栏#号
- 地址栏中去掉端口号 java
- 去掉地址栏中的jsessionid
- 如何去掉地址栏
- 去掉地址栏中的jsessionid
- JS 弹出网页 (不显示地址栏,工具栏) 网页去掉地址栏
- 去掉Tomcat网站地址栏的小猫图标
- CodeIgniter地址栏去掉index.php的方法
- 去掉Tomcat网站地址栏的小猫图标
- ‘Angular项目中去掉url中的#’问题解决
- angular项目SEO去掉路由#详解
- 用JS去掉IE窗口的标题栏,工具栏,地址栏
- 用JS去掉IE窗口的标题栏,工具栏,地址栏
- IE8去掉地址栏，同时关闭父页面，打开新页面
- 用JS去掉IE窗口的标题栏,工具栏,地址栏
- window.open 全屏，js去掉工具栏,菜单栏，地址栏，状态栏..
- 地址栏
- angular 去掉ng-repeat自动添加的$$hashkey
- 吴恩达第四周答案 Neural Networks: Representation
- C#命名空间详解
- github push代码出现“The requested URL returned error: 403”
- OpenSSl生成 SSL证书
- 常用的Git命令
- angular去掉地址栏#号
- Python 线性回归
- Codeforces 462D Appleman and Tree【思维+树型Dp】
- 牛顿法
- xtu 4
- 《Qt打印功能总结》
- 北京工业大学892软件工程基础综合（真题答案整套复习材料下载）
- ios-sizeToFit
- python3 爬虫学习日记【一】
