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>