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.

    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>
  • 相关阅读:
    [CLR via C#]5.2 引用类型和值类型
    Yii easyWechat 开发的时候报错:cURL error 60: SSL certificate problem: unable to get local issuer certificat
    前端浏览器自动刷新神器:Browsersync
    phpStudy 切换版本后没有权限的问题
    最全的CSS浏览器兼容问题
    (转)详解JS位置、宽高属性之一:offset系列
    js 跨域问题
    移动端IOS 固定下方的输入框,点击输入框位置会变的修复
    ie8网页时调用特定的css文件
    Bootstrap如何禁止响应式布局 不适配
  • 原文地址:https://www.cnblogs.com/zhangpengc/p/5011844.html
Copyright © 2011-2022 走看看