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. 复制对象 copy 与mutable copy

      转载 :  http://blog.csdn.net/u010962810/article/details/18887841   通过copy方法可以创建可变对象或不可变对象的不可变副本,对于不可 ...

  2. Oracle 后台进程 详细说明

    一. 进程概述 先来看一下Oracle 11g 的架构图. 看起来比较模糊,我已经上传到了csdn 的下载. 是个pdf 文件, 2m 多. 那个看起来比较清楚. 也对每个进程做了解释. 下载地址:O ...

  3. luogu P1291 [SHOI2002]百事世界杯之旅

    题目链接 luogu P1291 [SHOI2002]百事世界杯之旅 题解 设\(f[k]\)表示还有\(k\)个球员没有收集到的概率 再买一瓶,买到的概率是\(k/n\),买不到的概率是\((n-k ...

  4. NPOI读取Excel2003,2007

    using System; using System.Collections.Generic; using System.Data; using System.IO; using System.Lin ...

  5. 长按事件OnLongClickListener

    1.MainActivity.java package com.example.administrator.hello4; import android.support.v7.app.AppCompa ...

  6. Word如何设置单元格垂直居中

    那两个上面是水平居中,下面是垂直居中.

  7. IIS 日志

    查看工具: Log Parser + Log Parser Studio http://www.microsoft.com/en-us/download/details.aspx?displaylan ...

  8. grpc（3）：使用 golang 开发 grpc 服务端和client

    1,关于grpc-go golang 能够能够做grpc的服务端和client. 官网的文档: http://www.grpc.io/docs/quickstart/go.html https://g ...

  9. HTML5 Canvas 绘制库存变化折线 计算出最高最低库存

    <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type&quo ...

  10. Mysql 中文中繁杂的字 插入报错的 解决方案

    首先 数据库默认编码选用 utf8 连接字符串也相应改成utf8,不能是gb2312