Angular上的嵌套资源路由

Question

I have this nested resources routes on my backend server /api/v1/hotels/:hotel_id/rooms/:id

However, I don't know how to leverage the Angular ui-router to achieve the RESTful APIs on front-end side.

On my current code.

When I want to show the list of rooms which are belonging to Hotel id 1

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

However, I want to make my route more RESTful.

It should be looks like

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

However, Current ui router config will not allow me to do so.

How could I adjust my ui router config to meet my requirement.

Thank you.

Config

        .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',
            ])
        })

Room Service

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

Update

When I trigger #/admin/hotels/1/rooms/index

It will show me the unknown route behaviour

However, I think the kind of URL is more RESTful way.

What I expect is that the #/admin/hotels/1/rooms/index request

Which will trigger the 'admin.hotels.rooms.index' state.

the 1 is the hotel_id

It seems the kind of RESTful API is hard to acheieve with AngularJS?

        .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

For multiple optional route parameters eg /posts/tagged/:tag/page/:page it looks like the only solution right now is to declare multiple routes ie /posts/tagged/:tag and /posts/tagged/:tag/page/:page .

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