ionic--配置路由
1.ng-route
index中引用文件:
<script src="ionic.bundle.js"></script>
<script src="angular.min.js"></script> <!--如果路径上出现!,可能是angular,js版本和angular-route.min.js版本不兼容,可换一下版本试试-->
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
index
<div ng-view ></div>
app.js中配置路由:
angular.module("myApp",["ngRoute","myController","serviceController"]) .config(function($routeProvider){
$routeProvider.when("/news",{
templateUrl:"news.html",
controller:"newscontroller"
}).when("/news-datails/:aid",{
templateUrl:"news-datails.html",
controller:"datailscontroller"
}).otherwise({
redirectTo:'/news'
})
});
1.引入 angularjs 引入 angular-route.js
2.定义 ng-app="myAPP"
3.angular.module('myAPP',['ngRoute'])
4.定义 配置路由
5.定义视图 动态加载的 模板和控制器显示到哪里
<div ng-view></div>
2.ionic-ui-router
引用文件
<script src="ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="ionic.min.css">
index
<!--公共头部-->
<ion-nav-bar class="bar-calm">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar> <ion-nav-view></ion-nav-view>
子页面模板代码:
<ion-view title="主页"> <!--头部需要添加按钮的时候,加上ion-nav-buttons--> <ion-nav-buttons side="right">
<a href="#/tabs/list-datail/111" class="button button-clear">详情</a>
</ion-nav-buttons> <ion-content>
home
</ion-content>
</ion-view>
app.js路由配置
angular.module("myApp",["ionic","shopcontroller","serivecontroller"])
.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state("list",{
url:"/list",
templateUrl:"list.html",
controller:"listController"
})
.state("list-datail",{
url:"/list-datail/:id",
templateUrl:"list-datail.html",
controller:"listDatailController"
});
$urlRouterProvider.otherwise("/list"); });
1.调用$state.go()方法, js跳转
2.点击包含ui-sref指令的链接 <a ui-sref="productlist">Go State 1</a>
3. 导航到与状态相关联的 url。 <a href="#/productlist">Go State 2</a>
$stateProvider 配置路由 $urlRouterProvider 默认跳转
<!--ng-view ngRouter--> <!--ui-view ui-router-->
1.定义视图 ion-nav-view ionic中定义视图 默认有动画了
2.ion-nav-bar 定义公共导航
3.ion-view 模板里面的所有东西放在这个里面 title定义公共导航的标题
4.ion-nav-back-button 自动返回按钮
3.ionic-ui-router+tabs
引用文件、index、子页模板代码同ionic-ui-router
tabs模板代码:
<ion-tabs class="tabs-calm tabs-color-light tabs-icon-top">
<ion-tab title="首页" icon-on="ion-home" icon-off="ion-home" href="#/tabs/home">
<ion-nav-view name="tabHome"></ion-nav-view>
</ion-tab> <ion-tab title="新闻" icon-on="ion-ios-paper-outline" icon-off="ion-ios-paper-outline" href="#/tabs/news">
<ion-nav-view name="tabNews"></ion-nav-view>
</ion-tab>
</ion-tabs>
路由配置:
angular.module("myApp",["ionic","appController","serviceController"])
.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state("tabs",{
url:"/tabs",
abstract:true, /*抽象的 只要定义 abstract=true 我们的路由就不会解析这个地址*/
templateUrl:"tabs.html"
})
.state("tabs.home",{
url:"/home",
views:{
"tabHome":{
templateUrl:"home.html"
}
}
})
.state("tabs.newsContent",{
url:"/newsContent/:id",
views:{
"tabNews":{
templateUrl:"newsContent.html",
controller:"listDatailController"
}
},
})
$urlRouterProvider.otherwise('/tabs/home');
})
ionic--配置路由的更多相关文章
- Ionic实现路由ion-tabs
1.导包 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalabl ...
- [SignalR]配置路由
原文:[SignalR]配置路由 注册路由,在代码如下(SignalR 1.*): 脚本修改如下: 但是其官方文档解释是: By default, the route URL which client ...
- angular配置路由/子页面+vue配置路由/子页面
1.在vue.js中组件可以复用,然后最近配置了几个子页面 在 这个文件中配置路由,子页面的配置跟其他一样,只不过path不同. routes: [ { path: '/', ...
- vue2.0配置路由
配置路由之前,先检查vue版本,(案例适用vue2.0) 采用npm包的形式进行安装. 安装路由依赖:npm install vue-router(代码中,如果在一个模块化工程中使用它,必须要通过 V ...
- flutter 入口文件配置路由+加载页面
入口文件配置路由 1.路由信息 -- 加载页面 ,通常用于显示新的内容或者广告,加载完成之后进入主页面 -- 主页面 /app 2.配置页面 main.dart main.dart // main ...
- Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面
制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开 ...
- linux deb系 rpm系 配置路由
deb: 添加默认路由:route add default gw 8.46.192.1 添加网段路由:route add -net 8.46.0.0/19 gw 8.46.192.1 删除路由:把 a ...
- urls.py的配置[路由配置]
urls.py的配置[路由配置] Get请求与Post请求的方式 get请求: (1)地址栏输入url (2)<a href="请求url">点击</a> ...
- Windows两个网卡配置路由规则 同时访问内网和外网
电脑上有两个网卡,一个有线一个无线,有线连局域网,无线连外网,虽然两个网都连着,但还是会出现访问不通的情况. 这就要求我们自己来配置路由规则,让内网的访问走内网的网卡,外网的访问走外网的网卡. 一.查 ...
- centos和ubuntu配置路由的三种方式
本篇总结三种修改路由的方式:route, ip route, 以及通过修改文件来配置路由,前2种命令行形式适用于ubuntu和centos,重启失效,最后一种永久有效. 一. route命令 ...
随机推荐
- 多线程atomicInteger
并发编程的3个重要概念 1.原子性: 一个操作或者多个操作,要么全部成功,要么全部失败 1.java中保证了基本数据类型的读取和赋值,保证了原子性,这些操作不可终端 a=10 原子性 b=a 不满足 ...
- abp 依赖注入声明
public class SchedulerManager : ISingletonDependency { private ILogger logger; public SchedulerManag ...
- [BJOI2014]大融合(LCT)
题面 luogu bzoj是权限题.. 题解 \(LCT\)维护子树信息 因为\(LCT\)中有一些虚子树,\(splay\)维护不了. 所以要新开一个数组来记录 然后注意\(link\)时 是先\( ...
- 洛谷P3980 [NOI2008]志愿者招募
题解 最小费用最大流 每一天是一条边\((inf-a[i], 0)\) 然后对于一类志愿者, 区间两端连一条\((inf, c[i])\) \(S\)向第一个点连\((inf, 0)\) 最后一个点向 ...
- Jupyter Notebook & Spyder 常用快捷键
Jupyter Notebook: 1. "shift + enter" notebook单元格内执行代码,并且自动跳至下一个的单元格 2. "tab" 自动补 ...
- CentOS7.6下模拟iSCSI,Windows来连
如题,在CentOS7上模拟一个iSCSI设备,然后在Windows Server 2008上连接这个iSCSI设备 第一步,CentOS7上的操作.CentOS7上安装iSCSI模拟器需要3个包,我 ...
- Windows10 安装 .Net 3.5 失败的解决方案
最近因为使用一个公司内部的工具,需要安装.Net 3.5 SP1, 却发现无论如何都安装不上,无论是通过在线和离线安装包,还是通过Windows自带的feature安装功能,每次都是会提示错误0x80 ...
- Mac 10.12安装StarUML
说明:这款是收费软件,但是可以不缴费继续使用,然后就是有弹框提示收费而已.基本揽括了时序图.用例图.流程图等等.主要是跨平台且小巧. 下载: (链接: https://pan.baidu.com/s/ ...
- React之表单
第一部分:表单基础 在React中,修改表单的唯一途径是使用setState方法.举例如下: class NameForm extends React.Component { constructor( ...
- MyBatis异常总结
1 Invalid bound statement 1 org.apache.ibatis.binding.BindingException: Invalid bound statement (not ...