Question

我是一名新手，只是几天与AngularJS合作。我现在关注的是$ routeProvider的路由路径的优先级以及如何正确排列它们。如下面的代码：

do-while

如果网址包含“http://localhost:3000/routing_01.html#/showOrder/123”之类的参数，则会显示模板但是没有参数，我看不到模板你能帮我理解$ routeProvider中路由路径的优先级以及如何正确管理它们。（我确实搜索谷歌但是很糟糕...... :(）

JavaScript代码

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

HTML代码

    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;
    });

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在评论中说了什么（他打败了我）。

Angular JS路由优先级

1 个答案: