Angular上的嵌套資源路由

Question

我在我的后端服務器/api/v1/hotels/:hotel_id/rooms/:id上有這個嵌套的資源路由/api/v1/hotels/:hotel_id/rooms/:id

但是，我不知道如何利用Angular ui-router在前端實現RESTful API。

在我目前的代碼上。

當我想顯示屬於Hotel id 1的房間列表時

http://mysite.com.tw/index.html#/admin/rooms/1

但是，我想讓我的路線更加RESTful。

它應該是看起來像

http://mysite.com.tw/index.html#/admin/hotel/1/rooms/

但是，當前的ui路由器配置將不允許我這樣做。

我怎樣才能調整我的ui路由器配置以滿足我的要求。

謝謝。

配置

        .state('admin.hotels', {
            url: '/hotels',
            template: '<div ui-view class="fade-in"></div>',
            controller: 'hotelBaseCtrl',
            resolve: load(['js/services/hotel_service.js',
            './js/controllers/hotel/base_controller.js'])
        })
        .state('admin.hotels.index', {
            url: '/index',
            templateUrl: './admin_tpl/hotel/index.html',
            resolve: load([
            './js/controllers/hotel/index_controller.js',

            ])
        })

        .state('admin.rooms', {
            url: '/rooms',
            template: '<div ui-view class="fade-in"></div>',
            controller: 'roomBaseCtrl',
            resolve: load(['js/services/room_service.js',
            './js/controllers/room/base_controller.js'])
        })
        .state('admin.rooms.index', {
            url: '/:hotel_id',
            templateUrl: './admin_tpl/room/index.html',
            resolve: load([

            './js/controllers/room/index_controller.js',
            ])
        })

客房服務

    (function() {
        'use strict';
        angular.module('roomModule', [])
            .factory('roomService', ['$resource',
                function($resource, $http) {
                    var room = $resource('/api/v1/hotels/:hotel_id/rooms/:room_id', {
                        hotel_id : '@hotel_id',
                        room_id : '@room_id',
                    }, {});
                    return room ;
                }
            ]);
    }());

更新

當我觸發#/admin/hotels/1/rooms/index

它會告訴我未知的路線行為

但是，我認為這種URL更加RESTful。

我期待的是#/admin/hotels/1/rooms/index請求

這將觸發'admin.hotels.rooms.index'狀態。

1是hotel_id

似乎使用AngularJS很難實現RESTful API的那種？

        .state('admin.hotels', {
            url: '/hotels',
            template: '<div ui-view class="fade-in"></div>',
            controller: 'hotelBaseCtrl',
            resolve: load(['js/services/hotel_service.js',
            './js/controllers/hotel/base_controller.js'])
        })
        .state('admin.hotels.index', {
            url: '/index',
            templateUrl: './admin_tpl/hotel/index.html',
            resolve: load([
            './js/controllers/hotel/index_controller.js',
            ])
        })

        .state('admin.hotels.rooms', {
            url: '/rooms',
            template: '<div ui-view class="fade-in"></div>',
            controller: 'roomBaseCtrl',
            resolve: load(['js/services/room_service.js',
            './js/controllers/room/base_controller.js'])
        })
        .state('admin.hotels.rooms.index', {
            url: '/:hotel_id',
            templateUrl: './admin_tpl/room/index.html',
            resolve: load([
            './js/controllers/room/index_controller.js',

            ])
        })

Answer 1

對於多個可選路由參數，例如/posts/tagged/:tag/page/:page它看起來像現在唯一的解決方案是聲明多個路由，即/posts/tagged/:tag和/posts/tagged/:tag/page/:page 。

http://benfoster.io/blog/ui-router-optional-parameters