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

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. [UWP]不怎么实用的Shape指南：自定义Shape

    1. 前言 这篇文章介绍了继承并自定义Shape的方法,不过,恐怕,事实上,100个xaml的程序员99个都不会用到.写出来是因为反正都学了,当作写个笔记. 通过这篇文章,你可以学到如下知识点: 自定 ...

  2. 互联网二次进化—VR全景智慧城市

    vr全景智慧城市被称为中国首家商业全景平台.VR被称为下一代超级人机交互平台. 时间往前推20年,1996年,电脑还是很新鲜的玩意儿.那时,我第一次接触电脑,在我父亲供职的单位,一个开着空调的房间里, ...

  3. 写给Android App开发人员看的Android底层知识（2）

    (五)AMS 如果站在四大组件的角度来看,AMS就是Binder中的Server. AMS全称是ActivityManagerService,看字面意思是管理Activity的,但其实四大组件都归它管 ...

  4. SQLServer树形数据结构的数据进行数据统计

    前言 前几天朋友问我,关于SQLServer数据库中对树形结构的表数据统计问题,需求大致如下: 分类表(递归数据),A的子分类是B,B的子分类是C--分类关系不间断,A为第一层,B为第二层,C为第三层 ...

  5. 深入理解Java虚拟机 - 学习笔记 1

    Java内存区域 程序计数器 (Program Counter Register) 是一块较小的内存空间,可以看作是当前线程所执行的字节码的行号指示器.在虚拟机的概念模型里,字节码解释器工作时就是通过 ...

  6. 开涛spring3(7.2) - 对JDBC的支持 之 7.2 JDBC模板类

    7.2  JDBC模板类 7.2.1  概述 Spring JDBC抽象框架core包提供了JDBC模板类,其中JdbcTemplate是core包的核心类,所以其他模板类都是基于它封装完成的,JDB ...

  7. java虚拟机学习-JVM调优总结（6）

    1.Java对象的大小 基本数据的类型的大小是固定的,这里就不多说了.对于非基本类型的Java对象,其大小就值得商榷. 在Java中,一个空Object对象的大小是8byte,这个大小只是保存堆中一个 ...

  8. 一、 开篇（ASP.NET MVC5 系列）

    这个教程将教你一些用VS2013创建ASP.NET MVC 5 Web应用程序基础知识.为了避免开发工具的不一致而带来的一些小麻烦,建议你使用和我一样的开发工具VS2013英文版. 开发工具:Visu ...

  9. zabbix server安装详解

    简介 zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以 ...

  10. jquery实现点击进行跳转后,改点击的元素添加选中的效果

    <style> .active { color: red; } </style> //html代码 <ul id="tab2"> <li& ...