ionic---state路由

路由结构分析(tabs结构)

//tabs基础路由
.state('tab', {
    url: '/tab',
    abstract: true,             //设置为基础路由
    templateUrl: 'templates/tabs.html'      //也可以加控制器
})
//首页路由部分(一级)
.state('tab.index', {       //用于state跳转,不可重复
    url: '/index',          //用于url跳转,或者$location.path('/tab/index');
    views: {
        'tab-index': {      //将这个页面显示在tab路由下,与tab.html中name对应
            templateUrl: 'templates/index/index.html',
            controller: 'indexCtrl'
        }
    },
    cache:false  //设置页面是否缓存
})
//未接单的订单详情页面(二级)
.state('tab.orderDetail', {
    url: '/index/orderDetail/:orderDetailNum',  //可以传递参数
    views: {
        'tab-index': {
            templateUrl: 'templates/index/orderDetail.html',
            controller: 'orderDetailCtrl'
        }
    },
    cache:false
})

路由跳转的方式

  • url跳转
<a class="button button-clear"  href="#/tab/goods/addDesk" >添加</a> //普通
<a href="#/tab/index/orderDetail/{{weixinOrder._id}}">              //传参
  • 控制器中$location.path()

$location说明http://www.angularjs.cn/A00M

$location.path('/tab/index');

控制器中$state.go() (推荐使用)

$state.go('tab.index', {}, {
    reload: true
});

$state.go()跳转方式

  • 传递参数
//app.js中确定参数
.state('tab.lemoneyCount', {
    url: '/le/lemoneyCount',
    params:{method:null,productid:null,rate:null,uprate:null},//先确定参数名
        views: {
            'tab-le': {
                templateUrl: 'templates/money/moneyCount.html',
                controller: 'lemoneyCountCtrl'
        }
    }
})

//控制器中传递具体参数
$state.go('tab.lemoneyCount', {method:aa,productid:bb,rate:cc,uprate:dd}, {
    reload: true //下个页面不缓存 配合路由中cache使用
});

//下个页面控制器接收参数
.controller('leinvestRecordCtrl', function($stateParams) {
    var Params = $stateParams;
    var method = $stateParams.method;
});

$ionicHistory路由历史记录

ionicHistoryionicHistoryionicWeb线退访ionicHistoryvarhistoryData= ionicHistory.viewHistory();

返回该应用程序的视图历史数据,如所有的视图和历史记录,以及它们如何在导航堆栈中一起有序和链接的方式
- var currentViewData=$ionicHistory.currentView()

返回当前视图数据
- var currentHistoryId = $ionicHistory.currentHistoryId()

返回历史堆栈的标识,它是当前视图的父容器
- var currentTitle = $ionicHistory.currentTitlt([val])

返回当前视图的标题 或者是设置当前视图的标题
- var backView = $ionicHistory.backView()

返回当前视图的前一个视图
- var backViewTitle = $ionicHistory.backViewTitle()

返回当前视图的前一个视图的标题
- var forwardView = $ionicHistory.forwardView()

返回当前视图后一个视图数据 (如果有)
- var currentStateName = $ionicHistory.currentStateName()

返回当前视图的状态名称 如tab.sal
- $ionicHistory.goBack([backCount])

导航到应用程序的返回视图(加入视图存在)backCount填写负数
- $ionicHistory.removeBackView()

移除当前视图的前一个视图,包括缓存元素和范围(如果它们存在的话)。
- $ionicHistory.clearHistory()

清除应用程序的整个历史,除了当前视图。
- var promise = $ionicHistory.clearCache(stateIds)

清除缓存,传入参数,stateIds是一个数组,清除缓存的列表

  • $ionicHistory.nextViewOptions({
    disableAnimate: true,
    disableBack: true,historyRoot:true});

目前使用中的小问题

问题1

描述:当想从一个tab下的页面 跳到另外一个tab下的页面时,后退按钮不能显示。

暂时解决办法:在两个tab下都写这个页面的路由,公用页面控制器。

问题2

描述:后退按钮不能正常显示。

暂时解决办法:无

安装Ionic iOS涉及几个步骤,首先需要确保你的开发环境已经准备好,包括安装Node.js、npm(Node.js包管理器)、Git以及安装Xcode(苹果的集成开发环境)。以下是安装Ionic和配置iOS环境的基本步骤: 1. 安装Node.js和npm(如果还没有安装): - 访问Node.js官网下载并安装Node.js。npm作为Node.js的一部分也会被自动安装。 - 可以通过命令行工具运行 `node -v` 和 `npm -v` 来检查是否安装成功。 2. 使用npm安装Ionic CLI(命令行工具): - 打开终端或命令提示符,执行以下命令安装Ionic CLI: ``` npm install -g ionic@latest ``` - 运行 `ionic --version` 来验证安装是否成功。 3. 安装CocoaPods(iOS的依赖管理工具): - 这一步仅限于Mac用户。CocoaPods用于管理iOS项目中的依赖。在终端中运行以下命令来安装CocoaPods: ``` sudo gem install cocoapods ``` - 安装完成后,运行 `pod --version` 来检查是否安装成功。 4. 创建新的Ionic项目并添加iOS平台支持: - 执行以下命令来创建一个新的Ionic项目(或者你可以克隆一个现有的Ionic项目): ``` ionic start myApp blank --type=ionic-angular ``` - 进入项目目录: ``` cd myApp ``` - 添加iOS平台支持: ``` ionic platform add ios ``` 5. 使用Xcode打开项目并运行: - 打开Xcode,选择“Open another project...”并导航到你的Ionic项目目录中的 `/platforms/ios/` 文件夹,打开 `YourAppName.xcworkspace` 文件。 - 确保你已经有一个有效的开发者账号,并且配置了开发者证书和描述文件。 - 点击Xcode工具栏上的运行按钮(播放图标),选择一个合适的模拟器或连接的iOS设备来运行你的应用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

leason00

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值