Con ui-router
, es posible inyectar $state
o $stateParams
en un controlador para obtener acceso a los parámetros en la URL. Sin embargo, acceder a los parámetros a través de $stateParams
solo expone los parámetros que pertenecen al estado administrado por el controlador que accede a él, y sus estados principales, mientras que $state.params
tiene todos los parámetros, incluidos los de cualquier estado secundario.
Dado el siguiente código, si cargamos directamente la URL http://path/1/paramA/paramB
, así es como funciona cuando se cargan los controladores:
$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
}
La pregunta es, ¿por qué la diferencia? ¿Y existen pautas de mejores prácticas sobre cuándo y por qué debe usar o evitar usar cualquiera de ellos?