var app = angular.module('plunker', ['ui.bootstrap', 'ui.bootstrap.tpls', 'ui.router'])
.run(['$rootScope', '$state', '$stateParams',
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 ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
// to active whenever 'contacts.list' or one of its decendents is active.
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}]);
app.config(function($stateProvider,$locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(false).hashPrefix('!');
$stateProvider
.state('left', {
url: "/",
views: {
"viewA": {
template: '<h1>Left Tab, index.viewA</h1><br><div class="well col-xs-2">' +
'<a ui-sref=".link1">Link1</a><br>' +
'<a ui-sref=".link2">Link2</a></div>' +
'<div class="col-xs-6">' +
'<div ui-view="viewA.link1"></div>' +
'<div ui-view="viewA.link2"></div></div>'
},
"viewC": {
template: 'Left Tab, viewC <div ui-view="viewC.link1"></div>' +
'<div ui-view="viewC.link2"></div>'
}
}
})
.state('left.link1', {
url: 'link1',
onExit: function() {
console.log('I will explode your router');
},
views: {
"viewA.link1": {
template: '<h2>viewA Nest Link1</h2><ul>' +
'<li ng-repeat="thing in link1things">{{thing}}</li></ul>',
controller: 'Tab1Link1Ctrl',
data: {}
},
"viewC.link1": {
template: 'Link1'
}
}
})
.state('left.link2', {
url: 'link2',
views: {
"viewA.link2": {
template: '<h2>viewA Nest Link2</h2><ul>' +
'<li ng-repeat="thing in link2things">{{thing}}</li></ul>',
controller: 'Tab1Link2Ctrl',
data: {}
},
"viewC.link2": {
template: 'Link2'
}
}
})
.state('right', {
url: "/right",
onEnter: ['$state', function($state) {
console.log('goodbye, router');
}],
views: {
"viewA": {
template: '<h1>Right Tab, viewA</h1>',
controller: '2ndTabCtrl',
data: {}
},
"viewC": {
template: 'Right Tab, viewC <div ui-view="viewC.list"></div>'
}
}
});
});
app.controller('Tabs', ['$scope', '$stateParams', '$state',
function($scope, $stateParams, $state) {}
]);
app.controller('2ndTabCtrl', ['$scope', '$stateParams', '$state',
function($scope, $stateParams, $state) {}
]);
app.controller('Tab1Link1Ctrl', ['$scope', '$stateParams', '$state',
function($scope, $stateParams, $state) {
$scope.link1things = ["A", "Set", "Of", "Things", "link1", "viewA"];
}
]);
app.controller('Tab1Link2Ctrl', ['$scope', '$stateParams', '$state',
function($scope, $stateParams, $state) {
$scope.link2things = ["A", "Set", "Of", "Things", "link2", "viewA"];
}
]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css@*" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link data-require="font-awesome@*" data-semver="4.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.9/angular.js" data-semver="1.2.9"></script>
<script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
<script data-require="angular-animate@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular-animate.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
<script src="app.js"></script>
<!--<script src="ui-bootstrap-tpls-0.10.0.js"></script>-->
</head>
<body ng-controller="Tabs">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="collapsed = !collapsed" ng-model="collapsed" ng-init="collapsed = true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-right" href="#">
<i class="icon-home"></i><div ui-view="viewC"></div>
</a>
</div>
</div>
<br><br>
<h3>angularJS 1.2.* + ui.bootstrap.tabs + ui-router</h3>
<h4>Tabs & Multiple Named Views example (plus nests)</h4>
<span>$state = <b>{{$state.current.name}}</b></span><br>
<span>$state url = <b>{{$state.$current.url.source}}</b></span>
<tabset>
<tab>
<tab-heading>
<a ui-sref="left" ui-sref-active="active">Left</a>
</tab-heading>
</tab>
<tab>
<tab-heading>
<a ui-sref="right" ui-sref-active="active">Right</a>
</tab-heading>
</tab>
</tabset>
<div class="row">
<br>
<div ui-view="viewA">
<!--Here is the A content-->
</div>
</div>
</body>
</html>
/* Put your css in here */