By default, AngularJS will route URLs with a hashtag.

For example:

  • http://example.com/
  • http://example.com/#/users
  • http://example.com/#/roles

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

app.users.routes.js

(function() {

    'use strict';

    angular

        .module('app.users')

        .config(['$routeProvider', ', $locationProvider', function($routeProvider, $locationProvider) {

            $routeProvider.

                when('/users', {

                    templateUrl: '/app/components/users/views/user-list.tpl.html',

                    controller: 'UserController'

                });

            // 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. The $locationProvider will automatically fallback to the hashbang method for browsers that do not support the HTML5 History API.

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

index.html

<!DOCTYPE html>

<html ng-app="app">

    <head>

        <title></title>

        <meta charset="utf-8" />

        <base href="/">

    </head>

    <body>

        <ul>

            <li>

                <a href="#/users">Users</a>

            </li>

            <li>

                <a href="#/roles">Roles</a>

            </li>

        </ul>

        <ng-view></ng-view>

        <script type="text/javascript" src="/assets/libs/angular/angular.min.js"></script>

        <script type="text/javascript" src="/assets/libs/angular/angular-route.min.js"></script>

        <script type="text/javascript" src="/app/app.js"></script>

        <script type="text/javascript" src="/app/components/users/app.users.js"></script>

        <script type="text/javascript" src="/app/components/users/app.users.routes.js"></script>

        <script type="text/javascript" src="/app/components/users/controllers/user.controller.js"></script>

        <script type="text/javascript" src="/app/components/roles/app.roles.js"></script>

        <script type="text/javascript" src="/app/components/roles/app.roles.routes.js"></script>

        <script type="text/javascript" src="/app/components/roles/controllers/role.controller.js"></script>

    </body>

</html>

AngularJS Best Practices: pretty urls的更多相关文章

  1. AngularJS Best Practices: SEO

    Google can execute AJAX & JavaScript for indexing, you can read the below link for more detailed ...

  2. AngularJS Best Practices: ui-router

    ui-router is a 3rd-party module and is very powerful. It supports everything the normal ngRoute can ...

  3. AngularJS Best Practices: ng-include vs directive

    For building an HTML template with reusable widgets like header, sidebar, footer, etc. Basically the ...

  4. AngularJS Best Practices: resource

    A factory which creates a resource object that lets you interact with RESTful server-side data sourc ...

  5. AngularJS Best Practices: ASP.NET MVC Directory Structure

    /Content----- images/ // Images for your app----- css/ // Styles for your app/Scripts----- libs/ // ...

  6. AngularJS Best Practices: ngRoute

    app/----- components/---------- users/--------------- controllers/-------------------- users.control ...

  7. AngularJS Best Practices: Directory Structure

    app/----- common/ // Acts as reusable components for your app---------- header/--------------- contr ...

  8. angularJS学习资源最全汇总

    基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...

  9. 请小心使用 ng-repeat 中的 $index

    自己自学的时候,遇到$index不知道它是如何使用的,所以上网搜了一下,发现了这个关于使用$index可能会出现的一个小BUG,和大家分享一下 PS:我是小白,欢迎指正,非常感谢! 以下是全文: &q ...

随机推荐

  1. ACM 一种排序

    一种排序 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 现在有很多长方形,每一个长方形都有一个编号,这个编号可以重复:还知道这个长方形的宽和长,编号.长.宽都是整数 ...

  2. 【HDU】2829 Lawrence

    http://acm.hdu.edu.cn/showproblem.php?pid=2829 题意:将长度为n的序列分成p+1块,使得$\sum_{每块}\sum_{i<j} a[i]a[j]$ ...

  3. 【POJ】2151 Check the difficulty of problems

    http://poj.org/problem?id=2151 题意:T个队伍M条题目,给出每个队伍i的每题能ac的概率p[i][j],求所有队伍至少A掉1题且冠军至少A掉N题的概率(T<=100 ...

  4. iphone H5 input type="search" 不显示搜索 解决办法

    H5 input type="search" 不显示搜索 解决办法 H5 input type="search" 不显示搜索 解决方法 在IOS(ipad iP ...

  5. 深入浅出 - Android系统移植与平台开发（九）－ JNI介绍

    作者:唐老师,华清远见嵌入式学院讲师. JNI是在学习Android HAL时必须要面临一个知识点,如果你不了解它的机制,不了解它的使用方式,你会被本地代码绕的晕头转向,JNI作为一个中间语言的翻译官 ...

  6. Express 路由

    路由 路由是指如何定义应用的端点(URIs)以及如何响应客户端的请求. 路由是由一个 URI.HTTP 请求(GET.POST等)和若干个句柄组成,它的结构如下: app.METHOD(path, [ ...

  7. [LintCode] Roman to Integer 罗马数字转化成整数

    Given a roman numeral, convert it to an integer. The answer is guaranteed to be within the range fro ...

  8. 使用redis的五个注意事项

    http://blog.nosqlfan.com/html/3705.html 下面内容来源于Quora上的一个提问,问题是使用Redis需要避免的五个问题.而回答中超出了五个问题的范畴,描述了五个使 ...

  9. 解决jsp中文乱码问题

    1. 先解决响应中的乱码 何为响应中的乱码?把页面中的"username"改成"用户名"你就知道了. 所谓响应中的乱码,就是显示页面上的乱码,因为页面数据是从服 ...

  10. jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式

    直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...