目录:

  1. 内联模板 : script
  2. 路由机制 : 状态机
  3. 导航视图 : ion-nav-view
  4. 模板视图 : ion-view
  5. 导航栏 : ion-nav-bar
  6. 回退按钮 : ion-nav-back-button

内联模板 : 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>

ionic之AngularJS扩展 移动开发(视图导航一)的更多相关文章

  1. 【Ionic】---AngularJS扩展基本布局

    目录: 标题栏 : ion-header-bar 页脚栏 : ion-footer-bar header/footer : 样式及内容 内容区 : ion-content 滚动框 : ion-scro ...

  2. ionic之AngularJS扩展动态组件

    目录: 1. 模态对话框 : $ionicModal 2. 上拉菜单 : $ionicActionSheet 3. 弹出框 : $ionicPopup 4. 浮动框 : $ionicPopover 5 ...

  3. ionic入门之AngularJS扩展(一)

    ionic ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML. CSS和JavaScript,开发跨平台(目前支持:Android.iOS,计划支持:Wind ...

  4. ionic和angularjs的区别?

    a.ionic是一个用来开发混合手机应用的,开源的,免费的代码库.可以优化HTML.css和js的性能,构建高效的应用程序,而且还可以用于构建sass和angularJS的优化 b.AngularJS ...

  5. Android自定义视图一:扩展现有的视图,添加新的XML属性

    这个系列是老外写的,干货!翻译出来一起学习.如有不妥,不吝赐教! Android自定义视图一:扩展现有的视图,添加新的XML属性 Android自定义视图二:如何绘制内容 Android自定义视图三: ...

  6. laravel composer 扩展包开发(超详细)

    laravel composer 扩展包开发(超详细) 置顶 2018年02月05日 11:09:16 Simael__Aex 阅读数:10396    版权声明:转载请注明出处:http://blo ...

  7. 基于ionic+cordova+angularJs从零开始搭建自己的移动端H5 APP

    这里详细介绍下如何用ionic+cordova+angularjs搭建自己的移动端app,包括环境搭建,框架使用等,具体项目已放置在github上,可下载下来自行启动. 下载地址:https://gi ...

  8. UnrealEd3视图导航

    本博客使用的版本:2010-08   [更多其他的UE3版本]     [最新的UE3版本 -- 2015-02]  [unreal engine wiki]   注:dx11被加入2011-03月版 ...

  9. 6个强大的AngularJS扩展应用

    本文链接:http://www.codeceo.com/article/6-angularjs-extension.html本文作者:码农网 – 小峰 AngularJS现在非常热门,是Google推 ...

随机推荐

  1. Cupid's Arrow---hdu1756(判断点与多边形的位置关系 模板)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1756 题意:中文题,套模板即可: /* 射线法:判断一个点是在多边形内部,边上还是在外部,时间复杂度为 ...

  2. 怎么修改tabbar的默认选中界面

        我用storyboard做了一个tabbar连接3个界面1,2,3  .程序运行默认选中加载最左边的界面1,怎么能让他默认为界面2或者3呢?菜鸟求大神知道 // 默认的selectedInde ...

  3. CodeMIrror 简单使用

    代码高亮是程序员的刚需,不管是在笔记类,论坛类,博客类web网站中,都对代码高亮提出要求,不高亮的代码阅读体验很差,codeMirror是一个前端代码高亮库,使用方便. codeMirror可以直接在 ...

  4. 【转】Android Paint之 setXfermode PorterDuffXfermode 讲解

    [置顶] Android Paint之 setXfermode PorterDuffXfermode 讲解 分类: android动效篇2015-04-07 17:23 978人阅读 评论(8) 收藏 ...

  5. LeetCode H-Index II

    原题链接在这里:https://leetcode.com/problems/h-index-ii/ 题目: Follow up for H-Index: What if the citations a ...

  6. Infinity loop in cursor iteration

    原始代码如下: begin DECLARE @SQL_STMT NVARCHAR(300), @V_CLIENT_ID INT, @V_PGNAME VARCHAR(1000), @V_LOGID I ...

  7. Basic motion detection and tracking with Python and OpenCV

    http://www.pyimagesearch.com/2015/05/25/basic-motion-detection-and-tracking-with-python-and-opencv/

  8. Thinkpad E430 Ubuntu 14.04 无线网卡驱动

    为了重新安装正确的无线网卡的驱动,所以要先弄清楚我的笔记本上的无线网卡的具体的型号.打开终端,用如下命令/方法查看:lspci,找到输出信息中,有关无线网卡的部分.发现型号是:BCM43142 先用有 ...

  9. Power-BI费用分析

    费用分析主要从财务三大费用入手,剖析费用的结构.用途.占用等情况,从三大费用到明细费用.部门.职员的层层钻取,从而有效地进行费用管理和控制.Power-BI前端展示:图1<ignore_js_o ...

  10. jQuery基础修炼圣典—DOM篇(二)jQuery遍历

    1.children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法.这里需要注意:.children(selector) 方法是返回匹配 ...