$stateParams vs $transition$.params()

[jwickens]

I was following https://ui-router.github.io/tutorial/ng1/hellosolarsystem and trying to get state params working. However, on trying to load a state with a resolve using $transition$ there was an unlogged error and nothing loaded.

I found in the hello universe docs @stateParams and that works fine.

What is the difference or do the docs need updating?

[NeoGenet1c]

Related question (that might get answered by answering @jwickens' question about the difference between those two):

What is the best practice to access parameters inside Services?

Sometimes, I find it very cumbersome to obtain $transition$ inside a service, but documentation clearly states that $stateParams service should NOT be used anymore.

Is $state.params better option?

[christopherthielen]

I found in the hello universe docs $stateParams and that works fine.

do the docs need updating?

Yes, since $stateParams are deprecated, the tutorial needs to be updated. Thanks for noting this!

What is the difference

The difference is documented in the migration guide and in the $stateParams docs for 1.0.0-rc.1

The $stateParams that gets injected into routed controllers is the same as $transition$.params() which can be seen in the source code, where it is literally an alias for this.params().

[christopherthielen]

@NeoGenet1c

What is the best practice to access parameters inside Services?

The $stateParams docs for 1.0.0-rc.1 give the suggested practice as follows:

inject $uiRouterGlobals and use UIRouterGlobals.params

(This is the same as injecting $uiRouter and accessing $uiRouter.globals.params)

[ashgibson]

I am trying to use $transition$ in my controller instead of $stateParams but get the following runtime error: Unknown provider: $transition$Provider <- $transition$.

I am using typescript with angular 1 and a webpack build with ng-annotate, my constructor code is below:

constructor(private $transition$: Transition) {
   'ngInject';
}

[christopherthielen]

@theatrain check out https://ui-router.github.io/guide/ng1/route-to-component#accessing-transition

[ashgibson]

Perfect, that works. Thanks!

[harrylincoln]

@christopherthielen , I think I'm having a similar problem where I need a $stateParams reset for parent state when sharing a single controller in child states:

http://stackoverflow.com/questions/41860680/angular-ui-router-state-params-reset-for-parent-when-sharing-controller-in-chi

If you could advise as I've researched the hell out of it and running out of ideas!

[archasek]

@harrylincoln did you come up with something?

[harrylincoln]

Yes I did! Workaround that's a little messy but safe. I basically introduced an 'init' state that inits the detail states and have the parent just handle basic html templating stuff.

I answered my own question on stackoverflow:
http://stackoverflow.com/questions/41860680/angular-ui-router-state-params-reset-for-parent-when-sharing-controller-in-chi/41958537#41958537

[samiraguiar]

@christopherthielen was there any change to this? I'm using the legacy template style with Angular 1.2 and I get the provider error when injecting $transition$.

[harrylincoln]

@samiraguiar this may help:
#3309

[samiraguiar]

@harrylincoln Thanks, Harry, but I think my problem is different.
I have a directive defined as:

angular.module('app').directive('myDirective', function($transition$) {});

And my route defined as follows:

{
    name: 'someRoute',
    url: '/path/to/route',
    template: '<my-directive></my-directive>'
}

But this gives me the "Unknown provider: $transition$Provider <- $transition$" error.

Here's a plunker showing the problem.

What am I doing wrong?