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. 【基数排序】Divide by Zero 2017 and Codeforces Round #399 (Div. 1 + Div. 2, combined) C. Jon Snow and his Favourite Number

    发现值域很小,而且怎么异或都不会超过1023……然后可以使用类似基数排序的思想,每次扫一遍就行了. 复杂度O(k*1024). #include<cstdio> #include<c ...

  2. 【二分答案】【最大流】bzoj3130 [Sdoi2013]费用流

    二分最大的边的cap,记作Lim. 把所有的边的cap设为min(Lim,cap[i]). Bob一定会把单位费用加到最大边上. #include<cstdio> #include< ...

  3. linux下查看端口占用情况以及服务启动的目录

    1.先介绍几个命令: 1. lsof -i:80 查看80端口的占用情况 命令返回结果: COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME ngin ...

  4. iOS中的场景转换机制的浅显分析

    目前Apple推荐的场景转换的方法有以下几个: 一般的跳转方法: presentViewController Discussion In a horizontally compact environm ...

  5. RequireJs 入门

    官网:http://www.requirejs.cn/ 使用方法: 1.引入require.js 可以在底部引入: <script type="text/javascript" ...

  6. fullPage全屏滚动的实现

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站. 用法: 1.引入jquery 2.引入fullPage 3.每个section代表一屏 4.js启动: ...

  7. SqlServer_合并多个递归查询数据（CTE）

    该方法在数据量过大时,效率过低,可参考hierarchyid字段实现(Sqlserver 2008) 优点:效率较高 缺点:需要不断维护数据,对现有业务有一定影响 参考:http://www.cnbl ...

  8. 深度增强学习--Actor Critic

    Actor Critic value-based和policy-based的结合 实例代码 import sys import gym import pylab import numpy as np ...

  9. http://www.cnblogs.com/shortboy/p/4429368.html

    http://www.cnblogs.com/shortboy/p/4429368.html

  10. asp.net购物车，订单以及模拟支付宝支付（二）---订单表

    购物车准备完毕之后,就要着手订单表的设计了 表结构如下: T_Orders T_OrderBooks 为什么这里要分为两个表? 仔细想想,现实生活中的发票 特地去网上找了一张,不是很清晰 但是,正常人 ...