Вложите URI, но не контроллеры или представления в AngularUI Router

Используя AngularUI Router, я хочу вложить некоторые URI, но не их представления или действия контроллера.

Например, мне нужны эти URI:

  1. /things - список последних вещей.
  2. /things/:x - показывает детали вещи с id x.

Если я использую «Вложенные состояния и представления» из вики, то мне нужно фактически вложить представления «список вещей» и «показать отдельные элементы», которые, как оказалось, не связаны между собой. Более того, у области видимости «показать одну вещь» будет «список вещей», даже если они ей не понадобятся.

Если я использую «Вложенные состояния и представления» из README Тогда у меня есть отдельный /things/list URI вместо простого старого /things, как я хочу.

Похоже, мне нужен отдельный «список» (или «индекс») состояние, которое разрешается в базовый URL-адрес для другого вложенного состояния, но без передачи представления и действий дочерним состояниям. Это возможно?


javascript angularjs angular-ui-router angular-ui
person maerics    schedule 22.10.2014    source источник
comment
Не совсем уверен, что вы имеете в виду под своим вопросом ... Я привел пример того, что, как мне кажется, вы ищете ... plnkr.co/edit/bReixgw99JJmqtR49yrm?p=preview Это то, что вы имели в виду? Вот лучшая демонстрация для демонстрации маршрутов - run.plnkr.co/3G0T1bvEG4x4hs8l / # / list < / а>   -  person Dom    schedule 22.10.2014
comment
@Dom ах, интересный подход. Я не понимал, что могу вручную добавить / вещи к URI вместо того, чтобы полагаться на функции вложенного состояния, которые сделают это за меня! Отправьте ответ плз   -  person maerics    schedule 22.10.2014

Ответы (1)


arrow_upward
1
arrow_downward

Вместо того, чтобы использовать вложенные маршруты, я рекомендую специально объявить URL-адрес; однако вы также можете использовать абсолютный маршрут - '^/things/:x'.

Используя маршруты, которые вы указали в своем вопросе, вот пример того, как вы могли бы это сделать.

ДЕМО (с кодом): http://plnkr.co/edit/sxOeCBipiQS7AOt4Ax4L?p=preview

ДЕМО (без кода, показывает URL-адреса маршрутов): http://run.plnkr.co/uT4PLYDqk8ItzqaK/#/things

Сначала настройте приложение:

var app = angular.module('myApp', [
    'ui.router'
]);

Затем настройте приложение с различными состояниями. Вы можете использовать службу $ stateParams, чтобы отобразить любые параметры в URL-адресе, что может быть удобно, если вам нужно получить какие-либо данные из ресурса / службы:

  app.config(function($stateProvider, $urlRouterProvider) {

  // for any unknown routes, default to the '/things' url
  $urlRouterProvider.otherwise('/things')

  $stateProvider
    .state('things', {
      url: '/things',
      templateUrl: 'things.html',
      controller: function($scope, $state) {
        // add items to the scope
        $scope.items = ['Thing 1', 'Thing 2', 'Thing 3'];

        // create an action that will change the state
        $scope.goToDetails = function(scope) {
          $state.go('details', {
            x: scope.item
          })
        }
      }
    })
  // create the details state
  .state('details', {
    url: '^/things/:x',
    templateUrl: 'details.html',
    controller: function($scope, $stateParams) {
      // use $stateParams service
      $scope.data = 'I am ' + $stateParams.x
    }
  });
});

Надеюсь, это поможет, дайте мне знать, если у вас возникнут вопросы!

person Dom    schedule 23.10.2014