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. SpringMvc出现No mapping found for HTTP request with URI的终极解决办法

    No mapping found for HTTP request with URI 出现这个问题的原因是在web.xml中配置错了,如: <servlet> <servlet-na ...

  2. [杂谈] There is a Doctor in My Computer.

    (p.s. 附带手写翻译,有错轻喷) Admin: Hi.             (嗨) Doctor: How do you do?  What brings you to see me?     ...

  3. Javascript 多浏览器兼容性问题及解决方案

    一.document.formName.item(”itemName”) 问题 问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 document. ...

  4. [Cocos2d-x For WP8]ActionManager动作管理

    在Cocos2d-x里面可以通过CCActionManger类来管理动作的暂停和恢复,CCActionMessage是管理所有Action的单例,一般情况下并不直接使用这个单例,而是使用CCNode的 ...

  5. 【HDU】1848 Fibonacci again and again

    http://acm.hdu.edu.cn/showproblem.php?pid=1848 题意:同nim,3堆,每次取的为fib数,n<=1000 #include <cstdio&g ...

  6. ThinkPHP登录功能代码

    <?php /** * 后台登录控制器 */ Class LoginAction extends Action{ /** * 登录视图 */ Public function index(){ $ ...

  7. ubuntu安装Lua

    1.网站下载LUA包 curl -R -O http://www.lua.org/ftp/lua-5.2.3.tar.gz 2.下载ubuntu的编译支持sudo apt-get install bu ...

  8. [zt] ROI (Region of Interest) 感兴趣区域 OpenCV

    在以前介绍IplImage结构的时候,有一个重要的参数——ROI.ROI全称是”Region Of Interest”,即感兴趣的区域.实际上,它是IPL/IPP(这两个是Inter的库)结构IplR ...

  9. orcale 动态执行语句

    create or replace function fn_test2(tablename in varchar2) return number is rtn number; begin --通用的获 ...

  10. jq制作博客已存在多少天

    function current(){ var d=new Date(),str=''; var date=((d.getMonth()+1)*30+(d.getFullYear())*365+d.g ...