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. Android的Proxy/Delegate Application框架 （主要介绍插件化开发）

    1. 插件化的原理 是 Java ClassLoader 的原理:Java ClassLoader基础 常用的其他解决方法还包括:Google Multidex,用 H5 代替部分逻辑,删无用代码,买 ...

  2. Codeforce - Runtime Error

    Bahosain was trying to solve this simple problem, but he got a Runtime Error on one of the test case ...

  3. 转载：冷门js技巧

    前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...

  4. BZOJ4515: [Sdoi2016]游戏

    Description Alice 和 Bob 在玩一个游戏. 游戏在一棵有 n 个点的树上进行.最初,每个点上都只有一个数字,那个数字是 123456789123456789. 有时,Alice 会 ...

  5. BZOJ1391: [Ceoi2008]order

    Description 有N个工作,M种机器,每种机器你可以租或者买过来. 每个工作包括若干道工序,每道工序需要某种机器来完成,你可以通过购买或租用机器来完成. 现在给出这些参数,求最大利润 Inpu ...

  6. thinkphp常用Config.php配置项

    <?php return array( //'配置项'=>'配置值' 'DB_HOST' => 'localhost', 'DB_USER' => 'root', 'DB_PW ...

  7. PL/SQL无法连接，提示：pl/sql initialization error sql*net not properly installed

    各种找资料都不行,最后还是在公司的线上环境中去找不同点配置好的.不多说了,就做了如下配置: 服务器环境是:windows server 2008 64位操作系统 1.电脑系统环境变量PATH增加:x: ...

  8. List相关知识点.......课堂加整理

    package lis0924; //接口List(列表) import java.util.ArrayList; import java.util.Iterator; import java.uti ...

  9. c#语句 随堂练习2

    1.方程ax²+bx+c=0是一元二次方程,求根. 2.输入一个年份 ,判断是不是闰年.(能被4整除但不能被100整除的年份是闰年,有的世纪年也是闰年) 3.标准体重:男士体重=身高-100±3:女士 ...

  10. Runtime Error---Description: An application error occurred on the server....

    [原]Runtime Error---Description: An application error occurred on the server.... 2010-1-7阅读2010 评论3 D ...