AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能

AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能

核心代码如下

1.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/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>

2.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>

3.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: "留言板"
		    })
	});

项目github地址

https://github.com/FinalElysion/Navigation