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

核心代码如下

1.index.html

  1. 	<!DOCTYPE html>
  2. 	<html lang="en" style="height:100%">
  3. 	  <head>
  4. 	    <meta charset="utf-8">
  5. 	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. 	    <meta name="viewport" content="width=device-width, initial-scale=1">
  7. 	    <meta name="description" content="基础导航实现">
  8. 	    <meta name="author" content="0o晓月メ">
  9. 	    <title>博客</title>
  10. 	    <!-- bootstrap -->
  11. 	    <link href="libs/bootstrap-3.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
  13. 	    <script type="text/javascript" src="libs/jquery-1.9.1.min.js"></script>
  14. 	    <script type="text/javascript" src="libs/bootstrap-3.3.5/dist/js/bootstrap.js"></script>
  15. 	    <!-- less  -->
  16. 	    <link href="resources/less/main.less" rel="stylesheet/less" type="text/css">
  17. 	    <script src="libs/less/less.min.js" type="text/javascript"></script>
  18. 	   	<!-- angular-->
  19. 	    <script src="libs/angular-ui-router/node_modules/angular/angular.js"></script>
  20. 	    <script src="libs/angular-ui-router/release/angular-ui-router.js"></script>
  22. 	    <script src="app/app.js"></script>
  23. 	  </head>
  25. 	  <body ng-app="MyApp" style="height:100%" class="main-body">
  26. 		<div ui-view></div>
  27. 	  </body>
  28. 	</html>

2.viewport.html

  1. 	<div class ="container" style="padding-top: 150px;">
  2. 		<ul class="nav nav-pills">
  3. 			<li role="presentation" ng-class="{ active:'home'== currentType }" >
  4. 				<a ui-sref="app.home" ng-click="changeTab('home')">主页</a>
  5. 			</li>
  6. 			<li role="presentation" ng-class="{ active:'article'== currentType }">
  7. 				<a ui-sref="app.article" ng-click="changeTab('article')">文章</a>
  8. 			</li>
  9. 			<li role="presentation" ng-class="{ active:'photo'== currentType }">
  10. 				<a ui-sref="app.photo" ng-click="changeTab('photo')">相册</a>
  11. 			</li>
  12. 			<li role="presentation" ng-class="{ active:'music'== currentType }">
  13. 				<a ui-sref="app.music" ng-click="changeTab('music')">音乐</a>
  14. 			</li>
  15. 			<li role="presentation" ng-class="{ active:'comment'== currentType }">
  16. 				<a ui-sref="app.comment" ng-click="changeTab('comment')">留言板</a>
  17. 			</li>
  18. 		</ul>
  19. 	</div>
  20. 	<div ui-view class ="container"></div>

3.app.js

  1. 	angular.module('MyApp', ['ui.router'])
  2. 		.controller('MainController', ['$scope',function($scope) {
  3. 			console.log('init ctrl');
  4. 			$scope.currentType = 'home';
  5. 			$scope.changeTab = function(type){
  6. 				$scope.currentType = type;
  7. 			};
  8. 		}])
  9. 		.config(function($stateProvider, $urlRouterProvider) {
  10. 			$urlRouterProvider.otherwise("/app/home");
  11. 			$stateProvider.state('app', {
  12. 				url: "/app",
  13. 				abstract:true,
  14. 				templateUrl: "app/viewport.html",
  15. 				controller: 'MainController'
  16. 			})
  17. 		    .state('app.home', {
  18. 		      url: "/home",
  19. 		      templateUrl: "app/home/home.html"
  20. 		    })
  21. 		    .state('app.article', {
  22. 		      url: "/article",
  23. 		      template: "文章"
  24. 		    })
  25. 		    .state('app.photo', {
  26. 		      url: "/photo",
  27. 		      template: "相册"
  28. 		    })
  29. 		    .state('app.music', {
  30. 		      url: "/music",
  31. 		      template: "音乐"
  32. 		    })
  33. 		    .state('app.comment', {
  34. 		      url: "/comment",
  35. 		      template: "留言板"
  36. 		    })
  37. 	});

项目github地址

https://github.com/FinalElysion/Navigation

AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能的更多相关文章

  1. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  2. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

  3. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  4. 规范 : angular ui router path & params

    在seo文章中提到url的path 必须是 why-us,而不是whyUS 所以定了规范,所有的path 必须why-us path ?后尾的是用来filter的,所以可以WhyUs 如果是不需要给s ...

  5. angular 的ui.router 定义不同的state 对应相同的url

    Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...

  6. [转]AngularJS+UI Router(1) 多步表单

    本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现   在线demo演示地址https://rawgit.com/dream ...

  7. Angular -ui - BootStrap组件的解释以及使用

    关于UI BootStrap UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件. 1. 关于ng-router(angular-router. ...

  8. angularjs ngRoute和ui.router对比

    ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...

  9. angular : $location & $state(UI router)的关系

    次序:angular 的 location会先跑 $rootScope.$on("$locationChangeStart", function (scope, newUrl, o ...

随机推荐

  1. (window,parent,opener,top).location.reload方法汇总

    今天在火狐浏览器上碰到个bug,调用parent.location.reload()时只刷新子页面,没有整个浏览器刷新,谷歌上没有问题,网上搜了一下 改成parent.location.reload( ...

  2. JVM方法调用

    当我们站在JVM实现的角度去看方法调用的时候,我们自然会想到一种分类: 1.编译代码的时候就知道是哪个方法,永远不会产生歧义,例如静态方法,private方法,构造方法,super方法. 2.运行时才 ...

  3. （入门篇 NettyNIO开发指南）第五章-分隔符和定长解码器使用

    TCP    以流的方式进行数据传输上层的应用协议为了对消息进行区分,往往采用如下4种方式. (1)消息长度固定,累计读取到长度总和为定长LEN 的报文后,就认为读取到了一个完整的消息,将计数器置位, ...

  4. Java字节码—ASM

    前言 ASM 是什么 官方介绍:ASM is an all purpose Java bytecode manipulation and analysis framework. It can be u ...

  5. 软件需求规格说明书（spec）

    1.spec 的目标是什么,spec 的目标不包括什么? 我们的目标是对用户发布的各种需求(需要伙伴的需求)进行处理,使别的用户可以看到信息,并且成功找到合适的伙伴一起! 不包括对用户之间的联系. 2 ...

  6. kafka 0.8.2 消息消费者 consumer

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  7. kafka 0.10.2 解决java无法生产消息到指定topic问题

    主要是修改server.properties的advertised.listeners advertised.listeners=PLAINTEXT://192.168.59.132:9092

  8. Java 开发中如何正确踩坑

    为什么说一个好的员工能顶 100 个普通员工 我们的做法是,要用最好的人.我一直都认为研发本身是很有创造性的,如果人不放松,或不够聪明,都很难做得好.你要找到最好的人,一个好的工程师不是顶10个,是顶 ...

  9. 使用python遍历指定城市的一周气温

    处于兴趣,写了一个遍历指定城市五天内的天气预报,并转为华氏度显示.把城市名字写到一个列表里这样可以方便的添加城市.并附有详细注释 1 import requests import json#定义一个函 ...

  10. testlink（以及服务器）问题定位思路

    testlink又炸了,记录下问题定位思路: 1.翻阅logs: tail -100f ***.log 2.将关键字百度: 但是狗日的网上一般不会告诉我们这修改的文件在哪(上下图无关联,因为图是后面随 ...