蝙蝠岛资源网

移除AngularJS下URL中的#字符的方法
网络编程 2025/5/7 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

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"htmlcode"> 

<!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应用吧！

标签：
AngularJS
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“移除AngularJS下URL中的#字符的方法”

暂无移除AngularJS下URL中的#字符的方法的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 MicroAirGrinder 南强小屋 幽灵资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 HerbalExtract 蝙蝠岛资源网 白云城资源网 天枫庄资源网 无争山庄资源网 HerbalExtracts FoodColouring NaturalHerbal HerbalOnline NaturalColouring 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com