AngularJS 中的友好 URL —— 移除URL 中的 # 已翻译 100%

oschina 投递于 2014/06/20 08:56 (共 4 段, 翻译完成于 06-20)
阅读 23087
收藏 87
5
加载中

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 服务及其所提供的特性有一个了解.

LeoXu
LeoXu
翻译于 2014/06/20 09:08
1

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

LeoXu
LeoXu
翻译于 2014/06/20 09:13
1

为相对链接设置<base> 

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

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

    <base href="/">
</head>

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

LeoXu
LeoXu
翻译于 2014/06/20 09:17
1

老浏览器的回调

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

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

hashbang_vs_regular_url

总结

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

Garfielt
Garfielt
翻译于 2014/06/20 09:21
2
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(17)

商者
商者
同样遇到该问题,可以去除#标识,但是刷新报404.
台俊峰
台俊峰

引用来自“sory”的评论

不刷新情况下,一刷新就没意义了。html5Mode需要url重写来支持。

引用来自“杨佰”的评论

刷新支持的话,就得去配置nginx了,去匹配url了!
想请教nginx怎么进行配置,看了好多教程都是用express
杨佰
杨佰

引用来自“sory”的评论

不刷新情况下,一刷新就没意义了。html5Mode需要url重写来支持。
刷新支持的话,就得去配置nginx了,去匹配url了!
砼砼
砼砼
还是没明白去掉“#”这东西,“友好”的意义在哪?对谁友好?不过文中的原理分析还是特别有意义的
风城剑客
风城剑客

引用来自“huangjacky”的评论

为什么现在angularjs官网打不开了。你们呢?

引用来自“豆浆油条Melon”的评论

弱弱的告诉你,angular是google开发的

引用来自“脑子进化论”的评论

难怪国内google越来越不好用了
天朝屏蔽了狗狗
宇天
宇天

引用来自“huangjacky”的评论

为什么现在angularjs官网打不开了。你们呢?

引用来自“豆浆油条Melon”的评论

弱弱的告诉你,angular是google开发的
弱弱的YY一下,敢不敢连chrome都禁了啊。。。。
脑子进化论
脑子进化论

引用来自“huangjacky”的评论

为什么现在angularjs官网打不开了。你们呢?

引用来自“豆浆油条Melon”的评论

弱弱的告诉你,angular是google开发的
难怪国内google越来越不好用了
豆浆Melon
豆浆Melon

引用来自“huangjacky”的评论

为什么现在angularjs官网打不开了。你们呢?
弱弱的告诉你,angular是google开发的
sory
sory

引用来自“huangjacky”的评论

为什么现在angularjs官网打不开了。你们呢?

引用来自“卡夫”的评论

angularjs 根本就是西方资本主义国家的隐形武器! 通过与 jqurey 技术理念的对立,来达到深刻分裂咱们大中华和谐统一哲学观的目的。从此国人各执一词、南北对立、水火不容。 只可惜,,伟大的***识破了这一计谋....
你知道太多了 哈哈
卡夫
卡夫

引用来自“huangjacky”的评论

为什么现在angularjs官网打不开了。你们呢?
angularjs 根本就是西方资本主义国家的隐形武器! 通过与 jqurey 技术理念的对立,来达到深刻分裂咱们大中华和谐统一哲学观的目的。从此国人各执一词、南北对立、水火不容。 只可惜,,伟大的***识破了这一计谋....
返回顶部
顶部