demo2.html

<!DOCTYPE html>

<html ng-app="app">

<head>

    <meta charset="utf-8">

    <title>angular-demo2</title>

    <link href="../lib/ionic/css/ionic.css" rel="stylesheet">

    <script type="text/javascript" src="../lib/ionic/js/ionic.bundle.js" charset="utf-8"></script>

</head>

<body>

    <ion-nav-bar class="bar-stable">

      <ion-nav-back-button>

      </ion-nav-back-button>

    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

    <script type="text/javascript">

    var app = angular.module('app',['ionic']);

    app.controller('DashCtrl', function($scope) {})

    .controller('AccountCtrl', function($scope) {

      $scope.settings = {

        enableFriends: true

      };

    });

    app.config(function($stateProvider, $urlRouterProvider) {

          $stateProvider

          .state('tab', {

            url: "/tab",

            abstract: true,

            templateUrl: "templates/tabs.html"

          })

          .state('tab.dash', {

            url: '/dash',

            views: {

              'tab-dash': {

                templateUrl: 'templates/dash.html',

                controller: 'DashCtrl'

              }

            }

          })

          .state('tab.account', {

            url: '/account',

            views: {

              'tab-account': {

                templateUrl: 'templates/account.html',

                controller: 'AccountCtrl'

              }

            }

          });

          $urlRouterProvider.otherwise('/tab/dash');

        });

    </script>

</body>

</html>

tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Dashboard Tab -->

  <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">

    <ion-nav-view name="tab-dash"></ion-nav-view>

  </ion-tab>

  <!-- Account Tab -->

  <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">

    <ion-nav-view name="tab-account"></ion-nav-view>

  </ion-tab>

</ion-tabs>

dash.html

<ion-view view-title="Dashboard">

  <ion-content class="padding">

    <div class="list card">

      <div class="item item-divider">Recent Updates</div>

      <div class="item item-body">

        <div>

          There is a fire in <b>sector 3</b>

        </div>

      </div>

    </div>

    <div class="list card">

      <div class="item item-divider">Health</div>

      <div class="item item-body">

        <div>

          You ate an apple today!

        </div>

      </div>

    </div>

    <div class="list card">

      <div class="item item-divider">Upcoming</div>

      <div class="item item-body">

        <div>

          You have <b>29</b> meetings on your calendar tomorrow.

        </div>

      </div>

    </div>

  </ion-content>

</ion-view>

account.html

<ion-view view-title="Account">

  <ion-content>

    <ion-list>

    <ion-toggle  ng-model="settings.enableFriends">

        Enable Friends

    </ion-toggle>

    </ion-list>

  </ion-content>

</ion-view>

注意在配置路由的时候导航项的内容是不同的，添加了一个views子项

整个示例用到了七个ionic的标签：

ion-nav-bar 页面的头部导航bar
ion-nav-view 页面的正文内容
ion-view 页面内容
ion-nav-back-button 后退按钮（新增）
ion-tabs 页面导航栏（新增）
ion-tab 页面导航项（新增）
ion-toggle 开关项（新增）

在第一段ionic示例的基础上增加底部导航的更多相关文章

  1. 在Bootstrap开发框架基础上增加WebApi+Vue&Element的前端

    基于Metronic的Bootstrap开发框架是我们稍早一点的框架产品,界面部分采用较新的Bootstrap技术,框架后台数据库支持Oracle.SqlServer.MySql.PostgreSQL ...

  2. 我的第一段ionic代码

    ionic是基于angularjs的前端框架,用于实现移动app. 下面是第一段代码,先贴代码,有时间再整理: demo1.htm <!DOCTYPE html> <html ng- ...

  3. ASP.NET Web API实践系列06, 在ASP.NET MVC 4 基础上增加使用ASP.NET WEB API

    本篇尝试在现有的ASP.NET MVC 4 项目上增加使用ASP.NET Web API. 新建项目,选择"ASP.NET MVC 4 Web应用程序". 选择"基本&q ...

  4. ionic 进入多级目录以后隐藏底部导航栏（tabs）(完美解决方案)

    公司开始使用ionic开发项目,在此记录下把遇到的问题,网上有大牛已经把解决方法整出来了,不过记录在自己这里方便查阅. 这篇记录在有tabs的项目里,进入子层级时,底部导航还一直存在,本人是要让他只在 ...

  5. 传智播客C语言视频第二季(第一季基础上增加诸多C语言案例讲解，有效下载期为10.5-10.10关闭)

    卷 backup 的文件夹 PATH 列表卷序列号为 00000025 D4A8:14B0J:.│  1.txt│  c语言经典案例效果图示.doc│  ├─1传智播客_尹成_C语言从菜鸟到高手_第一 ...

  6. vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目

    vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:w ...

  7. ionic 进入二级目录以后隐藏底部导航栏（tabs）

    1.在标签ion-tabs中添加:ng-class=”{‘tabs-item-hide’: $root.hideTabs}”,源码如下: <ion-tabs class="tabs-i ...

  8. SQL某个字段在原内容上增加固定内容或replace查找替换内容

    今天正好遇到一个SQL小问题,特做备注 在原有的表中数据如pic 在不动原内容的基础上增加../路径,但不能修改原数据值 原数据 SQL: pic字段 需要增加'../'的内容 update Bmps ...

  9. 修改struts2自定义标签的源代码，在原有基础上增加功能(用于OA项目权限判断，是否显示某个权限)

    OA项目在做权限判断时  原始方式: 现在完成的功能 :通过改变struts2自定标签源代码   在原有的基础上  增加判断权限的功能  而页面上使用标签的方式 还是下图 步骤: 打开文件 搜索< ...

随机推荐

  1. FFTW3学习笔记1：VS2015下配置FFTW3（快速傅里叶变换）库

    一.FFTW简介 FFTW ( the Faster Fourier Transform in the West) 是一个快速计算离散傅里叶变换的标准C语言程序集,其由MIT的M.Frigo 和S. ...

  2. 记一次ms16-032成功提权win7/win12

    E:\Tools\提权大结合\ms16-032>whoami pc-20140503jfge\administrator 首先查看权限是administrator 随后溢出 可以看到是syste ...

  3. hdu 4352 数位dp+nlogn的LIS

    题意:求区间L到R之间的数A满足A的的数位的最长递增序列的长度为K的数的个数. 链接:点我 该题的关键是记录LIS的状态,学习过nlogn解法的同学都知道,我们每次加入的元素要和前面的比对替换,这里就 ...

  4. 【转】代码混淆和apk反编译

    代码混淆 http://blog.csdn.net/vipzjyno1/article/details/21042823 apk反编译 http://blog.csdn.net/vipzjyno1/a ...

  5. JVM堆内存的分代

    虚拟机的堆内存共划分为三个代:年轻代(Young Generation).年老代(Old Generation)和持久代(PermanentGeneration).其中持久代主要存放的是Java类的类 ...

  6. iOS开发经验总结——基础工程

    iOS开发经验总结--依赖库 这篇博客,我想说一下开发中经常遇到的一个问题,虚拟个场景描述一下的话,应该是这样的. 项目经理:今天我们正式开始一个新项目,iOSer你负责把苹果端的APP完成,有没有问 ...

  7. html5开发<video>视频字幕的程序

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8 ...

  8. Ubuntu环境下配置GCC

    Ubuntu网络环境下安装GCC及其头文件步骤: 1.Ubuntu环境下配置GCC 刚装好的GCC什么都不能编译,因为没有一些必须的头文件,所以要安装build-essential,安装了这个包会安装 ...

  9. 使用apache htpasswd生成加密的password文件，并使用.htaccess控制文件夹訪问

    htpasswd 是apache的小工具.在apache安装文件夹bin下可找到. Usage: htpasswd [-cmdpsD] passwordfile username htpasswd - ...

  10. 不会提示是否关闭浏览器 IE6、IE7、FF通用代码

    start = setInterval('CloseWin();', 2000); function CloseWin() //这个不会提示是否关闭浏览器 IE6.IE7.FF通用代码: { if ( ...