UI-Router

https://ui-router.github.io
Admin
UI-Router is a client-side routing framework for single-page web applications, providing state-based...
Tokens:109,839
Snippets:1,357
Trust Score:8.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Define initial application state or path

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_url_urlrules.urlrules.html

Configures the starting behavior when the application loads at the root URL. These examples demonstrate setting the initial state, a URL path, or using a custom handler function.

```javascript
.initial({ state: 'home' });
```

```javascript
.initial('/home');
```

```javascript
.initial((matchValue, url, router) => {
  console.log('initial state');
  return { state: 'home' };
})
```

--------------------------------

### Template and rendered output examples

Source: https://ui-router.github.io/ng1/docs/latest/modules/directives.html

Example of template structure and the resulting rendered HTML with hrefs.

```html
<a ui-sref="home">Home</a>
<a ui-sref="about">About</a>
<a ui-sref="{page: 2}">Next page</a>

<ul>
    <li ng-repeat="contact in contacts">
        <a ui-sref="contacts.detail({ id: contact.id })"></a>
    </li>
</ul>
```

```html
<a href="#/home" ui-sref="home">Home</a>
<a href="#/about" ui-sref="about">About</a>
<a href="#/contacts?page=2" ui-sref="{page: 2}">Next page</a>

<ul>
    <li ng-repeat="contact in contacts">
        <a href="#/contacts/1" ui-sref="contacts.detail({ id: contact.id })">Joe</a>
    </li>
    <li ng-repeat="contact in contacts">
        <a href="#/contacts/2" ui-sref="contacts.detail({ id: contact.id })">Alice</a>
    </li>
    <li ng-repeat="contact in contacts">
        <a href="#/contacts/3" ui-sref="contacts.detail({ id: contact.id })">Bob</a>
    </li>
</ul>

<a href="#/home" ui-sref="home" ui-sref-opts="{reload: true}">Home</a>
```

--------------------------------

### Install UI-Router dependencies

Source: https://ui-router.github.io/tutorial/ng1/helloworld

Commands to install the UI-Router library via npm or bower.

```bash
npm install --save @uirouter/angularjs
```

```bash
bower install angular-ui-router
```

--------------------------------

### Configure Eager Resolve Policies

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/resolve.resolvepolicy.html

Example of setting the 'when' policy to EAGER to fetch resolves at the start of a transition.

```javascript
var mainState = {
  name: 'main',
  resolve: mainResolves, // defined elsewhere
  resolvePolicy: { when: 'EAGER' },
}

homeState = {
  name: 'main.home',
  resolve: homeResolves, // defined elsewhere
  resolvePolicy: { when: 'EAGER' },
}
```

--------------------------------

### Resolvable configuration examples

Source: https://ui-router.github.io/ng1/docs/latest/modules/state.html

Examples of how the resolve property can be defined using objects or arrays of Resolvable instances.

```javascript
{ // analyzed but not injected myFooResolve: function() { return "myFooData"; },
// function.toString() parsed, "DependencyName" dep as string (not min-safe) myBarResolve: function(DependencyName) { return DependencyName.fetchSomethingAsPromise() },
// Array split; "DependencyName" dep as string myBazResolve: [ "DependencyName", function(dep) { return dep.fetchSomethingAsPromise() },
// Array split; DependencyType dep as token (compared using ===) myQuxResolve: [ DependencyType, function(dep) { return dep.fetchSometingAsPromise() },
// val.$inject used as deps // where: // corgeResolve.$inject = ["DependencyName"]; // function corgeResolve(dep) { dep.fetchSometingAsPromise() } // then "DependencyName" dep as string myCorgeResolve: corgeResolve,
// inject service by name // When a string is found, desugar creating a resolve that injects the named service myGraultResolve: "SomeService" }
```

```javascript
[ new Resolvable("myFooResolve", function() { return "myFooData" }), new Resolvable("myBarResolve", function(dep) { return dep.fetchSomethingAsPromise() }, [ "DependencyName" ]), { provide: "myBazResolve", useFactory: function(dep) { dep.fetchSomethingAsPromise() }, deps: [ "DependencyName" ] } ]
```

--------------------------------

### start(): void

Source: https://ui-router.github.io/react/docs/latest/classes/_core_.uirouterreact.html

Initializes the router and begins listening for URL changes.

```APIDOC
### start(): void

#### Description
Starts the router. Calling this method enables listening to the URL for changes and performs the initial state synchronization from the URL.

#### Returns
- **void**
```

--------------------------------

### Install UI-Router for Angular

Source: https://ui-router.github.io/ng2

Commands to install the UI-Router package and its peer dependencies.

```bash
npm install @uirouter/angular
npx check-peer-dependencies --install
```

--------------------------------

### onStart

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_transition_transition.transition.html

Registers a hook invoked at the start of a transition.

```APIDOC
## onStart(criteria: HookMatchCriteria, callback: TransitionHookFn, options?: HookRegOptions): Function

### Description
Registers a lifecycle hook that is invoked at the beginning of a transition.

### Parameters
- **criteria** (HookMatchCriteria) - Required - Defines which Transitions the Hook should be invoked for.
- **callback** (TransitionHookFn) - Required - The hook function which will be injected and invoked.
- **options** (HookRegOptions) - Optional - Configuration options for the hook registration.

### Returns
- **Function** - A function which deregisters the hook.
```

--------------------------------

### onStart(criteria, callback, options)

Source: https://ui-router.github.io/ng1/docs/latest/classes/transition.transitionservice.html

Registers a TransitionHookFn, called when a transition starts.

```APIDOC
## onStart(criteria: HookMatchCriteria, callback: TransitionHookFn, options?: HookRegOptions): Function

### Description
Registers a TransitionHookFn, called when a transition starts.

### Parameters
- **criteria** (HookMatchCriteria) - Required - Used to determine which Transitions the hook should be invoked for.
- **callback** (TransitionHookFn) - Required - The function to be invoked.
- **options** (HookRegOptions) - Optional - Configuration options for the hook registration.

### Returns
- **Function** - A function which deregisters the hook.
```

--------------------------------

### Setup Development Environment

Source: https://ui-router.github.io/ng2

Steps to clone the core and angular repositories and link them for local development.

```bash
mkdir uirouter
cd uirouter
git clone https://github.com/ui-router/angular
git clone https://github.com/ui-router/core
cd core
npm install
npm link
npm run build

cd ../angular
npm install
npm link @uirouter/core
npm run build
```

--------------------------------

### views()

Source: https://ui-router.github.io/ng1/docs/latest/classes/transition.transition-1.html

Get the ViewConfigs associated with this Transition.

```APIDOC
### Method
views(pathname?: string, state?: StateObject): ViewConfig[]

### Description
Fetches the ViewConfigs for a given path in the Transition (e.g., 'to' or 'entering').

### Parameters
- **pathname** (string) - Optional - The name of the path to fetch views for ('to', 'from', 'entering', 'exiting', 'retained'). Default: 'entering'.
- **state** (StateObject) - Optional - If provided, only returns the ViewConfigs for a single state in the path.

### Returns
- **ViewConfig[]** - A list of ViewConfig objects for the given path.
```

--------------------------------

### get

Source: https://ui-router.github.io/react/docs/latest/interfaces/_uirouter_core_common_coreservices._injectorlike.html

Retrieves a service or dependency by its token.

```APIDOC
## get(token: any): any

### Description
Retrieves a service or dependency by its token.

### Parameters
- **token** (any) - Required - The token identifying the dependency.

### Returns
- **any** - The resolved dependency.
```

--------------------------------

### Build and Link UI-Router Core

Source: https://ui-router.github.io/react

Install dependencies, link the package, and build the core library.

```bash
cd ui-router-core
npm install
npm link
npm run build
```

--------------------------------

### Configure Async Resolve Policies

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/resolve.resolvepolicy.html

Example demonstrating how to set different async policies for parent and child states.

```javascript
var mainState = {
  name: 'main',
  resolve: mainResolves, // defined elsewhere
  resolvePolicy: { async: 'NOWAIT' },
}
var homeState = {
  name: 'main.home',
  resolve: homeResolves, // defined elsewhere
  resolvePolicy: { async: 'WAIT' }, // default
}
```

--------------------------------

### Configuring State Parameters

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/ng1._ng1statedeclaration.html

Example of defining parameter configurations within a state declaration.

```javascript
params: {
  param1: {
   type: "int",
   array: true,
   value: []
  },
  param2: {
    value: "index"
  }
}
```

--------------------------------

### Initialize UI-Router React Application

Source: https://ui-router.github.io/react/tutorial/helloworld

Basic setup including imports for UIRouter, UIView, and location plugins.

```javascript
import React from 
"react";
import ReactDOM 
from "react-dom";
import { UIRouter, 
UIView, 
useSrefActive, 
pushStateLocationPl
ugin } from 
"@uirouter/react";
import("./style.
css");
const Hello = () 
=> <h3>hello 
world</h3>;
```

--------------------------------

### Install specific version via npm

Source: https://ui-router.github.io/ng1

Install a specific version of the UI-Router package.

```bash
npm install --save @uirouter/angularjs@1.0.7
```

--------------------------------

### get(token: any): any

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/common._injectorlike.html

Retrieves a service instance from the injector.

```APIDOC
### Method
get(token: any): any

### Description
Retrieves a service instance from the injector based on the provided token.

### Parameters
- **token** (any) - Required - The token identifying the service.

### Returns
- **any** - The service instance.
```

--------------------------------

### onStart(matchCriteria, callback, options)

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/transition.ihookregistry.html

Registers a transition lifecycle hook invoked when a transition starts running, after the onBefore phase. This is useful for performing asynchronous actions like fetching resolve data or authentication.

```APIDOC
## onStart(matchCriteria, callback, options)

### Description
Registers a transition lifecycle hook, which is invoked as a transition starts running. This hook can be used to pause, cancel, or redirect the current transition.

### Parameters
- **matchCriteria** (HookMatchCriteria) - Required - Defines which transitions the hook should be invoked for.
- **callback** (TransitionHookFn) - Required - The hook function which will be injected and invoked.
- **options** (HookRegOptions) - Optional - Configuration options for the hook registration.

### Returns
- **Function** - A function which deregisters the hook.
```

--------------------------------

### Configure Transition Options

Source: https://ui-router.github.io/ng2/docs/latest/classes/_src_directives_uisref_.uisref.html

Example of passing transition options like reload to the uiSref directive.

```html
<a uiSref="books" [uiOptions]="{ reload: true }">Book </a>
```

--------------------------------

### onBefore

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/transition.ihookregistry.html

Registers a hook to be called before a transition starts.

```APIDOC
## onBefore(matchCriteria: HookMatchCriteria, callback: TransitionHookFn, options?: HookRegOptions)

### Description
Registers a TransitionHookFn, called before a transition starts. This hook is useful for logic that prevents a transition from starting, such as authentication or redirection.

### Parameters
- **matchCriteria** (HookMatchCriteria) - Criteria to determine which transitions trigger this hook.
- **callback** (TransitionHookFn) - The function to execute.
- **options** (HookRegOptions) - Optional registration settings.

### Returns
- **Function** - A deregistration function.
```

--------------------------------

### Install UI-Router via bower

Source: https://ui-router.github.io/ng1

Use bower to manage UI-Router dependencies.

```bash
bower install angular-ui-router
```

```bash
bower install angular-ui-router#1.0.7
```

```bash
bower install angular-ui-router#0.3.1
```

--------------------------------

### onStart(criteria, callback, options)

Source: https://ui-router.github.io/ng1/docs/latest/classes/transition.transitionservice.html

Registers a TransitionHookFn that is invoked when a transition starts running, after the onBefore phase. This hook can be used to perform asynchronous actions, pause, cancel, or redirect the transition.

```APIDOC
## onStart(criteria, callback, options)

### Description
Registers a transition lifecycle hook invoked when a transition starts. The hook can return a promise to pause the transition or a TargetState to redirect it.

### Parameters
- **criteria** (HookMatchCriteria) - Required - Defines which transitions trigger this hook.
- **callback** (TransitionHookFn) - Required - The function to execute when the hook is triggered.
- **options** (HookRegOptions) - Optional - Configuration options for the hook registration.

### Returns
- **Function** - A deregistration function that removes the hook.
```

--------------------------------

### initial(handler)

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_url_urlrules.urlrules.html

Defines the initial state, path, or behavior to use when the app starts. This rule is triggered only when the URL matches '' or '/'.

```APIDOC
## initial(handler)

### Description
Defines the initial state, path, or behavior to use when the app starts. This rule is triggered the first time the URL is checked (when the app initially loads) if the URL matches '' or '/'.

### Parameters
- **handler** (string | UrlRuleHandlerFn | TargetState | TargetStateDef) - Required - The initial state, url path, or a function that returns the state/path or performs custom logic.

### Returns
- **void**
```

--------------------------------

### Link Core to React Repository

Source: https://ui-router.github.io/react

Install dependencies in the react repository and link the local core build.

```bash
cd ../ui-router-react
npm install
npm link ui-router-core
```

--------------------------------

### Configuring Named Views

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html

Examples of defining multiple named views and targeting specific ui-view elements.

```javascript
views: {
  header: {
    controller: "headerCtrl",
    templateUrl: "header.html"
  }, body: {
    controller: "bodyCtrl",
    templateUrl: "body.html"
  }, footer: {
    controller: "footCtrl",
    templateUrl: "footer.html"
  }
}
```

```javascript
// Targets named ui-view="header" from ancestor state 'top''s template, and
// named `ui-view="body" from parent state's template.
views: {
  'header@top': {
    controller: "msgHeaderCtrl",
    templateUrl: "msgHeader.html"
  }, 'body': {
    controller: "messagesCtrl",
    templateUrl: "messages.html"
  }
}
```

--------------------------------

### Manual UIRouter Setup

Source: https://ui-router.github.io/react/docs/latest/modules/_components_uirouter_.html

Manually instantiate and configure the UIRouter before passing it to the component. This approach requires manual registration of plugins and states.

```jsx
const router = new UIRouterReact();
// activate plugins
router.plugin(servicesPlugin);
router.plugin(pushStateLocationPlugin);
// register states
router.stateRegistry.register(someState);
// start the router
router.start();

ReactDOM.render(
  <UIRouter router={router}>
    <UIView />
  </UIRouter>,
  document.getElementById("root")
);
```

--------------------------------

### Initialize Angular application imports

Source: https://ui-router.github.io/ng2/tutorial/hellosolarsystem

Initial setup of Angular modules and platform browser dynamic imports for the Hello Solar System application.

```typescript
import "./
polyfills";
import { NgModule, 
Component } from 
"@angular/core";
import { 
HttpClientModule } 
from '@angular/
common/http';
import { 
BrowserModule } 
from "@angular/
platform-browser";
import { 
platformBrowserDyna
mic } from 
"@angular/
platform-browser-dy
namic";
import { 
```

--------------------------------

### Define view templates

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/ng1.ng1viewdeclaration.html

Examples of defining templates as static strings or dynamic functions.

```javascript
template: "<h1>inline template definition</h1><div ui-view></div>"
```

```javascript
template: function(params) {
  return "<h1>generated template</h1>";
}
```

--------------------------------

### Configure multiple views

Source: https://ui-router.github.io/ng1/docs/latest/modules/directives.html

Setup multiple named views within a single template.

```html
<div ui-view></div>
<div ui-view="chart"></div>
<div ui-view="data"></div>
```

```javascript
$stateProvider.state("home", {
  views: {
    "": {
      template: "<h1>HELLO!</h1>"
    },
    "chart": {
      template: "<chart_thing/>"
    },
    "data": {
      template: "<data_thing/>"
    }
  }
})
```

--------------------------------

### Configure UI-Router Module

Source: https://ui-router.github.io/ng2/docs/latest/interfaces/_src_uirouterngmodule_.statesmodule.html

Example of defining a configuration function to register hooks and types, and how to provide it to the UIRouterModule.

```typescript
import { Injector } from "@angular/core";
import { UIRouter } from "@uirouter/angular";
import { requireAuthHook } from "./requireAuthHook";
import { MyService } from "./myService";

export function configureMyModule(uiRouter: UIRouter, injector: Injector, module: StatesModule) {
  // Get UIRouter services off the UIRouter object
  let urlConfig = uiRouter.urlService.config;
  let transitionService = uiRouter.transitionService;
  uiRouter.trace.enable("TRANSITION");

  transitionService.onBefore({ to: (state) => state.requiresAuth }, requireAuthHook);

  // Create a slug type based on the string type
  let builtInStringType = urlConfig.type('string');
  let slugType = Object.assign({}, builtInStringType, { encode: (str) => str, decode: (str) => str });
  urlConfig.type('slug', slugType);

  // Inject arbitrary services from DI using the Injector argument
  let myService: MyService = injector.get(MyService)
  myService.useFastMode();
}
```

```typescript
@NgModule({
  imports: [
    UIRouterModule.forChild({ states: STATES, config: configureMyModule });
  ]
})
class MyModule {}
```

--------------------------------

### Install UI-Router via npm

Source: https://ui-router.github.io/ng1

Use npm to add the UI-Router package to your project dependencies.

```bash
npm install --save @uirouter/angularjs
```

--------------------------------

### Registering a Transition Hook

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_transition_transitionservice.transitionservice.html

Example of handling authentication failure by redirecting to a guest state within a transition hook.

```javascript
// If the authenticate() method failed for whatever reason,
      // redirect to a 'guest' state which doesn't require auth.
      return $state.target("guest");
    });
  }
});
```

--------------------------------

### Retrieve values using get()

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/core.uiinjector.html

Demonstrates retrieving values from the injector synchronously. Note that if a resolve has not been fetched, this will throw an error.

```javascript
var myResolve = injector.get('myResolve');
```

```javascript
// Fetch StateService
injector.get('$state').go('home');
```

```typescript
import {StateService} from "ui-router-ng2";
// Fetch StateService
injector.get(StateService).go('home');
```

```typescript
var stringArray = injector.get<string[]>('myStringArray');
```

--------------------------------

### Configure Lazy Resolve Policies

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/resolve.resolvepolicy.html

Example of setting the 'when' policy to LAZY for state resolves.

```javascript
var state = {
  name: 'main',
  resolve: mainResolves, // defined elsewhere
  resolvePolicy: { when: 'LAZY' }, // default
}

var state = {
  name: 'main.home',
  resolve: homeResolves, // defined elsewhere
  resolvePolicy: { when: 'LAZY' }, // default
}
```

--------------------------------

### Configure State Redirection

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/ng1._ng1statedeclaration.html

Examples of using the redirectTo property to handle state transitions via strings, objects, or functions.

```javascript
// a string
.state('A', {
  redirectTo: 'A.B'
})

// a {state, params} object
.state('C', {
  redirectTo: { state: 'C.D', params: { foo: 'index' } }
})

// a fn
.state('E', {
  redirectTo: () => "A"
})

// a fn conditionally returning a {state, params}
.state('F', {
  redirectTo: (trans) => {
    if (trans.params().foo < 10)
      return { state: 'F', params: { foo: 10 } };
  }
})

// a fn returning a promise for a redirect
.state('G', {
  redirectTo: (trans) => {
    let svc = trans.injector().get('SomeAsyncService')
    let promise = svc.getAsyncRedirectTo(trans.params.foo);
    return promise;
  }
})

// a fn that fetches resolve data
.state('G', {
  redirectTo: (trans) => {
    // getAsync tells the resolve to load
    let resolvePromise = trans.injector().getAsync('SomeResolve')
    return resolvePromise.then(resolveData => resolveData === 'login' ? 'login' : null);
  }
})
```

--------------------------------

### Configure RXWAIT Policy

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/resolve.resolvepolicy.html

Example of using the RXWAIT policy from @uirouter/rx to handle Observable emissions.

```javascript
// Wait for an Observable to emit one item.
// Since `wait` is not specified, it uses the `wait`
// policy defined on the state, or the global default
// if no `wait` policy is defined on the state
import { RXWAIT } from '@uirouter/rx';

var myResolvablePolicy = { async: RXWAIT }
```

--------------------------------

### Define view components

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/ng1.ng1viewdeclaration.html

Examples of defining views using the component property, including shorthand syntax for named views.

```javascript
.state('profile', {
  // Use the <my-profile></my-profile> component for the Unnamed view
  component: 'MyProfile',
}

.state('messages', {
  // use the <nav-bar></nav-bar> component for the view named 'header'
  // use the <message-list></message-list> component for the view named 'content'
  views: {
    header: { component: 'NavBar' },
    content: { component: 'MessageList' }
  }
}

.state('contacts', {
  // Inside a "views:" block, a bare string "NavBar" is shorthand for { component: "NavBar" }
  // use the <nav-bar></nav-bar> component for the view named 'header'
  // use the <contact-list></contact-list> component for the view named 'content'
  views: {
    header: 'NavBar',
    content: 'ContactList'
  }
}
```

--------------------------------

### Register URL Redirects

Source: https://ui-router.github.io/ng1/docs/latest/classes/url.urlrules.html

Examples of registering URL rules using different matcher and handler types.

```javascript
.when("/foo/:param1", "/bar/:param1")
```

```javascript
.when(new RegExp("^/foo/(.*)$"), "/bar/$1");
```

```javascript
.when(new RegExp("^/foo/(.*)$"), match => "/bar/" + match[1]);
```

--------------------------------

### Set up UI-Router development environment

Source: https://ui-router.github.io/ng1

Commands to clone the repository and build the project locally.

```bash
mkdir uirouter
cd uirouter
git clone https://github.com/angular-ui/ui-router angularjs
git clone https://github.com/ui-router/core core
cd core
npm install
npm link
npm run build

cd ../angularjs
npm install
npm link @uirouter/core
npm run build
```

--------------------------------

### Defining state URL patterns

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/ng1._ng1statedeclaration.html

Examples of various URL patterns including path parameters, query parameters, and custom type constraints.

```javascript
url: "/home"
// Define a parameter named 'userid'
url: "/users/:userid"
// param 'bookid' has a custom regexp
url: "/books/{bookid:[a-zA-Z_-]}"
// param 'categoryid' is of type 'int'
url: "/books/{categoryid:int}"
// two parameters for this state
url: "/books/{publishername:string}/{categoryid:int}"
// Query parameters
url: "/messages?before&after"
// Query parameters of type 'date'
url: "/messages?{before:date}&{after:date}"
// Path and query parameters
url: "/messages/:mailboxid?{before:date}&{after:date}"
```

--------------------------------

### run()

Source: https://ui-router.github.io/ng1/docs/latest/classes/transition.transition-1.html

Executes the transition.

```APIDOC
### Method
run(): Promise<any>

### Description
Runs the transition. This method is generally called from the StateService.transitionTo.

### Returns
- **Promise<any>** - A promise for a successful transition.
```

--------------------------------

### parts

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_url_urlservice.urlservice.html

Gets the current URL parts.

```APIDOC
## parts(): UrlParts

### Description
Returns the path, search, and hash components of the current URL as an object.
```

--------------------------------

### Complete Hello World Source Code

Source: https://ui-router.github.io/react/tutorial/helloworld

The full implementation of the Hello World application including imports, component definitions, state configuration, and router initialization.

```javascript
import React from "react";
import ReactDOM from "react-dom";
import { UIRouter, UIView, useSrefActive, pushStateLocationPlugin } from "@uirouter/react";
import("./style.css");

const Hello = () => <h3>hello world</h3>;
const About = () => <h3>Its the UI-Router hello world app!</h3>;

const App = () => {
  const activeClass = "active";
  const helloSref = useSrefActive("hello", null, activeClass);
  const aboutSref = useSrefActive("about", null, activeClass);

  return (
    <div>
      <a {...helloSref}>Hello</a>
      <a {...aboutSref}>About</a>
      <UIView />
    </div>
  );
};

const helloState = { name: "hello", url: "/hello", component: Hello };
const aboutState = { name: "about", url: "/about", component: About };

ReactDOM.render(
  <UIRouter 
    plugins={[pushStateLocationPlugin]} 
    states={[helloState, aboutState]}>
    <App/>
  </UIRouter>,
  document.getElementById("root")
);
```

--------------------------------

### targetState()

Source: https://ui-router.github.io/ng1/docs/latest/classes/transition.transition-1.html

Gets the Target State of the transition.

```APIDOC
### Method
targetState(): TargetState

### Description
Gets the Target State. A transition's TargetState encapsulates the to state, the params, and the options as a single object.

### Returns
- **TargetState** - The TargetState of this Transition.
```

--------------------------------

### retained()

Source: https://ui-router.github.io/ng1/docs/latest/classes/transition.transition-1.html

Gets the states being retained during the transition.

```APIDOC
### Method
retained(): StateDeclaration[]

### Description
Gets the states that are already entered from a previous Transition and will not be exited during this Transition.

### Returns
- **StateDeclaration[]** - An array of retained states.
```

--------------------------------

### redirectedFrom()

Source: https://ui-router.github.io/ng1/docs/latest/classes/transition.transition-1.html

Gets the transition from which this transition was redirected.

```APIDOC
## redirectedFrom()

### Description
If the current transition is a redirect, this method returns the transition that was redirected.

### Returns
- **Transition** - The original Transition that started a redirect chain.
```

--------------------------------

### Inspect and resolve transition tokens

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_transition_transition.transition.html

These examples demonstrate how to retrieve resolve tokens and access their values or promises via the transition injector.

```typescript
let tokens = trans.getResolveTokens();
tokens.forEach(token => console.log(token + " = " + trans.injector().get(token)));
```

```typescript
let tokens = trans.getResolveTokens();
let promise = tokens.map(token => trans.injector().getAsync(token));
Promise.all(promises).then(values => console.log("Resolved values: " + values));
```

--------------------------------

### path

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_url_urlservice.urlservice.html

Gets the path part of the current URL.

```APIDOC
## path(): string

### Description
Returns the path portion of the current URL.
```

--------------------------------

### hash

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_url_urlservice.urlservice.html

Gets the hash part of the current URL.

```APIDOC
## hash(): string

### Description
Returns the hash (anchor) portion of the current URL.
```

--------------------------------

### Partial application with curry

Source: https://ui-router.github.io/ng1/docs/latest/modules/common_hof.html

Demonstrates using curry to enable partial application, allowing functions to be called with fewer arguments than defined until all are supplied.

```javascript
// returns true if an object is in both of the two arrays
function inBoth(array1, array2, object) {
  return array1.indexOf(object) !== -1 &&
         array2.indexOf(object) !== 1;
}
let obj1, obj2, obj3, obj4, obj5, obj6, obj7
let foos = [obj1, obj3]
let bars = [obj3, obj4, obj5]

// A curried "copy" of inBoth
let curriedInBoth = curry(inBoth);
// Partially apply both the array1 and array2
let inFoosAndBars = curriedInBoth(foos, bars);

// Supply the final argument; since all arguments are
// supplied, the original inBoth function is then called.
let obj1InBoth = inFoosAndBars(obj1); // false

// Use the inFoosAndBars as a predicate.
// Filter, on each iteration, supplies the final argument
let allObjs = [ obj1, obj2, obj3, obj4, obj5, obj6, obj7 ];
let foundInBoth = allObjs.filter(inFoosAndBars); // [ obj3 ]
```

--------------------------------

### url

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_vanilla_hashlocationservice.hashlocationservice.html

Gets or sets the current URL hash.

```APIDOC
## url(url?: string, replace?: boolean)

### Description
Retrieves the current URL or updates the URL hash.

### Parameters
- **url** (string) - Optional - The new URL to set.
- **replace** (boolean) - Optional - Whether to replace the current history entry (default: true).
```

--------------------------------

### go

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_state_stateservice.stateservice.html

Convenience method for transitioning to a new state, automatically setting default options for location, inheritance, and notification.

```APIDOC
## go(to: StateOrName, params?: RawParams, options?: TransitionOptions)

### Description
Transitions to a different state. This method wraps transitionTo with default options that enable inheritance and relative navigation.

### Parameters
- **to** (StateOrName) - Required - The target state name, object, or relative path.
- **params** (RawParams) - Optional - A map of parameters to be sent to the state.
- **options** (TransitionOptions) - Optional - Additional transition configuration options.

### Returns
- **TransitionPromise** - A promise representing the state of the new transition.
```

--------------------------------

### Define React components in state views

Source: https://ui-router.github.io/react/docs/latest/interfaces/_interface_.reactviewdeclaration.html

Examples of using the component property to map React components to state views, including shorthand syntax within a views block.

```javascript
.state('profile', {
  // Use the <my-profile></my-profile> component for the Unnamed view
  component: MyProfileComponent,
}

.state('messages', {
  // use the <nav-bar></nav-bar> component for the view named 'header'
  // use the <message-list></message-list> component for the view named 'content'
  views: {
    header: { component: NavBar },
    content: { component: MessageList }
  }
}

.state('contacts', {
  // Inside a "views:" block, supplying only a Component class is shorthand for { component: NavBar }
  // use the <nav-bar></nav-bar> component for the view named 'header'
  // use the <contact-list></contact-list> component for the view named 'content'
  views: {
    header: NavBar,
    content: ContactList
  }
}
```

--------------------------------

### Initialize UIRouter in index.js

Source: https://ui-router.github.io/react/tutorial/hellosolarsystem

The entry point for the application, configuring the UIRouter with plugins and rendering the root component.

```javascript
import React from 
"react";
import ReactDOM 
from "react-dom";
import { UIRouter, 
pushStateLocationPl
ugin } from 
"@uirouter/react";
import states from 
"./config/states";
import config from 
"./config/router";
import App from "./
components/App";
import("./style.
css");
ReactDOM.render(
<UIRouter
plugins={
[pushStateLocat
```

--------------------------------

### listen

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_url_urlservice.urlservice.html

Starts or stops listening for URL changes.

```APIDOC
## listen(enabled?: boolean): Function

### Description
Starts or stops monitoring the URL for changes. Call this after deferIntercept to begin listening.

### Parameters
- **enabled** (boolean) - Optional - Set to true to start listening or false to stop.
```

--------------------------------

### Define a ModuleTypeCallback

Source: https://ui-router.github.io/ng2/docs/latest/modules/_src_lazyload_lazyloadngmodule_.html

Example of a function that returns a promise for an NgModule.

```typescript
export function loadFooModule() {
  return import('../foo/foo.module').then(result => result.FooModule);
}
```

--------------------------------

### search

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_url_urlservice.urlservice.html

Gets the search part of the current URL as an object.

```APIDOC
## search(): {}

### Description
Returns the search (query) portion of the URL as a key-value object.
```

--------------------------------

### root()

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_state_stateregistry.stateregistry.html

Gets the implicit root state of the state tree.

```APIDOC
## root()

### Description
Gets the root of the state tree. The root state is implicitly created by UI-Router.

### Returns
- **StateObject** - The root StateObject.
```

--------------------------------

### _getPathTypes

Source: https://ui-router.github.io/react/docs/latest/interfaces/_uirouter_core_transition_transitionservice.transitionservicepluginapi.html

Gets all Path definitions used as criteria against a TreeChanges path.

```APIDOC
## _getPathTypes()

### Description
Gets a Path definition used as a criterion against a TreeChanges path.

### Returns
- (PathTypes)
```

--------------------------------

### Clone UI-Router Repositories

Source: https://ui-router.github.io/react

Clone the core and react repositories to begin local development.

```bash
git clone https://github.com/ui-router/core ui-router-core
git clone https://github.com/ui-router/react ui-router-react
```

--------------------------------

### getResolveTokens(pathname?)

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_transition_transition.transition.html

Gets all available resolve tokens (keys) for the transition.

```APIDOC
## getResolveTokens(pathname?: string)

### Description
Gets all available resolve tokens (keys). This method can be used in conjunction with injector to inspect the resolve values available to the Transition.

### Parameters
- **pathname** (string) - Optional - Resolve context's path name (e.g., "to" or "from"). Defaults to "to".

### Returns
- **any[]** - An array of resolve tokens (keys).
```

--------------------------------

### parameters(opts)

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_state_stateobject.stateobject.html

Gets the list of Param objects owned by the state.

```APIDOC
## parameters(opts)

### Description
Gets the list of Param objects owned by the state. If opts.inherit is true, it also includes the ancestor states' Param objects. If opts.matchingKeys exists, returns only Params whose id is a key on the matchingKeys object.

### Parameters
- **opts** (object) - Optional - Options object.
  - **inherit** (boolean) - Optional - Whether to include ancestor parameters.
  - **matchingKeys** (any) - Optional - Keys to filter parameters by.

### Returns
- **Param[]** - An array of Param objects.
```

--------------------------------

### constructor()

Source: https://ui-router.github.io/react/docs/latest/classes/_core_.uirouterreact.html

Creates a new instance of the UIRouterReact class, which can be used to manually bootstrap the router.

```APIDOC
## constructor()

### Description
Creates a new UIRouter instance. This is typically used to manually bootstrap the router in an application.

### Returns
- **UIRouterReact** - A new instance of the UIRouterReact class.

### Example
```javascript
import { UIRouterReact } from "@uirouter/react";
let routerInstance = new UIRouterReact();
routerInstance.start();
```
```

--------------------------------

### memoryLocationPlugin

Source: https://ui-router.github.io/ng1/docs/latest/modules/vanilla.html

A UIRouterPlugin that gets or sets the current location from an in-memory object.

```APIDOC
## memoryLocationPlugin(router: UIRouter)

### Description
A UIRouterPlugin that gets/sets the current location from an in-memory object.

### Parameters
- **router** (UIRouter) - Required - The UIRouter instance.

### Returns
- **LocationPlugin** - The initialized location plugin.
```

--------------------------------

### _getPathTypes

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/transition.transitionservicepluginapi.html

Gets a Path definition used as a criterion against a TreeChanges path.

```APIDOC
## _getPathTypes()

### Description
Gets a Path definition used as a criterion against a TreeChanges path.

### Returns
- **PathTypes**
```

--------------------------------

### hashPrefix(newprefix?)

Source: https://ui-router.github.io/ng1/docs/latest/classes/url.urlconfig.html

Gets or sets the hashPrefix used in hashbang mode.

```APIDOC
## hashPrefix(newprefix?)

### Description
Gets or sets the hashPrefix. This only applies when not running in html5Mode (pushstate mode).

### Parameters
- **newprefix** (string) - Optional - The new hash prefix to set.

### Returns
- **string** - The hash prefix.
```

--------------------------------

### options()

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_transition_transition.transition.html

Retrieves the options associated with the current transition.

```APIDOC
## options()

### Description
Get the transition options for the current transition.

### Returns
- **TransitionOptions** - The options for this Transition.
```

--------------------------------

### Transition to a state with $state.go

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_state_stateservice.stateservice.html

Navigates to a new state using a convenience method that defaults to relative navigation and parameter inheritance.

```javascript
let app = angular.module('app', ['ui.router']);

app.controller('ctrl', function ($scope, $state) {
  $scope.changeState = function () {
    $state.go('contact.detail');
  };
});
```

--------------------------------

### hashLocationPlugin

Source: https://ui-router.github.io/ng1/docs/latest/modules/vanilla.html

A UIRouterPlugin that uses the browser hash to get or set the current location.

```APIDOC
## hashLocationPlugin(router: UIRouter)

### Description
A UIRouterPlugin that uses the browser hash to get/set the current location.

### Parameters
- **router** (UIRouter) - Required - The UIRouter instance.

### Returns
- **LocationPlugin** - The initialized location plugin.
```

--------------------------------

### get

Source: https://ui-router.github.io/ng2/docs/latest/classes/_src_mergeinjector_.mergeinjector.html

Retrieves a token from the first injector that contains it, delegating through the provided list.

```APIDOC
### get

#### Signature
`get(token: any, notFoundValue?: any): any`

#### Parameters
- **token** (any) - The DI token to retrieve.
- **notFoundValue** (any, optional) - The value to return if the token is not found in any of the injectors.

#### Returns
- **any** - The resolved DI value.
```

--------------------------------

### Define ui-view elements

Source: https://ui-router.github.io/ng1/docs/latest/modules/directives.html

Demonstrates unnamed and named viewport configurations.

```html
<!-- Unnamed -->
<div ui-view></div>

<!-- Named -->
<div ui-view="viewName"></div>

<!-- Named (different style) -->
<ui-view name="viewName"></ui-view>
```

--------------------------------

### url(url?: string, replace?: boolean)

Source: https://ui-router.github.io/ng1/docs/latest/classes/vanilla.hashlocationservice.html

Gets or sets the current URL.

```APIDOC
## Method: url

### Description
Gets or sets the current URL using the browser hash.

### Parameters
- **url** (string) - Optional - The URL to set.
- **replace** (boolean) - Optional - Whether to replace the current history entry (default: true).

### Returns
- **string** - The current URL.
```

--------------------------------

### transitionTo(to: StateOrName, toParams?: RawParams, options?: TransitionOptions)

Source: https://ui-router.github.io/ng1/docs/latest/classes/state.stateservice.html

Low-level method for transitioning to a new state.

```APIDOC
## transitionTo(to: StateOrName, toParams?: RawParams, options?: TransitionOptions)

### Description
Performs a low-level transition to a new state. The 'go' method is generally recommended over this method.

### Parameters
- **to** (StateOrName) - Required - State name or state object.
- **toParams** (RawParams) - Optional - Map of parameters sent to the state.
- **options** (TransitionOptions) - Optional - Transition options.

### Returns
- **TransitionPromise** - A promise representing the state of the new transition.
```

--------------------------------

### Bootstrapping the Angular application

Source: https://ui-router.github.io/ng2/tutorial/helloworld

Initializes the application using the root module.

```typescript
platformBrowserDynamic()
  .bootstrapModule(RootAppModule)
  .catch(err => console.error(err));
```

--------------------------------

### Define a state with ngModule

Source: https://ui-router.github.io/ng2/docs/latest/modules/_src_statebuilders_lazyload_.html

Example of a raw state declaration using the ngModule property.

```typescript
var decl = {
  ngModule: () => import('./childModule.ts')
}
```

--------------------------------

### Define state with lazyLoad

Source: https://ui-router.github.io/ng1/docs/latest/modules/hooks.html

Example of defining a state with a lazyLoad function that imports a component.

```javascript
.state('abc', {
  component: 'fooComponent',
  lazyLoad: () => System.import('./fooComponent')
  });
```

--------------------------------

### Applying Custom Transition Defaults

Source: https://ui-router.github.io/react/docs/latest/modules/_uirouter_core_transition_transitionservice.html

Demonstrates how to merge custom transition options with the default configuration object.

```typescript
let reloadOpts = { reload: true, notify: true } let options = defaults(theirOpts, customDefaults, defaultOptions);
```

--------------------------------

### Retrieve registered hooks

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/transition.ihookregistry.html

Example of retrieving all registered hooks for a specific hook type.

```javascript
$transitions.getHooks("onEnter")
```

--------------------------------

### TransitionOptions

Source: https://ui-router.github.io/react/docs/latest/interfaces/_uirouter_core_transition_interface.transitionoptions.html

Configuration options for controlling state transition behavior.

```APIDOC
## TransitionOptions

### Description
The TransitionOptions object is used to modify the behavior of a transition. It is passed as an argument to navigation methods like `StateService.go` or `StateService.transitionTo`.

### Properties
- **custom** (any) - Optional - Custom options that can be accessed within Transition Hooks.
- **inherit** (boolean) - Optional - Whether to inherit parameter values from the current state. Default: `true`.
- **location** (boolean | "replace") - Optional - Controls browser URL interaction. `true` updates URL, `false` does not, "replace" replaces the history record. Default: `true`.
- **relative** (string | StateDeclaration | StateObject) - Optional - Defines the base state for relative transitions. Default: `$state.current`.
- **reload** (boolean | string | StateDeclaration | StateObject) - Optional - Forces a reload of active states. If `true`, reloads destination and parents. If a state name/object, reloads that state and its children. Default: `false`.
- **supercede** (boolean) - Optional - Determines if this transition should cancel an active transition. Default: `true`.
```

--------------------------------

### Initialize Angular module

Source: https://ui-router.github.io/ng1/tutorial/helloworld

Create the main application module and declare ui.router as a dependency.

```javascript
var myApp = angular.module('helloworld', ['ui.router']);
```

--------------------------------

### RawParams Object Example

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/params.rawparams.html

Represents a standard structure for state parameter key/value pairs.

```javascript
{
  userId: 353474,
  folderId: 'inbox'
}
```

--------------------------------

### fromConfig

Source: https://ui-router.github.io/ng1/docs/latest/classes/view.templatefactory.html

Creates a template from a configuration object.

```APIDOC
## fromConfig(config: Ng1ViewDeclaration, params: any, context: ResolveContext)

### Description
Creates a template from a configuration object. The method searches for defined properties in a specific order to create the template.

### Parameters
- **config** (Ng1ViewDeclaration) - Required - Configuration object for which to load a template.
- **params** (any) - Required - Parameters to pass to the template function.
- **context** (ResolveContext) - Required - The resolve context associated with the template's view.

### Returns
- **Promise<object>** - The template html as a string, or a promise for that string, or null if no template is configured.
```

--------------------------------

### Bootstrap UIRouterReact manually

Source: https://ui-router.github.io/react/docs/latest/classes/_core_.uirouterreact.html

Instantiate and start the router manually for custom bootstrapping scenarios.

```typescript
import { UIRouterReact } from "ui-router-ng2";
let routerInstance = new UIRouterReact();
routerInstance.start();
```

--------------------------------

### Configure squash mode with string placeholder

Source: https://ui-router.github.io/react/docs/latest/interfaces/_uirouter_core_params_interface.paramdeclaration.html

Demonstrates using a custom string placeholder for squashed default parameter values.

```javascript
{
  name: 'mystate2',
  url: '/mystate2/:myparam2',
  params: {
    myparam2: 'defaultParamValue'
    squash: "~"
  }
}

// URL will be `/mystate/~`
$state.go('mystate', { myparam2: 'defaultParamValue' });

// URL will be `/mystate/someOtherValue`
$state.go('mystate', { myparam2: 'someOtherValue' });
```

--------------------------------

### from()

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_transition_transition.transition.html

Returns the state that the transition is coming from.

```APIDOC
## from()

### Description
Returns the "from state" that the transition is coming from.

### Returns
- **StateDeclaration** - The state declaration object for the Transition's "from state".
```

--------------------------------

### Defining a non-url parameter

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_params_paramtypes.paramtypes.html

Example of defining a parameter that does not appear in the URL using the 'any' type.

```javascript
.state({
  name: 'new',
  url: '/new',
  params: {
    inrepyto: null
  }
});
```

```javascript
$state.go('new', { inreplyto: currentMessage });
```

--------------------------------

### State with both lazyLoad and ngModule

Source: https://ui-router.github.io/ng2/docs/latest/modules/_src_statebuilders_lazyload_.html

Example of a state declaration that provides both a custom lazyLoad function and an ngModule.

```typescript
var decl = {
  lazyLoad: () => import('third-party-library'),
  ngModule: () => import('./childModule.ts')
}
```

--------------------------------

### Define Default Parameter Values

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/params.paramdeclaration.html

Shows how to specify default values for parameters within a state configuration.

```javascript
// define default values for param1 and param2
params: {
  param1: {
    value: "defaultValue"
  },
  param2: {
    value: "param2Default;
  }
}
```

--------------------------------

### Register an onStart transition hook

Source: https://ui-router.github.io/ng1/docs/latest/classes/transition.transitionservice.html

Intercepts transitions to specific states to perform asynchronous authentication checks before allowing the transition to proceed.

```javascript
// 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");
    });
  }
});
```

--------------------------------

### Define ResolvePolicy Objects

Source: https://ui-router.github.io/ng1/docs/latest/interfaces/resolve.resolvepolicy.html

Examples of configuring resolve policies for lazy and eager loading behaviors.

```javascript
// Fetched when the resolve's state is being entered.
// Wait for the promise to resolve.
var policy1 = { when: "LAZY", async: "WAIT" }

// Fetched when the Transition is starting.
// Do not wait for the returned promise to resolve.
// Inject the raw promise/value
var policy2 = { when: "EAGER", async: "NOWAIT" }
```

--------------------------------

### get

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_state_stateservice.stateservice.html

Retrieves a registered StateDeclaration object for a specific state or returns an array of all registered states.

```APIDOC
## get(stateOrName?: StateOrName, base?: StateOrName)

### Description
Gets a registered StateDeclaration object. If no arguments are provided, it returns an array of all registered states.

### Parameters
- **stateOrName** (StateOrName) - Optional - The absolute or relative name of the state to retrieve.
- **base** (StateOrName) - Optional - The base state to resolve relative state references against.

### Returns
- **StateDeclaration | StateDeclaration[]** - The requested state declaration or an array of all registered state declarations.
```

--------------------------------

### constructor

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_state_statematcher.statematcher.html

Creates a new instance of StateMatcher with a provided map of states.

```APIDOC
## constructor

### Signature
`new StateMatcher(_states: { [key: string]: StateObject }): StateMatcher`

### Parameters
- **_states** ({ [key: string]: StateObject }) - A map of state objects to be used for matching.
```

--------------------------------

### Register loadEnteringViews hook

Source: https://ui-router.github.io/ng1/docs/latest/modules/hooks.html

Registers the loadEnteringViews hook to wait for view loading at the start of a transition.

```javascript
transitionService.onStart({}, loadEnteringViews);
```

--------------------------------

### Initialize PushStateLocationPlugin

Source: https://ui-router.github.io/ng1/docs/latest/modules/vanilla.html

Creates a plugin that utilizes the browser's native history and location APIs.

```javascript
pushStateLocationPlugin: function = locationPluginFactory('vanilla.pushStateLocation',true,PushStateLocationService,BrowserLocationConfig)
```

--------------------------------

### Register eagerResolvePath hook

Source: https://ui-router.github.io/ng1/docs/latest/modules/hooks.html

Registers the eagerResolvePath hook to resolve EAGER dependencies at the start of a transition.

```javascript
transitionService.onStart({}, eagerResolvePath, { priority: 1000 });
```

--------------------------------

### Reload a specific state hierarchy

Source: https://ui-router.github.io/react/docs/latest/classes/_uirouter_core_state_stateservice.stateservice.html

Example of reloading a specific state and its children while leaving ancestors unaffected.

```javascript
//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');
  }
});
```
Tokens:
Raw