AngularJS中的友好URL：移除URL中的#

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 文章.

为相对链接设置 

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

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

老浏览器的回调

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

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

总结

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

英文原文：Pretty URLs in AngularJS: Removing the #

译文来自：http://www.oschina.net/translate/pretty-urls-in-angularjs-removing-the-hashtag

当前文章：AngularJS中的友好URL：移除URL中的#
新闻来源：http://www.shufengxianlan.com/qtweb/news40/50440.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联