Angular JS路由优先级

Question

我是一个新手，只有几天的AngularJS工作经验。我现在关心的是$routeProvider的路由路径的优先级，以及如何正确地排列它们。如下代码所示：

    routingApp.config(['$routeProvider',
        function($routeProvider) {
            $routeProvider
                .when('/showOrder/:id', {
                    templateUrl: 'templates/show_orders.html',
                    controller: 'ShowOrderController'
                })  ....

如果url包含参数，比如"http://localhost:3000/routing_01.html#/showOrder/123"，模板就会出现，但没有参数，我看不到模板。您能帮我理解$routeProvider中路由路径的优先级以及如何正确管理它们吗？(我确实在谷歌上搜索过，但真倒霉...：()

JavaScript代码

    var routingApp = angular
        /**
         *  Module
         *
         * Description
         */
        .module('routingApp', []);

    routingApp.config(['$routeProvider',
        function($routeProvider) {
            $routeProvider
                .when('/', {
                    templateUrl: 'templates/show_orders.html',
                    controller: 'ShowOrderController'
                })
                .when('/showOrder/:id', {
                    templateUrl: 'templates/show_orders.html',
                    controller: 'ShowOrderController'
                })
                .when('/displayOrder/:id', {
                    templateUrl: 'templates/display_order.html',
                    controller: 'DisplayOrderController'
                })
                .otherwise({

                })
        }
    ]);

    routingApp.controller('ShowOrderController', function($scope, $routeParams) {
        console.log("ShowOrderController");
        $scope.orderId = $routeParams.orderId;
    });

    routingApp.controller('DisplayOrderController', function($scope, $routeParams) {
        console.log("DisplayOrderController");
        $scope.orderId = $routeParams.orderId;
    });

HTML代码

    <!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="no-js">
    <!--<![endif]-->

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    </head>

    <body ng-app="routingApp">
        <!--[if lt IE 7]>
                <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
            <![endif]-->
        <!-- Add your site or application content here -->
        <p>Using angular Routing</p>
        <a href="#showOrder">Show Order</a>
        <a href="#displayOrder">Display Order</a>
        <div ng-view></div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
        window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')
        </script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script type="text/javascript" src="./js/routing_01.js"></script>
        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
        (function(b, o, i, l, e, r) {
            b.GoogleAnalyticsObject = l;
            b[l] || (b[l] =
                function() {
                    (b[l].q = b[l].q || []).push(arguments)
                });
            b[l].l = +new Date;
            e = o.createElement(i);
            r = o.getElementsByTagName(i)[0];
            e.src = '//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e, r)
        }(window, document, 'script', 'ga'));
        ga('create', 'UA-XXXXX-X');
        ga('send', 'pageview');
        </script>
    </body>

    </html>

Answer 1

答案实际上很简单:您没有定义到没有params的模板的路由。我认为你可以像这样修复它：

routingApp.config(['$routeProvider',
        function($routeProvider) {
            $routeProvider
                .when('/', {
                    templateUrl: 'templates/show_orders.html',
                    controller: 'ShowOrderController'
                })
                .when('/showOrder', {
                    templateUrl: 'templates/show_orders.html',
                    controller: 'ShowOrderController'
                })
                .when('/displayOrder', {
                    templateUrl: 'templates/display_order.html',
                    controller: 'ShowOrderController'
                })
                .when('/showOrder/:id', {
                    templateUrl: 'templates/show_orders.html',
                    controller: 'ShowOrderController'
                })
                .when('/displayOrder/:id', {
                    templateUrl: 'templates/display_order.html',
                    controller: 'DisplayOrderController'
                })
                .otherwise({

                })
        }
    ]);

如果不传参数，需要添加不带参数的路由才能看到模板。但是，请注意，如果不传递该参数(如果您在模板中使用它)，该参数将不可用(这是一种逻辑:-)

换句话说: JB Nizet在评论中说的话(他抢在我前面)。