$urlRouterProvider
ui.router.router
$urlRouterProvider
has the responsibility of watching $location
.
When $location
changes it runs through a list of rules one by one until a
match is found. $urlRouterProvider
is used behind the scenes anytime you specify
a url in a state configuration. All urls are compiled into a UrlMatcher object.
There are several methods on $urlRouterProvider
that make it useful to use directly
in your module config.
Disables (or enables) deferring location change interception.
If you wish to customize the behavior of syncing the URL (for example, if you wish to
defer a transition but maintain the current URL), call this method at configuration time.
Then, at run time, call $urlRouter.listen()
after you have configured your own
$locationChangeSuccess
event handler.
Param | Type | Details |
---|---|---|
defer | boolean | Indicates whether to defer location change interception. Passing
no parameter is equivalent to |
var app = angular.module('app', ['ui.router.router']); app.config(function ($urlRouterProvider) { // Prevent $urlRouter from automatically intercepting URL changes; // this allows you to configure custom behavior in between // location changes and route synchronization: $urlRouterProvider.deferIntercept(); }).run(function ($rootScope, $urlRouter, UserService) { $rootScope.$on('$locationChangeSuccess', function(e) { // UserService is an example service for managing user state if (UserService.isLoggedIn()) return; // Prevent $urlRouter's default handler from firing e.preventDefault(); UserService.handleLogin().then(function() { // Once the user has logged in, sync the current URL // to the router: $urlRouter.sync(); }); }); // Configures $urlRouter's listener *after* your custom listener $urlRouter.listen(); });
Defines a path that is used when an invalid route is requested.
Param | Type | Details |
---|---|---|
rule | stringfunction | The url path you want to redirect to or a function
rule that returns the url path. The function version is passed two params:
|
object |
|
var app = angular.module('app', ['ui.router.router']); app.config(function ($urlRouterProvider) { // if the path doesn't match any of the urls you configured // otherwise will take care of routing the user to the // specified url $urlRouterProvider.otherwise('/index'); // Example of using function rule as param $urlRouterProvider.otherwise(function ($injector, $location) { return '/a/valid/url'; }); });
Defines rules that are used by $urlRouterProvider
to find matches for
specific URLs.
Param | Type | Details |
---|---|---|
rule | function | Handler function that takes |
object |
|
var app = angular.module('app', ['ui.router.router']); app.config(function ($urlRouterProvider) { // Here's an example of how you might allow case insensitive urls $urlRouterProvider.rule(function ($injector, $location) { var path = $location.path(), normalized = path.toLowerCase(); if (path !== normalized) { return normalized; } }); });
Registers a handler for a given url matching.
If the handler is a string, it is
treated as a redirect, and is interpolated according to the syntax of match
(i.e. like String.replace()
for RegExp
, or like a UrlMatcher
pattern otherwise).
If the handler is a function, it is injectable. It gets invoked if $location
matches. You have the option of inject the match object as $match
.
The handler can return
$urlRouter
will continue trying to find another one that matches.$location.url()
$urlRouter
that the url was handled.Param | Type | Details |
---|---|---|
what | stringobject | The incoming path that you want to redirect. |
handler | stringfunction | The path you want to redirect your user to. |
var app = angular.module('app', ['ui.router.router']); app.config(function ($urlRouterProvider) { $urlRouterProvider.when($state.url, function ($match, $stateParams) { if ($state.$current.navigable !== state || !equalForKeys($match, $stateParams) { $state.transitionTo(state, $match, false); } }); });