移除AngularJS下URL中的#字符的方法  更新时间:2015年06月19日 14:59:17   投稿:goldensun   这篇文章主要介绍了移除AngularJS下URL中的#字符的方法,AngularJS是一款高人气JavaScript库,需要的朋友可以参考下 AngularJS 默认将会使用一个 # 号来对URL进行路由. 例如:     http://example.com/     http://example.com/#/about     http://example.com/#/contact 要获得干净的URL并将井号从URL中移除是很容易的. 完成两件事情就行了.     配置 $locationProvider     设置我们的相对连接的起点路径 $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 文章. 为相对链接设置 为了在应用程序各处使用相对链接,你将需要在你文档的里面设置一个.   有大量的方法可以用来配置这个东西,而将HTML5Mode设置为true就会自动的解析相对链接了. 在我这儿这种方式总是能起效. 如果你应用程序的根同url相比有所不同,例如 /my-base, 那就用那个作为你的起点路径. 老浏览器的回调 $location服务对不支持HTML5浏览历史API的浏览器将自动回调hashbang方法。 一切的发生对你是透明的,你不需为此做任何配置。从Angular $location文档中,你可以看到回调的方法已经它是如何工作的。 总结 这是一个在Angular应用中获得漂亮URL并删除哈希标记的简单方法。享受超洁净、超快速的Angular应用吧! 您可能感兴趣的文章: Angular.JS去掉访问路径URL中的#号详解 Angular2+如何去除url中的#号详解 AngularJS 相关文章 AngularJS 作用域详解及示例代码 本文主要介绍AngularJS 作用域的知识,这里整理了基础资料,和示例代码以及实现效果图,有需要的小伙伴可以参考下 2016-08-08 Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码) 这篇文章主要介绍了Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码),需要的朋友可以参考下 2017-10-10 AngularJS向后端ASP.NET API控制器上传文件 这篇文章主要介绍了AngularJS向后端ASP.NET API控制器上传文件的相关资料,需要的朋友可以参考下 2016-02-02 Angular2.0实现modal对话框的方法示例 这篇文章主要介绍了Angular2.0实现modal对话框的方法,结合实例形式分析了angular2.0实现modal对话框的样式、界面及功能等相关操作技巧,需要的朋友可以参考下 2018-02-02 详解AngularJS2 Http服务 本篇文章主要介绍了详解AngularJS2 Http服务,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 AngularJS 限定$scope的范围实例详解 这篇文章主要介绍了AngularJS 限定$scope的范围实例详解的相关资料,需要的朋友可以参考下 2017-06-06 Angular实现的日程表功能【可添加及隐藏显示内容】 这篇文章主要介绍了Angular实现的日程表功能,带有向日程表中添加内容及隐藏显示内容的功能,涉及AngularJS事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下 2017-12-12 Angular实现的table表格排序功能完整示例 这篇文章主要介绍了Angular实现的table表格排序功能,结合完整实例形式分析了AngularJS表格排序所涉及的事件响应、元素遍历、属性修改等相关操作技巧,需要的朋友可以参考下 2017-12-12 详解Angular结合zTree异步加载节点数据 本篇文章主要给大家分享了Angular结合zTree异步加载节点数据的难点以及方法,有这方面需求的朋友参考下吧。 2018-01-01 angular2模块和共享模块详解 这篇文章主要介绍了angular2模块和共享模块详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-04-04 最新评论

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文档中,你可以看到回调的方法已经它是如何工作的。

2015619153430123.jpg (567×311)
总结

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

您可能感兴趣的文章:

  • Angular.JS去掉访问路径URL中的#号详解
  • Angular2+如何去除url中的#号详解
张贴在3