sample/index.html

<!doctype html>
<!-- Our uiRouterSample module defined here -->
<html lang="en" ng-app="uiRouterSample">
  <head>
    <meta charset="utf-8">

    <!-- using twitter bootstrap, but of course -->
    <link rel="stylesheet" type="text/css" href="vendor/bootstrap.min.css">
    <!-- styles for ng-animate are located here -->
    <link rel="stylesheet" type="text/css" href="css/styles.css">

    <!-- Include both angular.js and angular-ui-router.js-->
    <script src="../lib/angular-1.2.14/angular.js"></script>
    <script src="../lib/angular-1.2.14/angular-animate.js"></script>
    <script src="../release/angular-ui-router.js"></script>

    <!-- app.js declares the uiRouterSample module and adds items to $rootScope, and defines
         the "home" and "about" states
    -->
    <script src="app/app.js"></script>

    <!-- contacts.js declares the uiRouterSample.contacts module, and adds a number of contact
         related states 
    -->
    <script src="app/contacts/contacts.js"></script>

    <!-- contacts-service.js, and utils-service.js define services for use by the contacts 
         module.
    -->
    <script src="app/contacts/contacts-service.js"></script>
    <script src="common/utils/utils-service.js"></script>

    <!-- could easily use a custom property of the state here instead of 'name' -->
    <title ng-bind="$state.current.name + ' - ui-router'">ui-router</title>
  </head>
  <body>
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner"><div class="container">

        <!-- ui-sref is a great directive for linking a state location with an anchor link.
             You should almost always use ui-sref instead of href on your links when you want
             then to navigate to a state. When this link is clicked it will take the application
             to the 'home' state. Behind the scenes the directive also adds the correct href attr
             and url. -->
        <a class="brand" ui-sref="home">ui-router</a>
        <ul class="nav">

        <!-- Here you can see ui-sref in action again. Also notice the use of $state.includes, which
             will set the links to 'active' if, for example on the first link, 'contacts' or any of
             its descendant states are activated. -->
          <li ng-class="{active: $state.includes('contacts')}"><a ui-sref="contacts.list">Contacts</a></li>
          <li ui-sref-active="active"><a ui-sref="about">About</a></li>
          <li ui-sref-active="me"><a ui-sref="me">Me</a></li>
        </ul>

        <!-- Here is a named ui-view. ui-views don't have to be named, but we'll be populate this
             on from various different child states and we want a name to help us target. -->
        <p ui-view="hint" class="navbar-text pull-right"></p>
      </div></div>
    </div>

    <!-- Here is the main ui-view (unnamed) and will be populated by its immediate children's templates
         unless otherwise explicitly named views are targeted. It's also employing ng-animate. -->
    <div ui-view class="container slide" style="padding-top: 80px;"></div>
    <div ui-view="myself" class="container slide"></div>


    <hr>
    <pre>
      <!-- Here's some values to keep an eye on in the sample in order to understand $state and $stateParams -->
      $state = {{$state.current.name}}
      $stateParams = {{$stateParams}}
      $state full url = {{ $state.$current.url.source }}
      <!-- $state.$current is not a public api, we are using it to
           display the full url for learning purposes-->
    </pre>
  </body>
</html>