angularJS友好URL实现 good
nginx部署 angularjs时的rewrite问题
使用h5+angularjs完成了一个项目 此项目在正式环境上使用nginx做webserver
此项目的入口在微信/微博分享中 由于分享时的项目访问地址中含有’#‘（类似：test.com/#/goods） ’#‘的位置会被微博微信所修改 导致分享后的地址无法正常访问
所以分享时要去掉地址中的’#‘ 也就是分享的链接是：test.com/goods
但是项目入口时如果没有#也会异常 此时是否可以通过nginx rewrite test.com/goods 到 test.com/#/goods 这里如何写rewrite
在此请教nginx高手
可以考虑使用 html5 里的 pushState 来去掉 # 号。 在 config 方法里注入 $locationProvider， 然后设置$locationProvider.html5Mode(true)。参见http://docs.angularjs.cn/api/ng/provider/$locationProvider nginx 的话应该可以这样
rewrite ^/(.*)$ http://test.com/#/$1 redirect;
用 302 跳转来改变 url，没有亲测，可以试下看看
http://www.thinksaas.cn/ask/question/16418/
nginx如何将http://localhost/api/getuser rewrite为http://localhost/product/api/getuser
301/302重定向；
方法一：
rewrite /product/(.*) /$1;
rewrite /(.*) /product/$1;
方法二：
if ($uri ~ ^/product) {
rewrite /(.*) /product/$1;
}http://cnodejs.org/topic/52a6b55ba6957a080985e881
摘要
AngularJS框架定义了自己的前端路由控制器，通过不同URL实现单面(ng-app)对视图(ng-view)的部署刷新，并支持HTML5的历史记录功能。对于默认的情况，是不启动HTML5模式的，URL中会包括一个#号，用来区别是AngularJS管理的路径还是WebServer管理的路径。 比如：下面的带#号的URL，是AngularJS管理的路径。http://127.0.0.1/ http://127.0.0.1/#/ http://127.0.0.1/#/login http://127.0.0.1/#/case/34 这种体验其实是不太友好的，URL中含义“#”，看着特别不爽。AngularJS框架提供了一种HTML5模式的路由，可以直接去掉#号。通过设置$locationProvider.html5Mode(true)就行了。
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
//..省略代码
$locationProvider.html5Mode(true);
}]);
开启后，URL变化为： http://127.0.0.1/ http://127.0.0.1/login http://127.0.0.1/case/34 当然事情不会这么简单，当用这种方式设置了路径以后。如果用户从首页(http://127.0.0.1/)开始访问，然后跳转到登录页面http://127.0.0.1/login)一切正常。但如果用户直接打开 图书页(http://127.0.0.1/login) ，就会出现404错误。问题很奇怪，在没有找到解决办法前还是忍气吞声的关闭了HTML5模式，讨厌的#又出现在URL中。 经过查阅资料，之所以404其实WebServer抢先接管了AngularJS的路由，我们的SPA应用基于MVC模型，在地址的目录确实没有这个路径，这次重构的KITE，实际上连VIEW视图都集成在了JS中，所以出现404那是理所当然了。那有解决办法没有？有，我们让WebServer把属于AngularJS管理的路由URL，都发转到ng-app就可以解决404的问题了，同时，没有#号，还支持HTML5的历史记录查询。这里因为我们的APP都是前后端分离，前端是纯静态的，动态网站没有实践，这里就只分享静态网站去掉#的方法。 静态网站，我们需要修改的地方包括3个文件 index.html : ng-app的定义文件 app.js : 对应ng-app的控制文件 以及WebServer地址转发的文件，因为启server的工具很多，正好我也试过几种方法，后面详细讲。 1.编辑 index.html，增加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
.state('login', {
url: '/login',
templateUrl: 'src/login/login.html',
controller: 'loginCtrl'
});
$locationProvider.html5Mode(true);
}]);
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 use
综上，Express，Nginx，tomcat方法我都试过，本地开发是用的Express启的server，公司的测试环境和Nginx在一个服务器上，所以在测试环境上还行的通，但是正式环境应用服务器和Nginx服务器是分开的，显然root没法设置了，只好琢磨tomcat的转发了，好在成功了。
http://my.oschina.net/u/1456860/blog/671866
angularJS友好URL实现 good的更多相关文章
- angularjs中URL中的#号问题,$locationProvider.html5Mode(true)刷新404
解决办法原文地址:https://blog.csdn.net/weixin_36185028/article/details/72179568 angularjs支持两种url模式,hash模式和ht ...
- AngularJs中url参数的获取
前言: angular获取通过链接形式访问的页面,要获取url中的参数,就不能通过路由的方式传递获取了,使用原生js或者jquery,又显得比较麻烦,好在angular已经封装了获取url参数的方法, ...
- URL重写 urlrouting
在global文件中添加以下的代码 <%@ Import Namespace="System.Web.Routing" %> <script RunAt=&quo ...
- Angularjs路由需要了解的那点事
Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...
- angularjs笔记(三)
AngularJS API 7.其他一些常用指令,布尔类型的指令也可以用表达式 (1).数组索引$index <!DOCTYPE html> <html> <head&g ...
- ThinkPHP的四种URL模式 URL_MODEL
ThinkPHP支持四种URL模式,可以通过设置URL_MODEL参数来定义,包括普通模式.PATHINFO.REWRITE和兼容模式. 普通模式 设置URL_MODEL 为0 采用传统的URL参数模 ...
- AngularJS进阶学习
参考:http://***/class/54f3ba65e564e50cfccbad4b 1. AJAX:Asynchronous JavaScript and XML(异步的 JavaScript ...
- [AngularJS] Introduction to ui-router
Introduce to basic $stateProvider.state() with $stateParams services. Understand how nested router w ...
- ThinkPHP URL模式和URL重写
现在用的版本是TP3.1.3,这两天总是遇到NotFound的错误,解析路径错误,所以认真研究了一下手册,发现问题出在URL模式上面. URL模式 一般是使用U方法来生成路径,U方法的定义规则如下(方 ...
随机推荐
- Android应用开发基础篇（1）-----Button
Android应用开发基础篇(1)-----Button 一.概述 Button,顾名思义就是按钮的意思,它主要的功能是响应用户按下按钮时的动作. 二.应用 新建一个工程, ...
- [C# 基础知识系列]专题六:泛型基础篇——为什么引入泛型
引言: 前面专题主要介绍了C#1中的2个核心特性——委托和事件,然而在C# 2.0中又引入一个很重要的特性,它就是泛型,大家在平常的操作中肯定会经常碰到并使用它,如果你对于它的一些相关特性还不是很了解 ...
- linux线程之pthread_join和pthread_detach
在任何一个时间点上,线程是可结合的(joinable)或者是分离的(detached).一个可结合的线程能够被其他线程收回其资源和杀死.在 被其他线程回收之前,它的存储器资源(例如栈)是不释放的.相反 ...
- [转]Ubuntu 软件安装、查找、卸载--apt-get、apt-cache命令安全
# apt-get update——在修改/etc/apt/sources.list或者/etc/apt/preferences之後运行该命令.此外您需要定期运行这一命令以确保您的软件包列表是最新的. ...
- input输入框只能输入数字的功能
Html代码 收藏代码 <input type="text" style="ime-mode:disabled;" onpaste="retur ...
- C++面向对象类的书写相关细节梳理
类的问题 继承类的原因:为了添加或者替换功能. 1. 继承时重写类的方法 v 替换功能 ① 将所有方法都设置为virtual(虚函数),以防万一. Virtual:经验表明最好将所有方法都设置为vir ...
- BZOJ 2733: [HNOI2012]永无乡(treap + 启发式合并 + 并查集)
不难...treap + 启发式合并 + 并查集 搞搞就行了 --------------------------------------------------------------------- ...
- ssma for oracle
SQL Server Migration Assistant (SSMA) for Oracle lets you quickly convert Oracle database schemas to ...
- java 类排序
参考文档:Java排序: Comparator vs Comparable 入门 java类经常面临排序问题,据我所知:java提供comparable和comparator两种比较方式: 1. co ...
- Loadrunner11点击录制脚本无响应，IE页面弹不出——解决方案汇总
以前用Loadrunner的时候都没有遇到过这个问题,后来将服务器重装系统(win7)后,重新安装Loadrunner11,浏览器版本刚开始为IE11,后来降为IE8,IE访问部署在虚拟机里的平台能正 ...