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. BZOJ 3524 [Poi2014]Couriers（可持久化线段树）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3524 [题目大意] 给一个长度为n的序列a.1≤a[i]≤n. m组询问,每次询问一个 ...

  2. python基础-匿名函数、内置函数、正则表达式、模块

    1. 匿名函数 1.1 有名函数 有名函数:定义了一个函数名,函数名指向内存地址:通过函数名进行访问.函数名加括号就可以运行有名函数,例如:func() def func(x, y, z = 1): ...

  3. openresty的时间获取

    ngx.say('ngx.time()' .. ngx.time()) ngx.say('ngx.now()' .. ngx.now()) ngx.say('ngx.today()' .. ngx.t ...

  4. Inno Setup入门（十三）——Pascal脚本（2）

    事件函数(2) function CheckPassword(Password: String): Boolean; 如果安装程序在Pascal 脚本中发现该函数,它自动显示密码页并调用CheckPa ...

  5. [转] matlab调用opencv函数的配置

    原文地址百度账户 aleasa123 方式1 1.  首先保证vs2010能正确调用opencv函数, 2.  Matlab中选择编译器,操作如下: 打开matlab2012,输入mex –setup ...

  6. nginx 实现 ajax 跨域请求

    原文:http://www.nginx.cn/4314.html   AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加a ...

  7. 【jQuery】jquery中 使用$('#parentUid').attr(parentUid);报错jquery-1.11.3.min.js:5 Uncaught TypeError: Cannot read property 'nodeType' of undefined

    jquery中 使用$('#parentUid').attr(parentUid);报错jquery-1.11.3.min.js:5 Uncaught TypeError: Cannot read p ...

  8. 引用日志log4net.dll的web.config配置

    <configSections> <section name="log4net" type="log4net.Config.Log4NetConfigu ...

  9. javascript的rsa加密和python的rsa解密

    先说下目前测试情况:javascript加密后的数据,python无法完成解密,我估计是两者的加密解密方法不同 1.看了这篇文章:http://blog.nsfocus.net/python-js-e ...

  10. display:table合并表格

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...