1.1.  ionic路由机制: 状态

1.2.  ion-nav-view

<body ng-controller="firstCtrl">

<a class="button" ui-sref="map">map</a>

<a class="button" ui-sref="music">music</a>

<a class="button" ui-sref="class">class</a>

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

<script type="text/ng-template" id="class.html">  Content of the template.class         </script>

<script>

var app = angular.module("myApp", ["ionic"]);

app.config(function($stateProvider) {

$stateProvider

.state("map", {

templateUrl: "templates/map.html"

})

.state("music", {

templateUrl: "templates/music.html"

}) .state("class", {

templateUrl: "class.html"

});

}).controller('firstCtrl',function($scope,$state){

$state.go('music');

})

</script>

</body>

触发状态迁移

²  调用$state.go()方法，这是一个高级的便利方法；

²  点击包含ui-sref指令的链接 <a ui-sref="state1">Go State 1</a>

²  导航到与状态相关联的 url。

1.3.  ionic中内联模板

单页面实现多模块，

AngularJS在编译时会将内联模板的id属性值和其内容,分别作为key 和value,存入$templateCache管理的hash表中:

常见的有几种情况。

n  使用ng-include指令        <div ng-include="'a.html'"></div>

n  使用$templateCache服务    var partial = $templateCache.get("a.html");

n  使用$http服务             $http.get("a.html",{cache:$templateCache}) .success(function(d,s){..}) .error(function(d,s){...});

1.4.  模板视图 : ion-view

定制标题:ion-nav-title,特定按钮:ion-nav-buttons,切换方式:nav-transition,切换方向: nav-direction

<ion-view  view-title="Home111">

<!--本视图可见时，ion-nav-title的内容将被载入导航栏作为标题ion-nav-buttons将被导航框架载入导航栏-->

<ion-nav-title>

<img src="img/firefox-logo.png" style="height:100%">

</ion-nav-title>

<ion-nav-buttons side="right">

<button class="button" ng-click="doSomething()"> register </button>

</ion-nav-buttons>

<ion-content>

<ion-list type="list-inset">

<ion-item ui-sref="music" class="item-icon-right">

map

<i class="icon ion-ios-arrow-right"></i>

</ion-item>

<ion-item ui-sref="music" class="item-icon-right" nav-transition="ios">  定制视图切换方式ios模拟

Go to music page!

<i class="icon ion-ios-arrow-right"></i>

</ion-item>

<ion-item ui-sref="music" class="item-icon-right" nav-direction="swap"> 视图转场时的切换方向

Go to music page!

<i class="icon ion-ios-arrow-right"></i>

</ion-item>

</ion-list>

</ion-content>

</ion-view>

1.5.  导航栏: ion-nav-bar

回退按钮 : ion-nav-back-button

<!--导航框架之导航栏-->

<ion-nav-bar align-title="center" class="bar-positive">

<ion-nav-back-button></ion-nav-back-button>

</ion-nav-bar>

1.6.  脚本接口 : $ionicNavBarDelegate

1.7.  访问历史 : $ionicHistory

Ionic学习笔记4_ionic路由(页面切换)的更多相关文章

  1. angular学习笔记(十七)-路由和切换视图

    本篇介绍angular中如何通过判断url的hash值来显示不同的视图模板,并使用不同的控制器: 下面,通过一个例子,来一步一步说明它的用法: 我们要做一个邮箱应用,打开的时候显示的是邮件列表: 然后 ...

  2. vue2.0学习笔记之路由（二）路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue2.0学习笔记之路由（二）路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. SpringBoot学习笔记：动态数据源切换

    SpringBoot学习笔记:动态数据源切换 数据源 Java的javax.sql.DataSource接口提供了一种处理数据库连接的标准方法.通常,DataSource使用URL和一些凭据来建立数据 ...

  5. 【swift学习笔记】二.页面转跳数据回传

    上一篇我们介绍了页面转跳:[swift学习笔记]一.页面转跳的条件判断和传值 这一篇说一下如何把数据回传回父页面,如下图所示,这个例子很简单,只是把传过去的数据加上了"回传"两个字 ...

  6. Ionic 学习笔记

    本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/7831153.html 注: 本篇学习笔记基于Ionic 3 ...

  7. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  8. Xamarin 学习笔记 - Page（页面）

    本文翻译自CodeProject文章:https://www.codeproject.com/Articles/1226447/Xamarin-Notes-Xamarin-Forms-Pages 转载 ...

  9. Tornado学习笔记(二) 路由/post/get传参

    本章我们学习 Tornado 的路由传参等问题 路由 路由的匹配 Tornado的路由匹配采用的是正则匹配 一般情况下不需要多复杂的正则,正则的基本规则如下(站长之家) 举个例子 (r'/sum/(\ ...

随机推荐

  1. java中集合里的泛型

    import java.util.ArrayList;/* * 泛型 : java jdk1.5新特性. * 泛型的好处 : * 1.将运行时的错诶提前到编译时. * 2.避免无谓的强制类型转换. * ...

  2. error和exception的区别

    ------解决方法--------------------------------------------------------了解异常与错误的区别,并且知道当你截获一个异常时,应该怎么办.   ...

  3. TCP长连接与短连接的区别(转)

    1. TCP连接 当网络通信时采用TCP协议时,在真正的读写操作之前,server与client之间必须建立一个连接,当读写操作完成后,双方不再需要这个连接时它们可以释放这个连接,连接的建立是需要三次 ...

  4. Android中选项卡功能的实现

    Android中选项卡功能的实现 Android中使用TabHost和TabWidget来实现选项卡功能.TabHost必须是布局的根节点,它包含两个子节点: TabWidget,显示选项卡: Fra ...

  5. 用Qemu模拟vexpress-a9 （二） --- 搭建u-boot调试环境

    参考: http://blog.csdn.net/caspiansea/article/details/12986565 环境介绍 Win7 64 + Vmware 11 + ubuntu14.04 ...

  6. hibernate CascadeType属性

    CascadeType.PERSIST 只有A类新增时,会级联B对象新增.若B对象在数据库存(跟新)在则抛异常(让B变为持久态) : 级联保存,当调用了Persist() 方法,会级联保存相应的数据 ...

  7. BigDecimal类整除报错的解决方案

    例如: BigDecimal num1 = new BigDecimal("10"); BigDecimal num2 = new BigDecimal("3" ...

  8. 设计工作-Axure

    1,百度百科 http://baike.baidu.com/view/3332366.htm?fromtitle=axure&fromid=5056136&type=syn 2,官方网 ...

  9. 【业务自动化】iTop，全面支持ITIL流程的一款ITSM工具

    iTop产品针对的主要应用场景为:内部IT支持.IT外包管理.数据中心运维管理和企业IT资产管理.常青管理从绿象认证产品中选取了iTop作为主要推荐产品,本类别的绿象认证产品还包括:OTRS和RT3等 ...

  10. ITFriend站点内測公測感悟

    4月份做出站点Demo.就開始让用户使用了. 最初的黄色版界面.被吐槽得比較厉害. 关于界面.每一个人都有自己的看法,仅仅是喜欢和不喜欢的人比例不一样. 后来.花3400元请了个设计师,设计了一套界面 ...