<!DOCTYPE html>
<html ng-app="myapp">

<head>
  <title>AngularJS: UI-Router Quick Start</title>
  <!-- Bootstrap CSS -->
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body class="container">
  <div class="navbar">
    <div class="navbar-inner">
      <a class="brand" href="#">Quick Start</a>
      <ul class="nav">
        <li><a ui-sref="route1">Route 1</a>
        </li>
        <li><a ui-sref="route2">Route 2</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="span12">
      <div class="well" ui-view></div>
    </div>
  </div>

  <!-- Angular -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
  <!-- UI-Router -->
  <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>

  <!-- App Script -->
  <script>
    var myapp = angular.module('myapp', ["ui.router"])
     myapp.config(function($stateProvider, $urlRouterProvider) {

      // For any unmatched url, send to /route1
      $urlRouterProvider.otherwise("/route1")

      $stateProvider
        .state('route1', {
          url: "/route1",
          templateUrl: "layout.html",
          requireAuth: false
        })
        
        .state('route2', {
          url: "/route2",
          templateUrl: "route2.html"
        })
    });
  </script>
  
  <ng-include="layout.html"></ng-include>

</body>

</html>
<h1>Route 1</h1>
<h1>Route 2</h1>
<script id="layout.template.html" type="text/ng-template">
<div>
  <p>This is the layout template</p>
</div>
</script>