<!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">
<p><i>Best viewed in pop-out mode to see location changes. Click blue button on the right.</i></p>
<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: "route1.html"
})
.state('route1.list', {
url: "/list/:id",
templateUrl: "route1.list.html",
controller: function($scope, $stateParams){
$scope.items = ["A", "List", "Of", "Items"];
$scope.id = $stateParams.id;
}
})
.state('route2', {
url: "/route2",
templateUrl: "route2.html"
})
.state('route2.list', {
url: "/list/:id",
templateUrl: "route2.list.html",
controller: function($scope, $stateParams){
$scope.things = ["A", "Set", "Of", "Things"];
$scope.id = $stateParams.id;
}
})
})
</script>
</body>
</html>
<h1>Route 1</h1>
<hr/>
<a ui-sref=".list({id:'1234'})">Show List</a>
<div ui-view></div>
<h1>Route 2</h1>
<hr/>
<a ui-sref=".list({id:'5678'})">Show List</a>
<div ui-view></div>
<h3>List of Route 2 Things</h3>
<ul>
<li ng-repeat="thing in things">{{thing}}</li>
</ul>
<hr>
<h3>Route Param: {{id}}</h3>
<h3>List of Route 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<hr>
<h3>Route Param: {{id}}</h3>