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. Hibernate 单项多对一的关联映射

    在日常开发中会出现很对多对一的情况,本文介绍hibernate中多对一的关联映射. 1.设计表结构 2.创建student对象 3.创建Grade对象 4.写hbm.xml文件 5.生成数据库表 生成 ...

  2. [BZOJ4553][TJOI2016&&HEOI2016]序列(CDQ分治)

    4553: [Tjoi2016&Heoi2016]序列 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 1202  Solved: 554[Su ...

  3. NYOJ 298 点的变换 矩阵乘法

    http://acm.nyist.net/JudgeOnline/problem.php?pid=298 最好还是自己手推一下矩阵式子..不算太难..但是有一些小知识.... 首先当然是矩阵的细节.. ...

  4. 【BZOJ】4709: [Jsoi2011]柠檬

    4709: [Jsoi2011]柠檬 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 779  Solved: 310[Submit][Status][ ...

  5. Markdown---锚点使用

    Markdown目前还没有支持文内锚点的标记语法:但是支持html,所以锚点可以通过html语法来实现 使用方法 <a href='#jump'>第一个题目</a> 带有锚点的 ...

  6. Rails -- 自动清除日志

    在开发模式中,开发环境日志会越来越大,所以需要设置自动清理,省内存. 在 config/initializers中新建一个文件 clear_blog.rb 编写如下代码 if Rails.env.de ...

  7. php 安装 Redis 扩展

    开发环境安装包为:wamp3.1.0,安装成功后 wamp/bin 目录下有php以下几个版本: 这里以php7.1.9为例进行redis扩展安装,其他php版本也是一样的. 进行安装 step 1: ...

  8. pom通用依赖

    <dependencies><!--common--><dependency><groupId>com.google.guava</groupId ...

  9. 调整设置 Win7休眠文件“Hiberfil.sys”

    1. 显示并查看Hiberfil.sys文件

  10. EventBus (二) 使用详解——EventBus使用进阶

    相关文章: 1.<EventBus使用详解(一)——初步使用EventBus> 2.<EventBus使用详解(二)——EventBus使用进阶> 一.概述 前一篇给大家装简单 ...