zoukankan html css js c++ java

AngularJS Best Practices: pretty urls

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.

Configuring $locationProvider
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>

查看全文

相关阅读:
多线程中static对象
 DPDK l2fwd 浅注
 DPDK编译步骤
 什么是API，SDK和API之间的关系
 linux创建定时任务发送钉钉通知
 python-webdriver中添加cookie，解决添加了图片验证码的问题
 win7下CodeIgniter安装
 XAMPP环境搭建及同类推荐
 Fiddler死活抓不了HTTPS包解决办法
 XSS注入常用语句积累

原文地址：https://www.cnblogs.com/zhangpengc/p/5011844.html