Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Documentation for $transitions #2746

Closed
MileanCo opened this issue May 13, 2016 · 12 comments
Closed

Documentation for $transitions #2746

MileanCo opened this issue May 13, 2016 · 12 comments

Comments

@MileanCo
Copy link

MileanCo commented May 13, 2016

There is hardly any documentation for the $transitions service [or at least I can't find it]; I'm not sure exactly how to use it properly. This is what i want to do:

angular.module("app.core").run(function ($rootScope, $state, $transitions ) {
     $transitions.onSuccess({to:'*'}, function ($state) {
        // do stuff on every transition such as change page title [global scope here]
     }
}

The wiki in https://github.com/angular-ui/ui-router/wiki is outdated; it uses the old 'OnStateChange' services. These breaking changes came from this #2219

@christopherthielen
Copy link
Contributor

christopherthielen commented May 13, 2016

agreed, the alpha docs are difficult to find at the moment.

--http://angular-ui.github.io/ui-router/1.0.0-alpha.3/interfaces/transition.ihookregistry.html--

Edit: Docs have a new home! http://ui-router.github.io/docs/latest

Read about the Transition Service ($transitions): https://ui-router.github.io/docs/latest/classes/transition.transitionservice.html

@briananderson1222
Copy link

Even just expanding upon the intent of this service. The $stateChange events were deprecated and I assume this service was meant as a 'replacement' for that functionality.

I wrote a question on stackoverflow asking about how to obtain parity between these in the context of Angular 1.

http://stackoverflow.com/questions/39169207/ui-router-v1-0-transitions-service-in-angular-1-x

But without more detailed documentation it's hard for me to understand if this is really meant as a full replacement or even what exactly is defined as a 'transition' let alone the syntax allowed for the HookMatchCriteria. Is the syntax used in @MileanCo example above valid? Should that match all top level routes or all routes? I would love to gain that clarity on the desired functionality before opening an issue in the repo for the stackoverflow question mentioned above. Thanks for all the hard work @christopherthielen

@christopherthielen
Copy link
Contributor

christopherthielen commented Aug 31, 2016

Even just expanding upon the intent of this service.

The $stateChange* hooks were all globally scoped events and did not support any asynchronous behaviors like checking the server for content or lazy loading code. The 1.0 Transition Hooks (via the Transition Service) addresses those shortcomings.

But without more detailed documentation it's hard for me to understand if this is really meant as a full replacement

They are meant as a full replacement for the state change Events.

or even what exactly is defined as a 'transition'

A Transition is the process of changing from one state+params (the from state) to another (the to state).

the syntax allowed for the HookMatchCriteria

See here for the gory details

@briananderson1222
Copy link

@christopherthielen Thanks for the detailed answer and for answering that SO question 👍 Definitely did not know about the visualizer.. such an awesome tool!

@timobehrens
Copy link

@christopherthielen Concluding from the fact that the $transitions.on* should replace the $stateChangeStart events, how can we access the next state's parameters in the same manner as how we used to do it via (event, nextState, nextStateParams, ...) inside the run block with $transitions? I can't find a way of getting the parameters of the next state inside the run block. I have exactly the same problem as depicted here: [http://stackoverflow.com/questions/40242765/ui-router-how-to-get-next-state-params-in-transition]. Could you help me by answering the question on SO?. Thanks and keep it up the good work!

@christopherthielen
Copy link
Contributor

@timobehrens I answered the SOF question

@timobehrens
Copy link

@christopherthielen Thank you sir! Works like a charm.

@christopherthielen
Copy link
Contributor

Documentation is available at https://ui-router.github.io/docs/latest/

@borislemke
Copy link

@christopherthielen 404

@christopherthielen
Copy link
Contributor

Thanks, I have added a redirect.

@roypeled
Copy link

I can't seem to find anywhere a description on how to access the transitions from state params.
To get the next state params is simple:

$transitions.onExit({}, (transition:Transition)=>{
       let nextParams = transition.params();
});

How would I get the state params of the state that I am leaving?

@christopherthielen
Copy link
Contributor

@roypeled

transition.params(”from”)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants