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. XPath中的text()和string()区别(转)

    原文地址 : http://blog.csdn.net/jiangchao858/article/details/63314426 本质区别 text()是一个node test,而string()是 ...

  2. 【主席树】BZOJ3932-[CQOI2015]任务查询系统

    [题目大意] 超级计算机中的任务用三元组(Si,Ei,Pi)描述,(Si,Ei,Pi)表示任务从第Si秒开始,在第Ei秒后结束(第Si秒和Ei秒任务也在运行),其优先级为Pi.询问,第Xi秒正在运行的 ...

  3. Activity研究

    ActivityManagerService 业务的整个逻辑关系被各种复杂的数据结构包裹着,因此对ActivityManagerService 的分析主要就是对各种数据结构的分析,明白了这些数据结构, ...

  4. BZOJ 2976: [Poi2002]出圈游戏 HDU 5668 CRT

    2976: [Poi2002]出圈游戏 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=2976 Description Input 中第一 ...

  5. PAT甲级1014. Waiting in Line

    PAT甲级1014. Waiting in Line 题意: 假设银行有N个窗口可以开放服务.窗前有一条黄线,将等候区分为两部分.客户要排队的规则是: 每个窗口前面的黄线内的空间足以包含与M个客户的一 ...

  6. 快速排序及查找第K个大的数。

    本文提供了一种基于分治法思想的,查找第K个大的数,可以使得时间复杂地低于nlogn. 因为快排的平均时间复杂度为nlogn,但是快排是全部序列的排序, 本文查找第k大的数,则不必对整个序列进行排序.请 ...

  7. linux下使用crontab创建定时任务

    在linux中启动crontab服务: /etc/init.d/crond start crontab的命令格式 crontab -l 显示当前的crontab 文件(默认编写的crontab文件会保 ...

  8. delphi tcp/ip IdTCPServer1实例一

    unit Unit1; interface uses  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Form ...

  9. java反射机制简单介绍

    1.字节码.所谓的字节码就是当java虚拟机载入某个类的对象时,首先须要将硬盘中该类的源码编译成class文件的二进制代码(字节码),然后将class文件的字节码载入到内存中,之后再创建该类的对象 2 ...

  10. Java：准备学习的高级主题

    ClassLoader GC Concurrent Transaction JTA JPA JDBC JNDI JNI JNA JNative OSGI JMS JSTL EL Servlet NIO ...