# Route Checking

### What?

Route Matching Magic. It matches your routes ... magically!

Clicking "Make Active" will reload the page. Pay attention to the routes.

- uiRoute Info IS is NOT active.
- Route {{ route }} IS is NOT active. Make Active

### Why?

It would be nice if your app knew what the address path was and acted accordingly, right? Right.

### Options

- Out of the box this directive ships with a boolean to determine if the route matches or not: `$uiRoute`.
  - Example Usage: `<a ui-route="/page" ng-class="{active: $uiRoute}">link</a>`
- Using `ui-route` as an attribute with value supports the following:
  - Static: `<a ui-route="/page">`
  - Regular Expression: `<a ui-route="/page/[0-9]*">`
  - Template Vars: `<a ui-route="/page/{{ sample }}">`
  - Template Vars && RegEx: `<a ui-route="/page/{{ sample }}/[0-9]*">`
- Using `ui-route` with `ng-href` attribute:
  - Static: `<a ui-route ng-href="/page">`
  - Template Vars: `<a ui-route ng-href="/page/{{ sample }}">`
- Using `ui-route` with `href` attribute:
  - Static Only: `<a ui-route href="/page">`
- You can also pass a model to `ui-route`. This model could then be used the same as `$uiRoute`.
  - `<li ui-route="/page/{{ sample }}" ng-model="current">`

### How?

    <ul>
    <li ui-route="#/route-1">Route 1
    <strong ng-show="$uiRoute">IS</strong>
    <strong ng-show="!$uiRoute">is NOT</strong> active.
    </li>
    <li ui-route="#/route-2">Route 2
    <strong ng-show="$uiRoute">IS</strong>
    <strong ng-show="!$uiRoute">is NOT</strong> active.
    </li>
    <li ui-route="#/route-3">Route 3
    <strong ng-show="$uiRoute">IS</strong>
    <strong ng-show="!$uiRoute">is NOT</strong> active.
    </li>
    </ul>