Creates a new Transition object.
Creates a new Transition object.
If the target state is not valid, an error is thrown.
encapsulates the "from state".
The path of PathNodes from which the transition is leaving. The last node in the fromPath
The target state and parameters being transitioned to (also, the transition options)
The UIRouter instance
A unique identifier for the transition.
This is an auto incrementing integer, starting from 0
.
This promise is resolved or rejected based on the outcome of the Transition.
When the transition is successful, the promise is resolved When the transition is unsuccessful, the promise is rejected with the Rejection or javascript error
A reference to the UIRouter instance
This reference can be used to access the router services, such as the StateService
A boolean which indicates if the transition was successful
After a successful transition, this value is set to true. After an unsuccessful transition, this value is set to false.
The value will be undefined if the transition is not complete
the internal from [State] object
the internal to [State] object
Aborts this transition
Aborts this transition
Imperative API to abort a Transition. This only applies to Transitions that are not yet complete.
Dynamically adds a new Resolvable (i.e., StateDeclaration.resolve) to this transition.
Dynamically adds a new Resolvable (i.e., StateDeclaration.resolve) to this transition.
transitionService.onBefore({}, transition => {
transition.addResolvable({
token: 'myResolve',
deps: ['MyService'],
resolveFn: myService => myService.getData()
});
});
a ResolvableLiteral object (or a Resolvable)
the state in the "to path" which should receive the new resolve (otherwise, the root state)
Returns true if the transition is dynamic.
Returns true if the transition is dynamic.
A transition is dynamic if no states are entered nor exited, but at least one dynamic parameter has changed.
true if the Transition is dynamic
Gets the states being entered.
Gets the states being entered.
an array of states that will be entered during this transition.
The Transition error reason.
The Transition error reason.
If the transition is invalid (and could not be run), returns the reason the transition is invalid. If the transition was valid and ran, but was not successful, returns the reason the transition failed.
an error message explaining why the transition is invalid, or the reason the transition failed.
Gets the states being exited.
Gets the states being exited.
an array of states that will be exited during this transition.
Returns the "from state"
Returns the "from state"
Returns the state that the transition is coming from.
The state declaration object for the Transition's ("from state").
Gets all available resolve tokens (keys)
Gets all available resolve tokens (keys)
This method can be used in conjunction with injector to inspect the resolve values available to the Transition.
This returns all the tokens defined on StateDeclaration.resolve blocks, for the states in the Transition's TreeChanges.to path.
This example logs all resolve values
let tokens = trans.getResolveTokens();
tokens.forEach(token => console.log(token + " = " + trans.injector().get(token)));
This example creates promises for each resolve value. This triggers fetches of resolves (if any have not yet been fetched). When all promises have all settled, it logs the resolve values.
let tokens = trans.getResolveTokens();
let promise = tokens.map(token => trans.injector().getAsync(token));
Promise.all(promises).then(values => console.log("Resolved values: " + values));
Note: Angular 1 users whould use $q.all()
resolve context's path name (e.g., to
or from
)
an array of resolve tokens (keys)
Returns true if the transition is ignored.
Returns true if the transition is ignored.
A transition is ignored if no states are entered nor exited, and no parameter values have changed.
true if the Transition is ignored.
Creates a UIInjector Dependency Injector
Creates a UIInjector Dependency Injector
Returns a Dependency Injector for the Transition's target state (to state). The injector provides resolve values which the target state has access to.
The UIInjector
can also provide values from the native root/global injector (ng1/ng2).
.onEnter({ entering: 'myState' }, trans => {
var myResolveValue = trans.injector().get('myResolve');
// Inject a global service from the global/native injector (if it exists)
var MyService = trans.injector().get('MyService');
})
In some cases (such as onBefore
), you may need access to some resolve data but it has not yet been fetched.
You can use UIInjector.getAsync to get a promise for the data.
.onBefore({}, trans => {
return trans.injector().getAsync('myResolve').then(myResolveValue =>
return myResolveValue !== 'ABORT';
});
});
If a state
is provided, the injector that is returned will be limited to resolve values that the provided state has access to.
This can be useful if both a parent state foo
and a child state foo.bar
have both defined a resolve such as data
.
.onEnter({ to: 'foo.bar' }, trans => {
// returns result of `foo` state's `data` resolve
// even though `foo.bar` also has a `data` resolve
var fooData = trans.injector('foo').get('data');
});
If you need resolve data from the exiting states, pass 'from'
as pathName
.
The resolve data from the from
path will be returned.
.onExit({ exiting: 'foo.bar' }, trans => {
// Gets the resolve value of `data` from the exiting state.
var fooData = trans.injector(null, 'foo.bar').get('data');
});
Limits the resolves provided to only the resolves the provided state has access to.
Default: 'to'
: Chooses the path for which to create the injector. Use this to access resolves for exiting
states.
Determines whether two transitions are equivalent.
Determines whether two transitions are equivalent.
Checks if this transition is currently active/running.
Checks if this transition is currently active/running.
Registers a TransitionStateHookFn, called when a specific state is entered.
Registers a TransitionStateHookFn, called when a specific state is entered.
Registers a lifecycle hook, which is invoked (during a transition) when a specific state is being entered.
Since this hook is run only when the specific state is being entered, it can be useful for performing tasks when entering a submodule/feature area such as initializing a stateful service, or for guarding access to a submodule/feature area.
See TransitionStateHookFn for the signature of the function.
The HookMatchCriteria is used to determine which Transitions the hook should be invoked for.
onEnter
hooks generally specify { entering: 'somestate' }
.
To match all Transitions, use an empty criteria object {}
.
onEnter
hooks are invoked when the Transition is entering a state.
States are entered after the onRetain
phase is complete.
If more than one state is being entered, the parent state is entered first.
The registered onEnter
hooks for a state are invoked in priority order.
Note: A built-in onEnter
hook with high priority is used to fetch lazy resolve data for states being entered.
The hook's return value can be used to pause, cancel, or redirect the current Transition. See HookResult for more information.
Instead of registering onEnter
hooks using the TransitionService, you may define an onEnter
hook
directly on a state declaration (see: StateDeclaration.onEnter).
This example uses a service to log that a user has entered the admin section of an app. This assumes that there are substates of the "admin" state, such as "admin.users", "admin.pages", etc.
$transitions.onEnter({ entering: 'admin' }, function(transition, state) {
var AuditService = trans.injector().get('AuditService');
AuditService.log("Entered " + state.name + " module while transitioning to " + transition.to().name);
}
The onEnter
inside this state declaration is syntactic sugar for the previous Audit Log example.
{
name: 'admin',
component: 'admin',
onEnter: function($transition$, $state$) {
var AuditService = $transition$.injector().get('AuditService');
AuditService.log("Entered " + state.name + " module while transitioning to " + transition.to().name);
}
}
Note: A state declaration's onEnter
function is injected for Angular 1 only.
a function which deregisters the hook.
Registers a TransitionHookFn, called after a transition has errored.
Registers a TransitionHookFn, called after a transition has errored.
Registers a transition lifecycle hook, which is invoked after a transition has been rejected for any reason.
See TransitionHookFn for the signature of the function.
The HookMatchCriteria is used to determine which Transitions the hook should be invoked for.
To match all Transitions, use an empty criteria object {}
.
The onError
hooks are chained off the Transition's promise (see Transition.promise).
If a Transition fails, its promise is rejected and the onError
hooks are invoked.
The onError
hooks are invoked in priority order.
Since these hooks are run after the transition is over, their return value is ignored.
A transition "errors" if it was started, but failed to complete (for any reason). A non-exhaustive list of reasons a transition can error:
Transition superseded
)To check the failure reason, inspect the return value of Transition.error.
Note: onError
should be used for targeted error handling, or error recovery.
For simple catch-all error reporting, use StateService.defaultErrorHandler.
Since the Transition is already completed, the hook's return value is ignored
a function which deregisters the hook.
Registers a TransitionStateHookFn, called when a specific state is exited.
Registers a TransitionStateHookFn, called when a specific state is exited.
Registers a lifecycle hook, which is invoked (during a transition) when a specific state is being exited.
Since this hook is run only when the specific state is being exited, it can be useful for performing tasks when leaving a submodule/feature area such as cleaning up a stateful service, or for preventing the user from leaving a state or submodule until some criteria is satisfied.
See TransitionStateHookFn for the signature of the function.
The HookMatchCriteria is used to determine which Transitions the hook should be invoked for.
onExit
hooks generally specify { exiting: 'somestate' }
.
To match all Transitions, use an empty criteria object {}
.
onExit
hooks are invoked when the Transition is exiting a state.
States are exited after any onStart
phase is complete.
If more than one state is being exited, the child states are exited first.
The registered onExit
hooks for a state are invoked in priority order.
The hook's return value can be used to pause, cancel, or redirect the current Transition. See HookResult for more information.
Instead of registering onExit
hooks using the TransitionService, you may define an onExit
hook
directly on a state declaration (see: StateDeclaration.onExit).
Note: A state declaration's onExit
function is injected for Angular 1 only.
a function which deregisters the hook.
Registers a TransitionHookFn, called just before a transition finishes.
Registers a TransitionHookFn, called just before a transition finishes.
Registers a transition lifecycle hook, which is invoked just before a transition finishes. This hook is a last chance to cancel or redirect a transition.
See TransitionHookFn for the signature of the function.
The HookMatchCriteria is used to determine which Transitions the hook should be invoked for.
To match all Transitions, use an empty criteria object {}
.
onFinish
hooks are invoked after the onEnter
phase is complete.
These hooks are invoked just before the transition is "committed".
Each hook is invoked in priority order.
The hook's return value can be used to pause, cancel, or redirect the current Transition. See HookResult for more information.
a function which deregisters the hook.
Registers a TransitionStateHookFn, called when a specific state is retained/kept.
Registers a TransitionStateHookFn, called when a specific state is retained/kept.
Registers a lifecycle hook, which is invoked (during a transition) for a specific state that was previously active will remain active (is not being entered nor exited).
This hook is invoked when a state is "retained" or "kept". It means the transition is coming from a substate of the retained state to a substate of the retained state. This hook can be used to perform actions when the user moves from one substate to another, such as between steps in a wizard.
The HookMatchCriteria is used to determine which Transitions the hook should be invoked for.
onRetain
hooks generally specify { retained: 'somestate' }
.
To match all Transitions, use an empty criteria object {}
.
onRetain
hooks are invoked after any onExit
hooks have been fired.
If more than one state is retained, the child states' onRetain
hooks are invoked first.
The registered onRetain
hooks for a state are invoked in priority order.
The hook's return value can be used to pause, cancel, or redirect the current Transition. See HookResult for more information.
Instead of registering onRetain
hooks using the TransitionService, you may define an onRetain
hook
directly on a state declaration (see: StateDeclaration.onRetain).
Note: A state declaration's onRetain
function is injected for Angular 1 only.
a function which deregisters the hook.
Registers a TransitionHookFn, called when a transition starts.
Registers a TransitionHookFn, called when a transition starts.
Registers a transition lifecycle hook, which is invoked as a transition starts running. This hook can be useful to perform some asynchronous action before completing a transition.
See TransitionHookFn for the signature of the function.
The HookMatchCriteria is used to determine which Transitions the hook should be invoked for.
To match all Transitions, use an empty criteria object {}
.
onStart
hooks are invoked asynchronously when the Transition starts running.
This happens after the onBefore
phase is complete.
At this point, the Transition has not yet exited nor entered any states.
The registered onStart
hooks are invoked in priority order.
Note: A built-in onStart
hook with high priority is used to fetch any eager resolve data.
The hook's return value can be used to pause, cancel, or redirect the current Transition. See HookResult for more information.
This example intercepts any transition to a state which requires authentication, when the user is not currently authenticated. It allows the user to authenticate asynchronously, then resumes the transition. If the user did not authenticate successfully, it redirects to the "guest" state, which does not require authentication.
This example assumes:
'auth'
state.MyAuthService.isAuthenticated()
synchronously returns a boolean.MyAuthService.authenticate()
presents a login dialog, and returns a promise which is resolved
or rejected, whether or not the login attempt was successful.// ng1
$transitions.onStart( { to: 'auth.**' }, function(trans) {
var $state = trans.router.stateService;
var MyAuthService = trans.injector().get('MyAuthService');
// If the user is not authenticated
if (!MyAuthService.isAuthenticated()) {
// Then return a promise for a successful login.
// The transition will wait for this promise to settle
return MyAuthService.authenticate().catch(function() {
// If the authenticate() method failed for whatever reason,
// redirect to a 'guest' state which doesn't require auth.
return $state.target("guest");
});
}
});
a function which deregisters the hook.
Registers a TransitionHookFn, called after a successful transition completed.
Registers a TransitionHookFn, called after a successful transition completed.
Registers a transition lifecycle hook, which is invoked after a transition successfully completes.
See TransitionHookFn for the signature of the function.
The HookMatchCriteria is used to determine which Transitions the hook should be invoked for.
To match all Transitions, use an empty criteria object {}
.
onSuccess
hooks are chained off the Transition's promise (see Transition.promise).
If the Transition is successful and its promise is resolved, then the onSuccess
hooks are invoked.
Since these hooks are run after the transition is over, their return value is ignored.
The onSuccess
hooks are invoked in priority order.
Since the Transition is already completed, the hook's return value is ignored
a function which deregisters the hook.
Get the transition options
Get the transition options
the options for this Transition.
Gets the original transition in a redirect chain
Gets the original transition in a redirect chain
A transition might belong to a long chain of multiple redirects. This method walks the redirectedFrom chain back to the original (first) transition in the chain.
// states
registry.register({ name: 'A', redirectTo: 'B' });
registry.register({ name: 'B', redirectTo: 'C' });
registry.register({ name: 'C', redirectTo: 'D' });
registry.register({ name: 'D' });
let transitionA = $state.go('A').transition
$transitions.onSuccess({ to: 'D' }, (trans) => {
trans.to().name === 'D'; // true
trans.redirectedFrom().to().name === 'C'; // true
trans.originalTransition() === transitionA; // true
trans.originalTransition().to().name === 'A'; // true
});
The original Transition that started a redirect chain
Gets transition parameter values
Gets transition parameter values
Returns the parameter values for a transition as key/value pairs. This object is immutable.
By default, returns the new parameter values (for the "to state").
var toParams = transition.params();
To return the previous parameter values, supply 'from'
as the pathname
argument.
var fromParams = transition.params('from');
('to'
, 'from'
, 'entering'
, 'exiting'
, 'retained'
)
the name of the treeChanges path to get parameter values for:
transition parameter values for the desired path.
Creates a new transition that is a redirection of the current one.
Creates a new transition that is a redirection of the current one.
This transition can be returned from a TransitionService hook to redirect a transition to a new state and/or set of parameters.
Returns a new Transition instance.
Gets the transition from which this transition was redirected.
Gets the transition from which this transition was redirected.
If the current transition is a redirect, this method returns the transition that was redirected.
let transitionA = $state.go('A').transition
transitionA.onStart({}, () => $state.target('B'));
$transitions.onSuccess({ to: 'B' }, (trans) => {
trans.to().name === 'B'; // true
trans.redirectedFrom() === transitionA; // true
});
The previous Transition, or null if this Transition is not the result of a redirection
Gets the states being retained.
Gets the states being retained.
exited during this Transition
an array of states that are already entered from a previous Transition, that will not be
Runs the transition
Runs the transition
This method is generally called from the StateService.transitionTo
a promise for a successful transition.
Gets the Target State
Gets the Target State
A transition's TargetState encapsulates the to state, the params, and the options as a single object.
the TargetState of this Transition
Returns the "to state"
Returns the "to state"
Returns the state that the transition is going to.
The state declaration object for the Transition's target state ("to state").
A string representation of the Transition
A string representation of the Transition
A string representation of the Transition
Return the transition's tree changes
Return the transition's tree changes
A transition goes from one state/parameters to another state/parameters. During a transition, states are entered and/or exited.
This function returns various branches (paths) which represent the changes to the active state tree that are caused by the transition.
('to'
, 'from'
, 'entering'
, 'exiting'
, 'retained'
)
The name of the tree changes path to get:
Checks if the Transition is valid
Checks if the Transition is valid
true if the Transition is valid
Get the ViewConfigs associated with this Transition
Get the ViewConfigs associated with this Transition
Each state can define one or more views (template/controller), which are encapsulated as ViewConfig
objects.
This method fetches the ViewConfigs
for a given path in the Transition (e.g., "to" or "entering").
('to'
, 'from'
, 'entering'
, 'exiting'
, 'retained'
)
the name of the path to fetch views for:
If provided, only returns the ViewConfig
s for a single state in the path
a list of ViewConfig objects for the given path.
Generated using TypeDoc
Represents a transition between two states.
When navigating to a state, we are transitioning from the current state to the new state.
This object contains all contextual information about the to/from states, parameters, resolves. It has information about all states being entered and exited as a result of the transition.