AngularJS ui-router
HTML
<script src="http://txt.fliglio.com/ui-router.js"></script>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner"><div class="container">
<ul class="nav">
<li ng-class="{ active: $state.includes('home') }"><a href="#/">Home</a></li>
</ul>
<p class="navbar-text" ui-view="hint"></p>
</div></div>
</div>
<div class="container" style="margin-top:60px" ui-view ></div>
<hr>
<pre>
$state = {{$state.current.name}}
$stateParams = {{$stateParams}}
</pre>
CSS
@import url('http://txt.fliglio.com/bootstrap.css');
JavaScript
/* myApp module */
angular.module('myApp', ['ui.state'])
.config(['$stateProvider', '$routeProvider', '$urlRouterProvider',
function ($stateProvider, $routeProvider, $urlRouterProvider) {
var home = {
name: 'home',
url: '/',
template: 'Hello {{name}}',
controller: ['$scope', function ($scope) {
$scope.name = "World";
}]
};
$stateProvider
.state(home);
}])
.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$state.transitionTo('home');
}]);