index.html
<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="基礎導航實現">
<meta name="author" content="0o曉月メ">
<title>博客</title>
<!-- bootstrap -->
<link href="libs/bootstrap-3.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="libs/login/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="libs/bootstrap-3.3.5/dist/js/bootstrap.js"></script>
<!-- less -->
<link href="resources/less/main.less" rel="stylesheet/less" type="text/css">
<script src="libs/less/less.min.js" type="text/javascript"></script>
<!-- angular-->
<script src="libs/angular-ui-router/node_modules/angular/angular.js"></script>
<script src="libs/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-app="MyApp" style="height:100%" class="main-body">
<div ui-view></div>
</body>
</html>
viewport.html
<div class ="container" style="padding-top: 150px;">
<ul class="nav nav-pills">
<li role="presentation" ng-class="{ active:'home'== currentType }" >
<a ui-sref="app.home" ng-click="changeTab('home')">主頁</a>
</li>
<li role="presentation" ng-class="{ active:'article'== currentType }">
<a ui-sref="app.article" ng-click="changeTab('article')">文章</a>
</li>
<li role="presentation" ng-class="{ active:'photo'== currentType }">
<a ui-sref="app.photo" ng-click="changeTab('photo')">相冊</a>
</li>
<li role="presentation" ng-class="{ active:'music'== currentType }">
<a ui-sref="app.music" ng-click="changeTab('music')">音樂</a>
</li>
<li role="presentation" ng-class="{ active:'comment'== currentType }">
<a ui-sref="app.comment" ng-click="changeTab('comment')">留言板</a>
</li>
</ul>
</div>
<div ui-view class ="container"></div>app.js
angular.module('MyApp', ['ui.router'])
.controller('MainController', ['$scope',function($scope) {
console.log('init ctrl');
$scope.currentType = 'home';
$scope.changeTab = function(type){
$scope.currentType = type;
};
}])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/app/home");
$stateProvider.state('app', {
url: "/app",
abstract:true,
templateUrl: "app/viewport.html",
controller: 'MainController'
})
.state('app.home', {
url: "/home",
templateUrl: "app/home/home.html"
})
.state('app.article', {
url: "/article",
template: "文章"
})
.state('app.photo', {
url: "/photo",
template: "相冊"
})
.state('app.music', {
url: "/music",
template: "音樂"
})
.state('app.comment', {
url: "/comment",
template: "留言板"
})
});