`ui-router` $ stateParams vs. $ state.params

З ui-routerцим можна ввести $stateабо $stateParamsв контролер, щоб отримати доступ до параметрів у URL-адресі. Однак доступ до параметрів здійснюється $stateParamsлише через параметри, що належать до стану, керованого контролером, який здійснює доступ до нього, та його батьківських станів, при цьому $state.paramsмає всі параметри, в тому числі в будь-яких дочірніх станах.

З огляду на наступний код, якщо ми безпосередньо завантажуємо URL-адресу http://path/1/paramA/paramB, так це відбувається, коли контролери завантажують:

$stateProvider.state('a', {
     url: 'path/:id/:anotherParam/',
     controller: 'ACtrl',
  });

$stateProvider.state('a.b', {
     url: '/:yetAnotherParam',
     controller: 'ABCtrl',
  });

module.controller('ACtrl', function($stateParams, $state) {
   $state.params; // has id, anotherParam, and yetAnotherParam
   $stateParams;  // has id and anotherParam
}

module.controller('ABCtrl', function($stateParams, $state) {
   $state.params; // has id, anotherParam, and yetAnotherParam
   $stateParams;  // has id, anotherParam, and yetAnotherParam
}

Питання в тому, чому різниця? І чи є вказівки щодо найкращих практик щодо того, коли і навіщо слід використовувати, чи уникати використання будь-якого з них?

Документація повторює ваші висновки тут: https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service

Якщо моя пам'ять слугує, $stateParamsбула введена пізніше оригіналу $state.paramsі, здається, є простим помічником-інжектором, щоб уникнути постійного написання $state.params.

Я сумніваюся, що є якісь рекомендації щодо найкращої практики, але контекст для мене виграє. Якщо ви просто хочете отримати доступ до парам, що надійшли в URL, тоді скористайтеся $stateParams. Якщо ви хочете дізнатись про щось складніше про саму державу, використовуйте $state.

Ще одна причина використання $state.params- це стан, що не базується на URL, який (на мій погляд) є надзвичайно недокументованим та дуже потужним.

Я щойно виявив це, гуглюючи про те, як передати стан, не виставляючи його в URL-адресі, і відповів на запитання в іншому місці SO.

В основному, це дозволяє такий синтаксис:

<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>

EDIT: Ця відповідь правильна для версії 0.2.10. Як зазначив @Alexander Васильєв, він не працює у версії 0.2.14.

Ще одна причина використання $state.params- це коли потрібно витягти такі параметри запиту:

$stateProvider.state('a', {
  url: 'path/:id/:anotherParam/?yetAnotherParam',
  controller: 'ACtrl',
});

module.controller('ACtrl', function($stateParams, $state) {
  $state.params; // has id, anotherParam, and yetAnotherParam
  $stateParams;  // has id and anotherParam
}

Існує багато відмінностей між цими двома. Але працюючи практично, я виявив, що використовую $state.paramsкраще. Якщо ви використовуєте все більше та більше параметрів, це може бути незрозумілим для підтримки $stateParams. де, якщо ми використовуємо кілька парам, які не є URL-парам $state, дуже корисно

 .state('shopping-request', {
      url: '/shopping-request/{cartId}',
      data: {requireLogin: true},
      params : {role: null},
      views: {
        '': {templateUrl: 'views/templates/main.tpl.html', controller: "ShoppingRequestCtrl"},
        'body@shopping-request': {templateUrl: 'views/shops/shopping-request.html'},
        'footer@shopping-request': {templateUrl: 'views/templates/footer.tpl.html'},
        'header@shopping-request': {templateUrl: 'views/templates/header.tpl.html'}
      }
    })

У мене є кореневий стан, який вирішує sth. Проходження $stateв якості параметра вирішення не гарантує доступність для $state.params. Але використовуючи $stateParamsволю.

var rootState = {
    name: 'root',
    url: '/:stubCompanyId',
    abstract: true,
    ...
};

// case 1:
rootState.resolve = {
    authInit: ['AuthenticationService', '$state', function (AuthenticationService, $state) {
        console.log('rootState.resolve', $state.params);
        return AuthenticationService.init($state.params);
    }]
};
// output:
// rootState.resolve Object {}

// case 2:
rootState.resolve = {
    authInit: ['AuthenticationService', '$stateParams', function (AuthenticationService, $stateParams) {
        console.log('rootState.resolve', $stateParams);
        return AuthenticationService.init($stateParams);
    }]
};
// output:
// rootState.resolve Object {stubCompanyId:...}

Використання "angular": "~ 1.4.0", "angular-ui-router": "~ 0.2.15"

Цікаве зауваження, яке я зробив під час передачі попередніх парам станцій з одного маршруту на інший, - це те, що $ stateParams піднімається та перезаписує парами стану попереднього маршруту, передані разом із поточними парамами стану, але використання $state.params не виконує.

При використанні $stateParams:

var stateParams        = {};
stateParams.nextParams = $stateParams; //{item_id:123}
stateParams.next       = $state.current.name;

$state.go('app.login', stateParams);
//$stateParams.nextParams on app.login is now:
//{next:'app.details', nextParams:{next:'app.details'}}

При використанні $ state.params:

var stateParams        = {};
stateParams.nextParams = $state.params; //{item_id:123}
stateParams.next       = $state.current.name;

$state.go('app.login', stateParams);
//$stateParams.nextParams on app.login is now:
//{next:'app.details', nextParams:{item_id:123}}

Тут у цій статті чітко пояснено: $stateСервіс надає ряд корисних методів для маніпулювання станом, а також відповідні дані про поточний стан. Параметри поточного стану доступні в $stateсервісі за допомогою клавіші params. $stateParamsСлужба повертає це той же самий об'єкт. Отже, $stateParamsсервіс є суворо зручним сервісом для швидкого доступу до об’єкта парам в $stateслужбі.

Таким чином , ні один контролер ніколи не повинен вводити як $stateсервіс і його обслуговування зручності $stateParams. Якщо $stateвводиться просто для доступу до поточних параметрів, контролер слід переписати для введення $stateParamsзамість цього.