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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。