ionic之AngularJS扩展2 移动开发

内联模板 : script

可能你没有注意过,HTML中常用的script标签在AngularJS中被重新定义了: 除了原来的脚本声明功能之外,如果script元素的type属性 定义为text/ng-template,则被称为内联模板。例如:

    1. <script type="text/ng-template" id="a.html">  <p>This is the content of the template.</p></script>

内联模板在单页应用(SAP)开发中非常有用。SAP应用通常需要通过AJAX 从后台载入众多的HTML片段,这些HTML片段都用文件存放的话,看起来、想起来 都很不爽。使用内联模板,就可以把这些零散的HTML片段模板都集中在一个 文件里,维护和开发的感觉都会好很多。

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

使用内联模板

内联模板的使用,常见的有几种情况。

  • 使用ng-include指令

可以利用ng-include指令在HTML中直接使用内联模板,例如:

  1. <div ng-include="'a.html'"></div>

注意:其中a.html是一个字符串常量,需要使用单引号包裹起来。

  • 使用$templateCache服务

也可以直接使用$templateCache服务的方法get()从模板缓存中读出 其内容:

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

还有一种常见的用法是使用$http服务时指定cache参数,这将直接从$templateCache 中取出模板,而不必进行网络访问:

  1. $http.get("a.html",{cache:$templateCache}) .success(function(d,s){..}) .error(function(d,s){...});

路由机制 : 状态机

对于视图的路由,ionic没有使用AngularJS的路由模块(ng-route),而是使用 了angular-ui项目的ui-route模块。ionic.bundle.js已经打包了ui-route模块, 所以我们使用时不需要单独引入。

和通常基于URL匹配的路由机制不同,ui-route是基于状态机的导航:

可以认为视图元素ui-view有多个状态,比如:state1/state2/state3。 在任何一个时刻,视图元素只能处于某一状态下。这些状态是由状态机管理的。

在ui-route中的$state服务就是一个状态机实例,在任何时刻,我们可以使用其 go()方法跳转到指定名称的状态。

配置状态机

需要指出的是,状态的划分以及每个状态的元信息(比如模板、url等)是在配置 阶段通过$stateProvider完成的:

  1. angular.module("ezApp",["ionic"]) .config(function($stateProvider){ $stateProvider.state("state1",{...}) .state("state2",{...}) .state3("state3",{...}); });

触发状态迁移

在ui-router中定义的指令ui-sref用来触发状态迁移:

  1. <a ui-sref="state1">Go State 1</a>

当用户点击这个链接时,$state服务将根据状态名state1 找到对应的元信息,提取、编译模板,并将其显示在ui-view指令指定的 视图窗口中。

导航视图 : ion-nav-view

在ionic里,我们使用ion-nav-view指令代替AngularUI Route中的 ui-view指令,来进行模板的渲染:

  1. <ion-nav-view><!--模板内容将被插入此处--></ion-nav-view>

和ui-view一样,ion-nav-view总是根据状态的变化,来提取对应的模板 并将其在DOM树中渲染。

模板视图 : ion-view

尽管在模板视图中可以随便写HTML,但是,在ionic中,我们总是使用指令ion-view来 作为模板视图内容的容器,这是为了与ionic的导航框架保持兼容:

  1. <script id="..." type="text/ng-template"><ion-view><!--模板视图内容--></ion-view></script>

ion-view指令有一些可选的属性:

  • view-title - 视图标题文字

模板被载入导航视图ion-nav-view显示时,这个属性值将显示在导航栏ion-nav-bar中

  • cache-view - 是否对这个模板视图进行缓存

允许值为:true | false,默认为true

  • hide-back-button -是否隐藏导航栏中的返回按钮

当模板被载入导航视图时,如果之前有其他的模板,那么在导航栏ion-nav-bar上默认会自动 显示返回按钮(使用指令ion-nav-back-button定义)。点击该按钮将返回前一个模板。

hide-back-button的允许值为:true | false ,默认为false

注意:必须在导航栏中显式地声明返回按钮,否则即使将hide-back-button属性设为false, 这个按钮也不会出现:-)

  • hide-nav-bar - 是否隐藏导航栏

允许值为:true | false ,默认为false

导航栏 : ion-nav-bar

ion-nav-bar指令用来声明一个居于屏幕顶端的导航栏,它的内容随导航视图 的状态变化而自动同步变化:

  1. <ion-nav-bar></ion-nav-bar>

ion-nav-bar有以下可选的属性:

  • align-title - 标题对齐方式

允许值为: left | right | center。默认为center,居中对齐

  • no-tap-scroll - 点击导航栏时是否将内容滚动到顶部。

允许值为:true | false。默认为true,这意味着如果视图中的内容下拉很长,那么在任何时刻 点击导航栏都可以立刻回到内容的开头部分。

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

你可能已经注意到前一节的示例中,当切换到小说页时,无处可去了!

好在ionic的指令ion-nav-back-button指令可以自动地让你回退到前一个视图:

  1. <ion-nav-bar><ion-nav-back-button></ion-nav-back-button></ion-nav-bar>

当视图切换时,回退按钮会自动出现在导航条中,并显示前一个视图 的标题。点击回退按钮将返回前一个视图。

示例中的代码在上一节的基础上增加了回退按钮,切换到小说页再看看!

定制样式

我们可以定制回退按钮的图标、文本和样式:

  1. <ion-nav-back-button class="button-clear"><i class="icon ion-ios-arrow-back"></i> 返回</ion-nav-back-button>

想要看看代码的效果或者需要在线练习一下可以到这里:

http://www.hubwiz.com/course/55010505e564e5172c0b9405/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏pangguoming

Excel 2013中单元格添加下拉列表的方法

使用Excel录入数据的时候我们通常使用下拉列表来限定输入的数据,这样录入数据就很少发生错误了。Excel 2013较以前的版本发生了很大的变化,那么在Exce...

33580
来自专栏小红豆的数据分析

小蛇学python(7)tkinter库的基本使用

最近做一个小项目,又将tkinter库重新温习了一遍。tk其实并不如很多网友说的那样一文不值,它确实不如QT,Wxpython功能强大,但是这也意味着它比较简单...

61610
来自专栏张戈的专栏

为iFrame添加动态载入效果,提高用户体验

中国博客联盟-成员展示导航一直都是直勾勾的加载,并且未加载完成之前还会强行占据一大片空白区域,体验很不友好!昨天在制作展示导航 WordPress 插件时,把这...

31040
来自专栏超然的博客

jquery中动态新增的元素节点无法触发事件解决办法

  在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法.

10720
来自专栏编程

前端学习笔记03 js基础

js基础( js嵌入方式、输出语句) 1 s现在的作用 1、验证表单(以前的网速慢) 2、页面特效 (PC端的网页效果) 3、移动端 (移动 web 和app)...

22160
来自专栏cnblogs

vue组件,撸第一个

实现此例您可以学到: vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一、搭建vue开...

286100
来自专栏DeveWork

WordPress中的jQuery库不起作用的相关问题

WordPress 中的jQuery 库问题曾经困扰了我一段时间。如果仅仅加载WordPress 自带的jQuery 库,在使用一些jQuery 插件的时候明明...

29760
来自专栏Flutter入门到实战

Android Studio使用Vector创建矢量图并加载

3.选择Local file,然后选择SVG图形路径,点next --> finish 就好了。具体如图所示。

16110
来自专栏Python

linux每日命令(11):cat命令

cat命令的用途是连接文件或标准输入并打印。这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用。

10930
来自专栏ionic3+

【技巧】ionic3的页面导航后退事件拦截

写一篇简单的,有这样一种业务场景:当使用push后,页面导航栏会自动添加后退按钮,当点击后退按钮后,拦截事件(如付费进来了,没有完成后续操作就后退退出,良好的用...

12650

扫码关注云+社区

领取腾讯云代金券