The current State
This is a passthrough through to UIRouterGlobals.$current
The current StateDeclaration
This is a passthrough through to UIRouterGlobals.current
The latest successful state parameters
This is a passthrough through to UIRouterGlobals.params
The Transition currently in progress (or null)
This is a passthrough through to UIRouterGlobals.transition
Handler for when transitionTo is called with an invalid state.
Handler for when transitionTo is called with an invalid state.
Invokes the onInvalid callbacks, in natural order. Each callback's return value is checked in sequence until one of them returns an instance of TargetState. The results of the callbacks are wrapped in $q.when(), so the callbacks may return promises.
If a callback returns an TargetState, then it is used as arguments to $state.transitionTo() and the result returned.
Sets or gets the default transitionTo error handler.
Sets or gets the default transitionTo error handler.
The error handler is called when a Transition is rejected or when any error occurred during the Transition. This includes errors caused by resolves and transition hooks.
Note: This handler does not receive certain Transition rejections. Redirected and Ignored Transitions are not considered to be errors by StateService.transitionTo.
The built-in default error handler logs the error to the console.
You can provide your own custom handler.
stateService.defaultErrorHandler(function() {
// Do not log transitionTo errors
});
a global error handler function
the current global error handler
Gets a registered StateDeclaration object
Gets a registered StateDeclaration object
Returns the state declaration object for any specific state, or for all registered states.
a StateDeclaration object (or array of all registered StateDeclaration objects.)
Transition to a different state or parameters
Transition to a different state or parameters
Convenience method for transitioning to a new state.
$state.go
calls $state.transitionTo
internally but automatically sets options to
{ location: true, inherit: true, relative: $state.$current, notify: true }
.
This allows you to easily use an absolute or relative to path and specify
only the parameters you'd like to update (while letting unspecified parameters
inherit from the currently active ancestor states).
let app = angular.module('app', ['ui.router']);
app.controller('ctrl', function ($scope, $state) {
$scope.changeState = function () {
$state.go('contact.detail');
};
});
Absolute state name, state object, or relative state path. Some examples:
$state.go('contact.detail')
- will go to the contact.detail
state$state.go('^')
- will go to a parent state$state.go('^.sibling')
- will go to a sibling state$state.go('.child.grandchild')
- will go to grandchild stateA map of the parameters that will be sent to the state, will populate $stateParams.
Any parameters that are not specified will be inherited from currently defined parameters (because of inherit: true
).
This allows, for example, going to a sibling state that shares parameters specified in a parent state.
Parameter inheritance only works between common ancestor states, I.e. transitioning to a sibling will get you the parameters for all parents, transitioning to a child will get you all current parameters, etc.
Transition options
A promise representing the state of the new transition.
Possible success values:
Possible rejection reasons:
false
Generates a URL for a state and parameters
Generates a URL for a state and parameters
Returns the url for the given state populated with the given params.
expect($state.href("about.person", { person: "bob" })).toEqual("/about/bob");
The state name or state object you'd like to generate a url from.
An object of parameter values to fill the state's required parameters.
Options object. The options are:
lossy
- {boolean=true} - If true, and if there is no url associated with the state provided in the
first parameter, then the constructed href url will be built from the first navigable ancestor (aka
ancestor with a valid url).inherit
- {boolean=true}, If true
will inherit url parameters from current url.relative
- {object=$state.$current}, When transitioning with relative path (e.g '^'),
defines which state to be relative from.absolute
- {boolean=false}, If true will generate an absolute url, e.g. "http://www.example.com/fullurl".compiled state url
Checks if the current state includes the provided state
Checks if the current state includes the provided state
A method to determine if the current active state is equal to or is the child of the state stateName. If any params are passed then they will be tested for a match as well. Not all the parameters need to be passed, just the ones you'd like to test for equality.
$state.$current.name === 'contacts.details.item'
// Using partial names
$state.includes("contacts"); // returns true
$state.includes("contacts.details"); // returns true
$state.includes("contacts.details.item"); // returns true
$state.includes("contacts.list"); // returns false
$state.includes("about"); // returns false
* $state.$current.name === 'contacts.details.item.url'
:$state.includes("*.details.*.*"); // returns true
$state.includes("*.details.**"); // returns true
$state.includes("**.item.**"); // returns true
$state.includes("*.details.item.url"); // returns true
$state.includes("*.details.*.url"); // returns true
$state.includes("*.details.*"); // returns false
$state.includes("item.**"); // returns false
A partial name, relative name, glob pattern, or state object to be searched for within the current state name.
A param object, e.g. {sectionId: section.id}
,
that you'd like to test against the current active state.
An options object. The options are:
relative
: If stateOrName
is a relative state name and options.relative
is set, .is will
test relative to options.relative
state (or name).Returns true if it does include the state
Checks if the current state is the provided state
Checks if the current state is the provided state
Similar to includes but only checks for the full state name. If params is supplied then it will be tested for strict equality against the current active params object, so all params must match with none missing and no extras.
$state.$current.name = 'contacts.details.item';
// absolute name
$state.is('contact.details.item'); // returns true
$state.is(contactDetailItemStateObject); // returns true
// relative name (. and ^), typically from a template // E.g. from the 'contacts.details' template
<div ng-class="{highlighted: $state.is('.item')}">Item</div>
The state name (absolute or relative) or state object you'd like to check.
A param object, e.g. {sectionId: section.id}
, that you'd like
to test against the current active state.
An options object. The options are:
relative
: If stateOrName
is a relative state name and options.relative
is set, .is will
test relative to options.relative
state (or name).Returns true if it is the state.
Lazy loads a state
Lazy loads a state
Explicitly runs a state's StateDeclaration.lazyLoad function.
the state that should be lazy loaded
the optional Transition context to use (if the lazyLoad function requires an injector, etc) Note: If no transition is provided, a noop transition is created using the from the current state to the current state. This noop transition is not actually run.
a promise to lazy load
Registers an Invalid State handler
Registers an Invalid State handler
Registers a OnInvalidCallback function to be invoked when StateService.transitionTo has been called with an invalid state reference parameter
Example:
stateService.onInvalid(function(to, from, injector) {
if (to.name() === 'foo') {
let lazyLoader = injector.get('LazyLoadService');
return lazyLoader.load('foo')
.then(() => stateService.target('foo'));
}
});
invoked when the toState is invalid This function receives the (invalid) toState, the fromState, and an injector. The function may optionally return a TargetState or a Promise for a TargetState. If one is returned, it is treated as a redirect.
a function which deregisters the callback
Reloads the current state
Reloads the current state
A method that force reloads the current state, or a partial state hierarchy. All resolves are re-resolved, and components reinstantiated.
let app angular.module('app', ['ui.router']);
app.controller('ctrl', function ($scope, $state) {
$scope.reload = function(){
$state.reload();
}
});
Note: reload()
is just an alias for:
$state.transitionTo($state.current, $state.params, {
reload: true, inherit: false
});
A state name or a state object. If present, this state and all its children will be reloaded, but ancestors will not reload.
//assuming app application consists of 3 states: 'contacts', 'contacts.detail', 'contacts.detail.item'
//and current state is 'contacts.detail.item'
let app angular.module('app', ['ui.router']);
app.controller('ctrl', function ($scope, $state) {
$scope.reload = function(){
//will reload 'contact.detail' and nested 'contact.detail.item' states
$state.reload('contact.detail');
}
});
A promise representing the state of the new transition. See StateService.go
Creates a TargetState
Creates a TargetState
This is a factory method for creating a TargetState
This may be returned from a Transition Hook to redirect a transition, for example.
Low-level method for transitioning to a new state.
Low-level method for transitioning to a new state.
The go method (which uses transitionTo
internally) is recommended in most situations.
let app = angular.module('app', ['ui.router']);
app.controller('ctrl', function ($scope, $state) {
$scope.changeState = function () {
$state.transitionTo('contact.detail');
};
});
State name or state object.
A map of the parameters that will be sent to the state, will populate $stateParams.
Transition options
A promise representing the state of the new transition. See go
Generated using TypeDoc
Provides state related service functions
This class provides services related to ui-router states. An instance of this class is located on the global UIRouter object.