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. Java并发（七）：双重检验锁定DCL

    双重检查锁定(Double Check Lock,DCL) 1.懒汉式单例模式,无法保证线程安全: public class Singleton { private static Singleton ...

  2. @SuppressWarning 抑制警告注解

    @SuppressWarning 抑制警告注解 Java.lang.SuppressWarnings 是 J2SE5.0中标准的Annotation 之一. 可以标注在类,字段,方法,参数,构造方法, ...

  3. JSON 与 JS 对象的关系

    很多人搞不清楚 JSON 和 Js 对象的关系,甚至连谁是谁都不清楚.简单来说: JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串. 如 var obj ...

  4. php上传文件常见问题(基础)

    既然上一篇文章<php上传中文文件文件名乱码问题>遇到了文件上传的问题,干脆把php上传文件时经常碰到的几个问题总结一下吧,以后用到时不用再去找了. 1.先做个最简单的上传文件 <h ...

  5. [转] Spring MVC 4.1.3 + MyBatis 零基础搭建Web开发框架

    首先感谢一下润和软件,指引我走上了Spring MVC Web开发的道路. 下面进入正题 搭建开发环境: Netbeans8.0.2 + MySql5.6 + JDK1.7 + tomcat8.0.1 ...

  6. Codeforces Round #302 (Div. 2) B. Sea and Islands 构造

    B. Sea and Islands Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/544/p ...

  7. jsoup-1.7.2.jar 包

    org.jsoup.Jsoup; org.jsoup.nodes.Document; org.jsoup.nodes.Element; org.jsoup.select.Elements;

  8. PHP语言的优势？

    稳定性: 毫无疑问,PHP已经是目前互联网服务端使用最广泛的编程语言之一,目前PHP在互联网应用领域的占有率位居全球第一.试问,如果本身不够成熟和稳定,如何能占有如此大的市场呢? 易用性: 简单实用, ...

  9. Supported_Hardware#4G_LTE_cards_and_modems

    https://wiki.mikrotik.com/wiki/Supported_Hardware#4G_LTE_cards_and_modems

  10. PHP 函数之 call_user_func &amp; call_user_func_array

    call_user_func_array (callable $callback, array $param_arr) 參数1: 调用一个回调函数, 參数2: 数组參数是回调函数的參数. call_u ...