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
转载于:https://www.cnblogs.com/final-elysion/p/6072893.html
AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能相关推荐
- AngularJs的UI组件ui-Bootstrap分享（六）——Tabs
tabs控件使用uib-tabset指令和uib-tab指令,效果是这样的: 1 <!DOCTYPE html> 2 <html ng-app="ui.bootstrap. ...
- [译]发布ABP v0.19包含Angular UI选项
发布ABP v0.19包含Angular UI选项 ABP v0.19已发布,包含解决的~90个问题和600+次提交. 新功能 Angular UI 终于,ABP有了一个SPA UI选项,使用最新的A ...
- 用angular JS和 bootstrap完成一个简单的购物车界面
初学angularJS,自己做一个简单的demo玩一下. 购物车界面:(1)能显示商品基本信息: (2)能对购买数量进行修改: (3)能够删除不想购买的商品: (4)能够自动计 ...
- ui设计培训需要什么基础?如何入门学习?
UI设计是一种直观面向用户的一个技术岗位,在互联网公司,UI设计岗位是不可或缺的,那么对于零基础想要学习UI设计的同学来说,ui设计培训需要什么基础?如何入门学习呢?我们来看看下面的详细介绍. ...
- html5拖动的面板 panel,基于jQuery UI的Bootstrap Panel面板功能增强插件
LobiPanel是一款基于jQuery UI的Bootstrap Panel面板功能增强插件.通过该插件可以为Bootstrap的原生Panel面板增加编辑标题,最大化,最小化,面板拖动关闭面板等功 ...
- Angular Chart.js第三方库ng-chartjs基础使用
Angular Chart.js第三方库ng-chartjs基础使用 项目github地址 这个项目支持基本的Chart.js图表,并且支持内联插件和全局插件的使用. Demo地址 支持图表类型 li ...
- android listview 滑动条显示_第七十六回：Android中UI控件之RecyclerView基础
各位看官们,大家好,上一回中咱们说的是Android中UI控件之ListView优化的例子,这一回咱们说的例子是UI控件之RecyclerView.闲话休提,言归正转.让我们一起Talk Androi ...
- angular ui组件_使用Angular Material将现代UI组件添加到Angular项目中
angular ui组件 Learn how to use Angular Material in this full course for beginners from Codevolution. ...
- Vue+Vue Router+Webpack打包网站基础页面
Vue+Vue Router+Webpack打包网站基础页面 1.目录结构 2.package.json所需依赖包 {"name": "vue_router_webpac ...
- 【UI界面设计】PS基础学习笔记
[UI界面设计]PS基础学习笔记 一.概述 1.行业规范: 2.介绍 二.PS入门 1.安装 2.基本介绍 3.新建项目 4.PS的基本使用流程 5.项目保存 6.抠图 7.修图 8.修人像图 9.如 ...
最新文章
- android 模拟器配置上网_10 款主机模拟器，让你畅玩全球大作，嗨到飞起
- Button的使用(七):RadioGroup、RadioButton
- jvm的架构模型：基于栈式的架构和基于寄存器架构的特点
- 从动力学角度看优化算法：GAN的第三个阶段
- rg1 蓝光危害rg0_LED（护眼）台灯|蓝光那些事
- Linux搭建oracle数据库
- 深入react技术栈(9):表单
- 选择标签至文本域效果,可多选/可过滤重复/可限制个数
- Spring Java-based容器配置
- [习题]如何触发 GridView 身体里面的「子控件」的事件 (ASP.NET案例精编 / 清华大学出版社 Ch.10/11两章的补充)...
- linux线上CPU100%排查
- 现在单片机编程语言是c吗,单片机编程用什么语言 哪个适合新手
- VMware虚拟机ubuntu ros安装摄像头驱动
- shanzhi - 小球游戏
- 【Task08】Numpy学习打卡
- vs2019开发android so库
- 其他人的爱情 VS 程序员的爱情
- 用java处理speex编码/解码
- 叶胜超：跨链双雄之Cosmos（宇宙）
- h5网页调起扫一扫最简单的方法