文档章节

angularJS友好URL实现

disfeng
 disfeng
发布于 2016/05/08 22:30
字数 1113
阅读 83
收藏 1

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的转发了,好在成功了。

© 著作权归作者所有

disfeng
粉丝 1
博文 6
码字总数 2399
作品 0
武汉
私信 提问
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.8K
13
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
使用 AngularJS 的路由和模板实现单页应用 (Single Page)

概述 单页应用现在越来越受欢迎。模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉。Angular可以帮助我们轻松创建此类应用 简单应用 我们打算创建一个简单的应用,涉及主页,...

oschina
2014/06/20
20.8K
1
angular.js 1.3.17/1.4.2 发布

其中:1.3.17 更新内容如下: Bug Fixes +- **$browser:** prevent infinite digest if changing hash when there is no hashPrefix + ([61a3fb67](https://github.com/angular/angular.js/......

oschina
2015/07/07
2.6K
9
Angular 1 vs. Angular 2 深度比较

AngularJS 2 尽管还在Alpha阶段,但主要功能和文档已经发布。让我我们了解下Angular 1 和 2 的区别,以及新的设计目标将如何实现。 Angular 2 当前仍处于 Alpha/开发预览阶段,但是主要功能和...

oschina
2015/10/14
41.8K
36

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
今天
13
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
今天
7
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
今天
13
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
今天
12
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部