本文转载自：Pretty URLs in AngularJS: Removing the #

By default, AngularJS will route URLs with a hashtag.

For example:

  • http://example.com/
  • http://example.com/#/about
  • http://example.com/#/contact

It is very easy to get clean URLs and remove the hashtag from the URL.

There are 2 things that need to be done.

  1. Configuring $locationProvider
  2. Setting our base for relative links

$location Service

In Angular, the $location service parses the URL in the address bar and makes changes to your application and vice versa.

I would highly recommend reading through the official Angular $location docs to get a feel for the $location service and what it provides.

$locationProvider and html5Mode

We will use the $locationProvider module and set html5Mode to true.

We will do this when defining your Angular application and configuring your routes.



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);

    });

What is the HTML5 History API? It is a standardized way to manipulate the browser history using a script. This lets Angular change the routing and URLs of our pages without refreshing the page. For more information on this, here is a good HTML5 History API Article.

Setting For Relative Links

To link around your application using relative links, you will need to set a <base> in the <head> of your document.



<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <base href="/">

</head>

There are plenty of other ways to configure this and the HTML5 mode set to true should automatically resolve relative links. This has just always worked for me. If your root of your application is different than the url (for instance /my-base, then use that as your base.

Fallback for Older Browsers

The $location service will automatically fallback to the hashbang method for browsers that do not support the HTML5 History API.

This happens transparently to you and you won't have to configure anything for it to work. From the Angular $location docs, you can see the fallback method and how it works.

In Conclusion

This is a simple way to get pretty URLs and remove the hashtag in your Angular application. Have fun making those super clean and super fast Angular apps!

一个简单的方法去掉angular application中URLs的hashtag的更多相关文章

  1. 一个简单的批量更新oracle 数据库中 最近的服务商名称的数据

    有一个需求是这样的,我们需要更新数据库中的数据,数据时这样的 1.大约50万以上 2. 数据中有较多的重复数据 3. 需要将表中最近的代理商的名称赋值给行中的服务商名称 4. 代理商的名称可能有多个, ...

  2. [VBA]用一个简单例子说明如何在Excel中自定义函数

    Excel中的函数无疑是强大的,但是再强大的战士也有他脆弱的脚后跟[1].这两天在使用Excel的时候遇到了一个需求,要在某一个单元格里面自动计算今天是星期几(如显示 Today is Tuesday ...

  3. 使用hadoop命令rcc生成Record 一个简单的方法来实现自己的定义writable对象

    hadoop 的bin文件夹以下一个rcc命令,网上介绍非常少.看了一下源代码.发现能够用来生成 java和c++的hadoop Record 类代码,比起自己直接实现writable 接口.简单非常 ...

  4. 一个简单的示例在spring boot中实现国际化

    最近在网上找了一个有关账单管理的spring boot项目,其中有一部分是涉及显示国际化信息的,即将页面上的中英文进行转换.因为在这之前这部分内容没有接触过,所以在这记录下过程. 中文效果图如下所示: ...

  5. 一个简单java爬虫爬取网页中邮箱并保存

    此代码为一十分简单网络爬虫,仅供娱乐之用. java代码如下: package tool; import java.io.BufferedReader; import java.io.File; im ...

  6. 用JS写一个简单的程序,算出１００中７的倍数的最大值

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. iPhone开发中从一个视图跳到另一个视图有三种方法：

    iPhone开发中从一个视图跳到另一个视图有三种方法:   1.self.view addSubView:view .self.window addSubView,需要注意的是,这个方法只是把页面加在 ...

  8. linux中内存泄漏的检測（一）最简单的方法

    什么是内存泄漏 内存泄漏是指程序动态申请的内存在使用完后没有释放,导致这段内存不能被操作系统回收再利用. 比如这段程序,申请了4个字节的空间但没有释放,有4个字节的内存泄漏. #include < ...

  9. 使用 CodeIgniter 创建一个简单的 Web 站点

    原文:使用 CodeIgniter 创建一个简单的 Web 站点 参考源自: http://www.ibm.com/developerworks/cn/web/wa-codeigniter/index ...

随机推荐

  1. <NOI2002>银河英雄传说の思路

    emm并没有什么好说的.毕竟我这个蒟蒻都能yy出来 #include<cstring> #include<cstdio> #include<iostream> #i ...

  2. C++如何保留2位小数输出

    cout<<setiosflags(ios::);//需要头文件#include <iomanip> 然后再输出实数类型变量即可以保留2位小数输出了,当然你要保留三位小数,se ...

  3. SVN图标含义说明

    最经都在用Svn,对他上面的很多状态图标不是很理解,看了看它的帮助文档,说的很清楚,特地截张图.    Svn不同状态图标及说明 - 简单 - 简单  Normal  A fresh checked ...

  4. 我们为什么不愿意相信AI？

    人工智能--即AI已经变得越来越聪明,甚至能够预测未来.比如警察可以用AI来提前预判出犯罪的时间或地点,医生可以用AI预测病人最有可能心脏病发作或是中风.甚至研究人员还试图为AI添加上更多的想象力,因 ...

  5. 从0开始学正则表达式－基于python

    关于正则表达式,当我们了解它就不难,不了解就很难,其实任何事情都是这样,没有人一生下来就啥都会,说白了,每个人都是一个学习了解进步的过程.学习和掌握正则表达式可能并不是太简单,因为它确实是有点像“外星 ...

  6. windows7 64位系统下无法运行ipython

    windows7 64位系统下无法运行ipython | Creator 导航 导航 博客 分类 标签 友链 关于 大专栏  windows7 64位系统下无法运行ipythontent-post L ...

  7. Unity中使用C#的null条件运算符?.的注意事项

    Introduction: 在C#6及以上版本中,加入了一项特别好用的运算符:Null条件运算符?.和?[]可以用来方便的执行判空操作,当运算符左侧操作数不为null时才会进行访问操作,否则直接返回n ...

  8. 冒泡排序算法(C#、Java、Python、JavaScript、C、C++实现)

    一.介绍 它重复地走访过要排序的元素列,依次比较两个相邻的元素,如果顺序(如从大到小.首字母从Z到A)错误就把他们交换过来. 走访元素的工作是重复地进行直到没有相邻元素需要交换,也就是说该元素列已经排 ...

  9. async/await实现图片的串行、并行加载

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. java ThreadPoolExecutor初探

    导读:线程池是开发中使用频率比较高的组件之一,但是又有多少人真正了解其内部机制呢. 关键词:线程池 前言 线程池是大家开发过程中使用频率比较高的组件之一,但是其内部原理又有多少人真正清楚呢.最近抽时间 ...