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. SendMessage 和 PostMessage

    1.首先是返回值意义的区别,我们先看一下 MSDN 里的声明: LRESULT SendMessage( HWND hWnd, UINT Msg, WPARAM wParam, LPARAM lPar ...

  2. Jenkins参数化构建Jenkins从文件中读取运行参数构建版本号

    https://www.cnblogs.com/xiaochengzi/p/8251805.html 安装Extended Choice Parameter插件 选择‘参数化构建过程’ maven c ...

  3. jboss启动时java VM参数设置

    jboss服务器中jvm参数的设置: 在$JBOSS_HOME/bin下的run.sh里面存在这么一个设置: # Force IPv4 on Linux systems since IPv6 does ...

  4. [BZOJ 1195] 最短母串

    Link:https://www.lydsy.com/JudgeOnline/problem.php?id=1195 Solution: 看到数据范围n<=12,就要往状压DP上想 为了保证后项 ...

  5. 【并查集】【set】AtCoder - 2159 - 連結 / Connectivity

    Problem Statement There are N cities. There are also K roads and L railways, extending between the c ...

  6. 小白的Python之路 day5 os,sys模块详解

    os模块详解 1.作用: 提供对操作系统调用的接口 2.常用方法: os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径os.chdir("dirname" ...

  7. 冒泡排序--注意flag变量的设置

    代码: #include<stdio.h> void BubbleSort(int a[],int n){ int i,j; int temp; ; // 此处flag变量的设置可以提高算 ...

  8. iOS开发技巧——关闭Autoresizing开启Autolayout

    在使用Autolayout时有时候会有莫名其妙的错误,是因为UIView是默认同时开启Autoresizing和Autolayout的. 但我们的Autolayout很容易和Autoresizing冲 ...

  9. 修改 CentOS 6.3 时区 和 时间

    1.查看当前时区和时间 date -R 2.CentOS中时区是以文件形式存在,当前时区文件位于 /etc/localtime 其他时区文件位于 /usr/share/zoneinfo下,其中中国时区 ...

  10. iis日志字段解析

    IIS日志字段 #Software: Microsoft Internet Information Services 7.5 #Version: 1.0 #Date: 2013-08-21 01:00 ...