利用ionic1 、angularJs1 框架来做的一款app (三)实现路由ion-tabs

最新推荐文章于 2020-12-03 21:01:36 发布
最新推荐文章于 2020-12-03 21:01:36 发布
阅读量363 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lions_mouse/article/details/83650746
版权

目录

(1) . 导包

(2) . 写js路由

(3) . 绘制html页面

(4) . 在controller.js 添加声明对应controller

(5) . 在index.html声明整个app用这个模型

(6) . 三个html页面

(7) . 效果图

(1) . 导包

<script src="js/app.js"></script>

<script src="lib/ionic/js/ionic.bundle.js"></script>

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

(2) . 写js路由

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

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

  $stateProvider

  .state('tab', {

      url: '/tab',

      abstract: true,

      controller: 'tabCtrl',

     templateUrl: 'templates/tabs.html'

  })

  .state('tab.pendingWork', {

     url: '/pendingWork',

     views: {

         'tab-pendingWork': {

         templateUrl: 'templates/tab-pendingWork.html',

         controller: 'pendingWorkCtrl'

         }

     }

  })

  .state('tab.doneWork', {

     url: '/doneWork',

     views: {

         'tab-doneWork': {

         templateUrl: 'templates/tab-doneWork.html',

         controller: 'doneWorkCtrl'

         }

    }

  })

  .state('tab.aboutSoftware', {

     url: '/aboutSoftware',

     views: {

         'tab-aboutSoftware': {

         templateUrl: 'templates/tab-aboutSoftware.html',

         controller: 'aboutSoftwareCtrl'

         }

     }

  });

  $urlRouterProvider.otherwise('/tab/pendingWork')

});

(3) . 绘制html页面

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

       <ion-tab title="待办单据" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/tab/pendingWork">

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

       </ion-tab>

       <ion-tab title="已办单据" icon-off="ion-ios-paper-outline" icon-on="ion-ios-paper" href="#/tab/doneWork">

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

       </ion-tab>

       <ion-tab title="关于我们" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/aboutSoftware">

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

       </ion-tab>

</ion-tabs>

(4) . 在controller.js 添加声明对应controller

.controller('tabCtrl',function($scope){})

.controller('pendingWorkCtrl', function($scope, Chats) {

})

.controller('doneWorkCtrl', function($scope, $stateParams, Chats) {

})

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

});

(5) . 在index.html声明整个app用这个模型

<body ng-app="starter">

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

          <ion-nav-back-button>

          </ion-nav-back-button>

     </ion-nav-bar>

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

</body>

(6) . 三个html页面

<ion-view view-title="待办事务">

<ion-content>

待办事务

</ion-content>

</ion-view>



<ion-view view-title="已办事务">

<ion-content class="padding">

已办事务

</ion-content>

</ion-view>



<ion-view view-title="关于我们">

<ion-content>

关于我们

</ion-content>

</ion-view>

(7) . 效果图

                                            

lions_mouse
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ionic组件ion-tabs(选项卡)实例
安人多梦的博客
04-04 4854
ion-tabs是ionic中的选项卡组件，路由使用的是angular-ui-router.js。因此必须先掌握uiRoute。
ionic3项目实战教程二（新建component、新建page、修改tabs、弹窗alertCtrl、跳转navCtrl、带参跳转、ion-list、ion-input、button）
一袋米要扛几楼_
07-21 5240
一、修改代码项目奔溃 修改完代码之后会发现控制台报错了 events.js:183 throw er; // Unhandled 'error' event ^ Error: read ECONNRESET at _errnoException (util.js:1024:11) at TCP.onread (net.js:615:25) 2.执...
用AngularJS的指令实现tabs切换效果
10-21
介绍的是写一个通过指令嵌套实现tabs功能的指令模块，这也是我在一个项目中应用到的，现在分享给大家，有需要的可以参考借鉴。
移动app之ionic框架css布局
xyphf的博客
12-12 6512
声明：本文转自汇智网，转载只为传播更多信息，版权归原作者所有。Ionic简介ionic是一个强大的_混合式/hybrid_HTML5移动开发框架，特点是使用标准的HTML、 CSS和JavaScript，开发跨平台（目前支持：Android、iOS，计划支持：Windows Phone、Firefox OS） 的原生App应用： ionic主要包括三个部分： CSS框架
利用ionic1 、angularJs1 框架来做的一款app (一)创建ionic 1项目
lions_mouse的博客
11-01 742
文章目录     (1) . 安装nodejs     (2) . 安装最新版本的cordova 和 ionic     (3) . 创建ionic1 项目       (1) . 安装nodejs  在nodejs官网上下载安装包。     (2) . 安装最新版本的cordova 和 ionic npm install -g cordova ionic      (3) . ...
ionic3 tabs切换子页面详解（包括默认进入切换到某一子页面，或者在子页面触发事件切换）
qq_37705048的博客
02-12 2584
ionic提供了一个tabs的页面，如图: 一般情况下默认是第一个选中状态，显示第一个子页面 1、当希望进入app后默认出现第二个子页面的内容，并且选中第二个tab，在tabs页面如下 import { Component, ViewChild } from '@angular/core'; import { Tabs } from 'ionic-angular'; import { Plan...
AngularJS+Ionic开发-1.搭建开发环境
weixin_33834910的博客
07-10 164
临时项目需要使用AngularJS+Ionic+Cordova技术，半年前跟别人用过一段时间做过几个页面，目前别人已经无法联系了，只能我自己上了。 上次做完项目后，想抽时间好好巩固一下这方面的知识面来，后来其他项目忙起来就给扔下，主要原因还是懒啊，其实有好多的技术排着队等着好好研究呢，就是懒啊。 开发第一步，需要先把开发环境搭建起来。 1.开发IDE 选择VS Code，官方下载地址:https:...
ionic组件ion-tabs选项卡切换效果实例
01-19
ion-tabs是ionic中的选项卡组件，路由使用的是angular-ui-router.js。因此必须先掌握uiRoute。 效果图 实例代码 index.html <body ng-app=starter> <!--ion-nav-view用来渲染模板--> <ion></ion> ...
三步实现ionic3点击退出app程序
10-16
在本文中，我们将深入探讨如何实现一个功能，即在Ionic 3框架中，当用户点击按钮或连续两次按下硬件返回键时退出应用程序。这个过程主要包括三个步骤，让我们逐一详细解析。 第一步是在`tabs.ts`文件中声明`tabs`...
ionic4自定义tabs切换.zip
07-03
Ionic 4是一个基于Angular的框架，提供了强大的移动应用开发功能，其中包括一个方便的tabs组件，用于实现多页面间的切换。然而，有时我们可能需要对默认的tabs行为进行定制，以满足特定的设计或功能要求。以下将详细...
完整的Ionic项目实例
03-13
代码经过Cordova编译处理的，用于自学使用，如有需要，可以私信我（注：学习使用，保存资源，避免丢失）
1.1 ionic入门——新建ionic项目
baiquji8783的博客
09-17 125
（一）ionic是什么 简单的讲，ionic是一个跨平台框架，一个让你只写一次代码却可以将android、iOS、微信公众号、移动端web页面一把撸的框架。 （二）ionic的基石 ionic是基于谷歌的Angular框架，在这个框架上做了封装，使得我们开发移动端程序更为便捷。 ionic还基于Cordova框架，Cordova这个框架使用Javascri...
ionic 第一个APP示例
weixin_34067102的博客
11-30 302
2019独角兽企业重金招聘Python工程师标准>>> ...
Angular与ionic的幸福生活之“tabs路由“的项目结构及跳转方式
qq_44963669的博客
12-03 319
Angular与ionic的幸福生活之“tabs路由“的项目结构及跳转方式 如何快速的上手使用 icon tabs 呢，首先要熟悉性项目结构知道怎么去配置这个路由，每部分是干啥的，这样才能快速上手节约学习时间 1. 快速生成项目 ionic start mfreshApp 自定义文件名称 2.熟悉项目结构 什么是根路由？就是管理注册路由的一个目录，只要是出创建的子路由，都要在根路由中注册，用命令行 ionic g page 项目名称，自动生成，但仍需要去配置这个路由，需要手动去配置，值得庆幸的是项目包中
OnSen UI结合AngularJs打造”美团"APP"逛一逛”页面 --Hybrid App
whiteGay的博客
10-13 481
1、页面效果图： 演示链接地址：http://www.nxl123.cn/bokeyuan/meiTuanDemo_walk/ 2、核心代码 walk.html： <ons-page id="walk...
Ionic+Angular移动应用程序开发
weixin_43862492的博客
08-16 1052
angular+ionic移动应用程序开发
AngularJS实现Tab
柯思铭的博客
08-31 2825
ng实现Tab ul {     list-style: none;     padding: 0;     margin: 0; } li {     float: left;     border: 1px solid #000;     border-bottom-width: 0;     margin: 3px 3px 0px 3px;     pa
Ionic基础——ion-tap选项卡及路由结合ion-tap详解
热门推荐
bboyjoe的博客
02-16 1万+
一.选项卡 : ion-tabs简单介绍 使用ion-tabs指令声明选项卡，使用ion-tab声明选项页：  ... ... ... 每个ion-tab元素的title属性值将作为选项页的标题其 内容将填充选项卡书签栏之外的剩余区域（被应用.pane样式）。 注意： 1. 不要把ion-tabs指令放在ion-content之内 2. ion-tab的内容应当放入ion-vie
利用ionic1 、angularJs1 框架来做的一款app (二)app页面如何显示
lions_mouse的博客
11-01 274
目录 (1) . 页面在浏览器上显示 (2) . 将app打到测试机上 (1) . 页面在浏览器上显示 cd myApp ionic serve (2) . 将app打到测试机上 （ios 测试机） 需要在xcode 中配置，如下图             cordova platform add ios cordova build ios cordova run ios ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值