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. RxSwift 系列(三)

    RxSwift 系列(三) -- Combination Operators 前言 本篇文章将要学习如何将多个Observables组合成一个Observable.Combination Operat ...

  2. dev devfs udev sysfs及关系

        Linux 下对设备的管理方式主要有/dev和sysfs两种,前者是将设备注册为设备节点放入/dev目录下,而后者是在linux2.6内核后引入的新的文件系统. ➤/dev方式 关于/dev的 ...

  3. 【BZOJ 4403】 4403: 序列统计 （卢卡斯定理）

    4403: 序列统计 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 653  Solved: 320 Description 给定三个正整数N.L和R, ...

  4. 【插头DP】BZOJ1187- [HNOI2007]神奇游乐园

    [题目大意] 在n*m的网格中选一条回路,使权值和最大. [思路] 和之前裸的插头DP差不多,只不过现在回路不需要经过所有的格子.所以有以下几个注意点(具体看注释): (1)left和up插头相等的时 ...

  5. CDOJ 1314 Hash Perfectly FFT

    Hash Perfectly 题目连接: http://acm.uestc.edu.cn/#/problem/show/1314 Description In computing, a hash ta ...

  6. Codeforces Round #299 (Div. 2) A. Tavas and Nafas 水题

    A. Tavas and Nafas Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/535/pr ...

  7. Shell基础学习(二) Shell变量

    1.数据类型: 字符串 数组 2.变量的命名规范: 只能以a-z或A-Z开头 中间不能有空格,可以使用_ 不能使用标点符号 不能使用shell的关键字 3.变量类型: 环境变量 局部变量 shell变 ...

  8. mysqldump之字符集问题解决

    最近导数据的需求真多,年底了大家都要做分析吗?近期使用mysqldump导出的中文出现乱码问题. mysqldump -uroot -ppassword -S /tmp/mysql9991.sock ...

  9. Spring过滤器组件自动扫描

    在这个Spring自动组件扫描的教程,您已经了解如何使Spring自动扫描您的组件.在这篇文章中,我们将展示如何使用组件过滤器自动扫描过程. 1.过滤组件 - 包含 参见下面的例子中使用Spring  ...

  10. linux上SVN解决冲突的办法

    转载:http://www.aixchina.net/club/thread-25902-1-1.html 这里,先说说冲突解决. 怎么会发生冲突呢? 两个人修改了不同文件?不会有冲突,他们不相关. ...