移除AngularJS下URL中的#字符的方法


Posted in Javascript onJune 19, 2015

AngularJS 默认将会使用一个 # 号来对URL进行路由.

例如:

    http://example.com/

    http://example.com/#/about

    http://example.com/#/contact

要获得干净的URL并将井号从URL中移除是很容易的.

完成两件事情就行了.

  1.     配置 $locationProvider
  2.     设置我们的相对连接的起点路径

$location 服务

在Angular中, $location服务会解析地址栏中的URL,并对你的应用程序作出改变,反之亦然.

我强烈推荐通读官方的 Angular $location 文档 以对$location 服务及其所提供的特性有一个了解.

$locationProvider 和 html5 模式(html5Mode)

我们会使用 $locationProvider 模块,并将html5Mode设置为true.

我们会在你定义Angular应用程序并配置你的路由时做这些.
 

angular.module('scotchy', [])
  
 .config(function($routeProvider, $locationProvider) {
 
  $routeProvider
   .when('/', {
    templateUrl : 'partials/home.html',
    controller : mainController
   })
   .when('/about', {
    templateUrl : 'partials/about.html',
    controller : mainController
   })
   .when('/contact', {
    templateUrl : 'partials/contact.html',
    controller : mainController
   });
  
  // use the HTML5 History API
  $locationProvider.html5Mode(true);
 });

什么是 HTML5 History API? 它是使用一个脚本来操作浏览器历史的标准方法. 有了它就能在不刷新页面的前提下让 Angular 改变路由和页面的URL. 更多的信息,这里有一篇蛮好的 HTML5 History API 文章.

为相对链接设置<base>

为了在应用程序各处使用相对链接,你将需要在你文档的<head>里面设置一个<set>.
 

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 
 <base href="/">
</head>

有大量的方法可以用来配置这个东西,而将HTML5Mode设置为true就会自动的解析相对链接了. 在我这儿这种方式总是能起效. 如果你应用程序的根同url相比有所不同,例如 /my-base, 那就用那个作为你的起点路径.

老浏览器的回调

$location服务对不支持HTML5浏览历史API的浏览器将自动回调hashbang方法。

一切的发生对你是透明的,你不需为此做任何配置。从Angular $location文档中,你可以看到回调的方法已经它是如何工作的。

移除AngularJS下URL中的#字符的方法
总结

这是一个在Angular应用中获得漂亮URL并删除哈希标记的简单方法。享受超洁净、超快速的Angular应用吧!

Javascript 相关文章推荐
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
基于JQuery的日期联动实现代码
Feb 24 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
JavaScript多线程详解
Aug 12 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 #Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 #Javascript
使用AngularJS实现表单向导的方法
Jun 19 #Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 #Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 #Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 #Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 #Javascript
You might like
php实现多张图片上传加水印技巧
2013/04/18 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
Python删除空文件和空文件夹的方法
2015/07/14 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
简单了解什么是神经网络
2017/12/23 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
python实现扫描ip地址的小程序
2019/04/16 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
工作时间上网检讨书
2014/02/03 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
中小学生学籍证明
2014/10/25 职场文书
复试通知单模板
2015/04/24 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
学习党史心得体会2016
2016/01/23 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript