$ionicLoading 是 ionic 默认的一个加载交互效果。里面的内容也是可以在模板里面修改。
用法

angular.module('LoadingApp', ['ionic'])

.controller('LoadingCtrl', function($scope, $ionicLoading) {

  $scope.show = function() {

    $ionicLoading.show({

      template: 'Loading...'

    });

  };

  $scope.hide = function(){

    $ionicLoading.hide();

  };

});

方法
显示一个加载效果。

show(opts)



隐藏一个加载效果。

hide()



实例

HTML 代码

<html ng-app="ionicApp">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Ionic Modal</title>

     <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">

    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>

  </head>

  <body ng-controller="AppCtrl">

      <ion-view title="Home">

        <ion-header-bar>

          <h1 class="title">The Stooges</h1>

        </ion-header-bar>

        <ion-content has-header="true">

          <ion-list>

            <ion-item ng-repeat="stooge in stooges" href="#">{{stooge.name}}</ion-item>

          </ion-list>

        </ion-content>

      </ion-view>

  </body>

</html>

JavaScript 代码

angular.module('ionicApp', ['ionic'])

.controller('AppCtrl', function($scope, $timeout, $ionicLoading) {

  // Setup the loader

  $ionicLoading.show({

    content: 'Loading',

    animation: 'fade-in',

    showBackdrop: true,

    maxWidth: 200,

    showDelay: 0

  });

  // Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded.

  $timeout(function () {

    $ionicLoading.hide();

    $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];

  }, 2000);

});







Ionic Js十：加载动作的更多相关文章

  1. Arcgis for Js之加载wms服务

    概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...

  2. js 模版加载到前端

    js 模版加载到前端 简单有效不高端 配个路由 /js/:filename ,  用 readTemplate 响应请求,前端可以按模块方式直接 require 模板 'use strict' var ...

  3. 前端设计中关于外部js文件加载的速度优化

    在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...

  4. js动态加载以及确定加载完成的代码

    利用原生js动态加载js文件到页面,并在确定加载完成后调用相关function var otherJScipt = document.createElement("script") ...

  5. 第三课：sea.js模块加载原理

    模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: function l ...

  6. js资源加载优化

    互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN  + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其 ...

  7. 判断JS是否加载完成

    在正常的加载过程中,js的加载都是同步的,也就是在加载过程中,浏览器会阻塞接下来的内容的加载.这时候我们就要用到动态加载,动态加载是异步的,如果我们在后边要用到这个动态加载的js文件里的东西,就要保证 ...

  8. js动态加载css文件和js文件的方法

    今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...

  9. JS懒加载

    4.如何使用js懒加载图片       a.懒加载图片是基于jquery.js的,所以: <script src="jquery.js" type="text/ja ...

  10. JS 动态加载脚本 执行回调_转

    关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解 ...

随机推荐

  1. Spring Boot 使用IntelliJ IDEA创建一个web开发实例(五)

    使用application.ym进行多环境配置 1.配置激活选项 spring: profiles: active: dev 2.在配置文件添加若干个英文状态下的短横线即可区分 spring: pro ...

  2. idea插件安装的通用操作

    序:今天下午看到一个bug,很神奇,粘出来大家看看 看到这个异常栈,有经验的或者查到的答案都是mapper.xml中哪个的方法配置错了,应替换parameterMap为parameterType, 奇 ...

  3. Windows系统环境下Solr之Java实战（三）使用solrJ管理索引库

    https://www.cnblogs.com/zhuxiaojie/p/5764680.html https://www.cnblogs.com/xieyupeng/p/9317158.html

  4. Linux基础-sed+正则表达式

    1,删除文件每行的第一个字符:sed -r 's/^.//g' passwd 2,删除文件每行的第二个字符:sed -r 's/^(.)(.)/\2/g' passwd 3,删除文件每行的最后一个字符 ...

  5. Hibernate5笔记4--单表查询

    单表查询:   Hibernate是DAO层技术,对数据的使用,查询是最为重要的.Hibernate的查询技术非常强大,支持原始SQL语句查询,支持QBC查询及Hibernate特有的HQL查询. H ...

  6. 【codeforces】【比赛题解】#872 CF Round #440 (Div.2)

    链接. [A]寻找漂亮数字 题意: 给定了两列非零数字.我们说一个数是漂亮的,当它的十进制表达中有至少一个数从数列一中取出,至少有一个数从数列二中取出.最小的漂亮数字是多少? 输入: 第一行两个数\( ...

  7. 重写Java Object对象的hashCode和equals方法实现集合元素按内容判重

    Java API提供的集合框架中Set接口下的集合对象默认是不能存储重复对象的,这里的重复判定是按照对象实例句柄的地址来判定的,地址相同则判定为重复,地址不同不管内容如何都判定为不重复,这有时与需求不 ...

  8. 使用ubifs格式的根文件系统

    配置内核,使其支持ubifs文件系统 1)Device Drivers  --->Memory Technology Device (MTD) support  --->UBI - Uns ...

  9. mvc4 @foreach 如何写@if 判断

    不知道你想写在里面还是外面,我里外都写上,你可以参考下:@if(Model!=null){ foreach(var item in Model) { if(item.Name=="李四&qu ...

  10. C#里partial关键字的作用

    1. 什么是局部类型?C# 2.0 引入了局部类型的概念.局部类型允许我们将一个类.结构或接口分成几个部分,分别实现在几个不同的.cs文件中.局部类型适用于以下情况: (1) 类型特别大,不宜放在一个 ...