Skip to content

Instantly share code, notes, and snippets.

@rosterloh

rosterloh/app.js

Created August 27, 2014 11:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rosterloh/85356293f7e989b4a6ca to your computer and use it in GitHub Desktop.
Save rosterloh/85356293f7e989b4a6ca to your computer and use it in GitHub Desktop.
Download ZIP
Deep linking a tabbed UI
Raw
app.js
(function(){
var app = angular.module("routedTabs", ["ui.router", "ui.bootstrap"]);
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/main/tab1");
$stateProvider
.state("main", { abtract: true, url:"/main", templateUrl:"main.html" })
.state("main.tab1", { url: "/tab1", templateUrl: "tab1.html" })
.state("main.tab2", { url: "/tab2", templateUrl: "tab2.html" })
.state("main.tab3", { url: "/tab3", templateUrl: "tab3.html" });
});
app.controller("mainController", function($rootScope, $scope, $state) {
$scope.go = function(route){
$state.go(route);
};
$scope.active = function(route){
return $state.is(route);
};
$scope.tabs = [
{ heading: "Tab 1", route:"main.tab1", active:false },
{ heading: "Tab 2", route:"main.tab2", active:false },
{ heading: "Tab 3", route:"main.tab3", active:false },
];
$scope.$on("$stateChangeSuccess", function() {
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(tab.route);
});
});
});
}());
Raw
index.html
<!DOCTYPE html>
<html>
<head></head>
<body ng-app="routedTabs" class="container">
<div ui-view></div>
</body>
</html>
Raw
main.html
<div ng-controller="mainController">
<tabset>
<tab
ng-repeat="t in tabs"
heading="{{t.heading}}"
select="go(t.route)"
active="t.active">
</tab>
</tabset>
<h2>View:</h2>
<div ui-view></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment