<!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/3.0.2/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>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li ng-class="{ active: $state.includes('route1') }"><a ui-sref="route1">Route 1</a>
</li>
<li ng-class="{ active: $state.includes('route2') }"><a ui-sref="route2">Route 2</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="well" ui-view></div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/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",
templateUrl: "route1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('route1.list2', {
url: "/list",
templateUrl: "route1.list.html",
controller: function($scope) {
$scope.items = ["A2", "List2", "Of2", "Items2"];
}
})
.state('route2', {
url: "/route2",
templateUrl: "route2.html"
})
.state('route2.list', {
url: "/list",
templateUrl: "route2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
})
}).run(function ($rootScope, $state, $stateParams) {
// It's very handy to add references to $state and $stateParams to the $rootScope
// so that you can access them from any scope within your applications.For example,
// <li ui-sref-active="active }"> will set the <li> // to active whenever
// 'contacts.list' or one of its decendents is active.
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
});
</script>
</body>
</html>
<h1>Route 1</h1>
<hr/>
<ul class="nav nav-tabs">
<li ng-class="{ active: $state.includes('route1.list') }" ><a ui-sref="route1.list">R1 items</a></li>
<li ng-class="{ active: $state.includes('route1.list2') }"><a ui-sref="route1.list2">R1 items2</a></li>
</ul>
<div ui-view></div>
<h1>Route 2</h1>
<hr/>
<a ui-sref=".list">Show List</a>
<div ui-view></div>
<h3>List of Route 2 Things</h3>
<ul>
<li ng-repeat="thing in things">{{thing}}</li>
</ul>
<h3>List of Route 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>