angularJS友好URL实现 good

时间 2019-11-29

标签 angularjs 友好 url 实现 good 栏目 AngularJS 繁體版

原文原文链接

nginx部署 angularjs时的rewrite问题

使用h5+angularjs完成了一个项目此项目在正式环境上使用nginx作webserverjavascript

此项目的入口在微信/微博分享中因为分享时的项目访问地址中含有’#‘（相似：test.com/#/goods） ’#‘的位置会被微博微信所修改致使分享后的地址没法正常访问html

因此分享时要去掉地址中的’#‘ 也就是分享的连接是：test.com/goods前端

可是项目入口时若是没有#也会异常此时是否能够经过nginx rewrite test.com/goods 到 test.com/#/goods 这里如何写rewritehtml5

在此请教nginx高手java

能够考虑使用 html5 里的 pushState 来去掉 # 号。在 config 方法里注入 $locationProvider，而后设置$locationProvider.html5Mode(true)。参见http://docs.angularjs.cn/api/ng/provider/$locationProvider nginx 的话应该能够这样node

rewrite ^/(.*)$ http://test.com/#/$1 redirect;

用 302 跳转来改变 url，没有亲测，能够试下看看nginx

http://www.thinksaas.cn/ask/question/16418/angularjs

nginx如何将http://localhost/api/getuser rewrite为http://localhost/product/api/getuserweb

301/302重定向；正则表达式

方法一：

rewrite /product/(.*) /$1;
rewrite /(.*) /product/$1;

方法二：

if ($uri ~ ^/product) {
  rewrite /(.*) /product/$1;
}

http://cnodejs.org/topic/52a6b55ba6957a080985e881

摘要

angularJS开启html5 mode须要配合服务端来解决刷新404的问题，Nginx和Express实现起来比较简单，tomcat略复杂一点。

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