1.目录结构

2.页面加载时效果（加载的时候比较难截图，是页面上方出现一条进度条，然后我另加了一个Loading..的提示，请忽略那个table）

3.页面加载完成后效果

4.index.html

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

    <!-- angular -->

    <script src="libs/angular.min.js"></script>

    <script src="libs/angular-animate.min.js"></script>

    <!--loadingbar-->

    <script src="libs/loading-bar.min.js"></script>

    <link rel="stylesheet" href="libs/loading-bar.min.css">

    <!--bootstrap-->

    <link rel="stylesheet" href="libs/bootstrap.min.css">

    <!--app-->

    <script src="app.js"></script>

    <!--style-->

    <link rel="stylesheet" href="css/css.css">

</head>

<body ng-app="LoadingBarExample" ng-controller="ExampleCtrl">

    <div id="loading-bar-container"></div>

    <form action="" class="form-horizontal" role="form">

       <div class="form-group" style="width:98%">

          <div ng-repeat="demo_data in resume_en">

              <label class="col-md-1 col-sm-2 control-label">{{demo_data.key}}</label>

              <div class="col-md-3 col-sm-2">

                 <input type={{demo_data.type}} class="form-control" placeholder="">

              </div>

          </div>

       </div>

    </form>

    <div class="table-responsive">

        <caption>TABLE</caption>

        <table class="table">

            <thead>

             <tr ng-repeat="tableH in tableH">

                <th>

                    <input type="checkbox">

                </th>

                <th>{{tableH.tHone}}</th>

                <th>{{tableH.tHtwo}}</th>

                <th>{{tableH.tHthree}}</th>

             </tr>

            </thead>

            <tbody>

             <tr ng-repeat="tableD in tableD">

                <td>

                    <input type="checkbox">

                </td>

                <th>{{tableD.trone}}</th>

                <th>{{tableD.trtwo}}</th>

                <th>{{tableD.trthree}}</th>

             </tr>

          </tbody>

        </table>

    </div>

</body>

</html>

5.css.css

.form-control{

    margin-top:20px!important;

    }

.form-horizontal .control-label{

    margin-top:20px!important;

    }

6.demo.json

{

  "resume_en": [

    {

      "id": "",

      "key": "TEXT",

      "type": "text"

    },

    {

      "id": "",

      "key": "SELECT",

      "type": "select"

    },

    {

      "id": "",

      "key": "TEXT",

      "type": "text"

    },

    {

      "id": "",

      "key": "DATE",

      "type": "date"

    }

  ],

  "tableD": [

    {

      "trone": "",

      "trtwo": "NAMENAME",

      "trthree": ""

    },

    {

      "trone": "",

      "trtwo": "NAMENAME",

      "trthree": ""

    },

    {

      "trone": "",

      "trtwo": "NAMENAME",

      "trthree": ""

    },

    {

      "trone": "",

      "trtwo": "NAMENAME",

      "trthree": ""

    }

  ],

  "tableH": [

    {

      "tHone": "HLLOWORLD1",

      "tHtwo": "HLLOWORLD2",

      "tHthree": "HLLOWORLD3"

    }

  ]

}

7.app.js

var app = angular.module('LoadingBarExample', ['chieffancypants.loadingBar', 'ngAnimate']);

app.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {

    cfpLoadingBarProvider.includeSpinner = true;

    cfpLoadingBarProvider.spinnerTemplate = '<div>Loading...</div>';

}]);

app.controller('ExampleCtrl', function($scope, $http, $timeout ,cfpLoadingBar) {

    $scope.start = function() {

        cfpLoadingBar.start();

    };

    $scope.complete = function () {

        cfpLoadingBar.complete();

    }

    cfpLoadingBar.start();

    $http.post("http://localhost:63342/application/demoLoading/json/demo.json")

        .success(function(data) {

            $scope.complete();

            $timeout(function() {

                $scope.resume_en = data.resume_en;

                $scope.tableD = data.tableD;

                $scope.tableH = data.tableH;

            }, );

        })

        .error(function(){

            console.log("an unexpected error ocurred resume_pc")

        })

});

8.libs插件版本

AngularJS v1.5.0
angular-loading-bar v0.9.0
Bootstrap v3.3.6

angular $http 请求数据的时候加载loading的更多相关文章

  1. 当vue 页面加载数据时显示 加载loading

    参考:https://www.jianshu.com/p/104bbb01b222 Vue 页面加载数据之前增加 `loading` 动画 创建组件 1.新建 .vue 文件: src -> c ...

  2. vue 中监测滚动条加载数据（懒加载数据）

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

  3. 不想分页怎么办？？-->页面数据的滚动加载

    在前几天的一次前台数据展示的时候 为了更好的用户的体验 就想着做一个数据的滚动加载功能 于是简单的查询了网上的实现方式 基本都是在页面加载的时候绑定scroll事件 然后判断页面触底的时候 进行aja ...

  4. 【EF学习笔记08】----------加载关联表的数据 显式加载

    显式加载 讲解之前,先来看一下我们的数据库结构:班级表 学生表 加载从表集合类型 //显示加载 Console.WriteLine("=========查询集合===========&quo ...

  5. OGG初始化之将数据从文件加载到Replicat

    要使用Replicat建立目标数据,可以使用初始加载Extract从源表中提取源记录,并将它们以规范格式写入提取文件.从该文件中,初始加载Replicat使用数据库接口加载数据.在加载过程中,更改同步 ...

  6. hibernate框架学习之数据抓取(加载)策略

    Hibernate获取数据方式 lHibernate提供了多种方式获取数据 •load方法获取数据 •get方法获取数据 •Query/ Criteria对象获取数据 lHibernate获取的数据分 ...

  7. vue axios配置 发起请求加载loading请求结束关闭loading

    axios带有请求拦截器,避免在每个请求里面加loading重复操作,可以封装进去,在请求开始时加载loading层,请求结束关闭,loading层用vux的loading加载 axios.js im ...

  8. extjs4.0 treepanel节点的选中、展开！ 数据的重新加载

    1.extjs4.0API较3.0有非常大变化2.多级子父节点的选中和展开.3.数据的重新加载.tree.getStore().load4.节点的移除,从树中根据ID获取节点 tree.getStor ...

  9. 利用WPF的ListView进行大数据量异步加载

    原文:利用WPF的ListView进行大数据量异步加载 由于之前利用Winform的ListView进行大数据量加载的时候,诟病良多,所以今天试着用WPF的ListView来做了一下,结果没有让我失望 ...

随机推荐

  1. FileZilla FTP Server 高级防火墙例外

    在防火墙中: 在“例外”中,添加端口21,TCP 添加端口50000,TCP (或添加一组端口,一个一个的也行,如果你在软件中选择的是50000-51000,而在这里只打开了50000的单个端口,登录 ...

  2. 数轴上从左到右有n个点a[0],a[1]…,a[n-1]，给定一根长度为L的绳子，求绳子最多能覆盖其中的几个点。要求算法复杂度为o(n)。

    #include <iostream> using namespace std; int maxCover(int* a, int n, int l) { ; ; ; while(end ...

  3. 解决clone问题之外的体会

    adlnkoh.sh started at Thu Aug 25 15:42:51 CST 2016 Log file located at /u02/db/testdb/11.1.0/appsuti ...

  4. mono+jexus 验证码不显示：System.Drawing

    System.ArgumentException The requested FontFamily could not be found [GDI+ status: FontFamilyNotFoun ...

  5. IOS中多版本，多设备类型支持注意事项

    IOS系统从07年出来,到现在也有6年了,每年发布一次到两次新的设备,从iPhone1,iPhone2 ... iPhone4s再到最新的iPhone5.硬件在升级的过程中CPU的架构也可能发生变化, ...

  6. c++中继承和java中继承的对比

    java中: class Parent{ public void test(int a){ System.out.println("Parent:" + a); System.ou ...

  7. ServiceStack.Redis 中关系操作的局限与bug

    redis是文档型的,nosql中难处理的是关系. 比如人可以发博客,博客可以有分类.按照传统sql中,用户表和分类表都是主表,博客表是从表,有用户的外键和分类的外键 如果使用文档型的思考方式. 为用 ...

  8. php分享三十四：待排查问题

    1:内存设为1M时,代码不执行,也不报错 ini_set('display_error', 1); error_reporting(E_ALL); ini_set('memory_limit', 10 ...

  9. 剑指架构师系列-Struts2构造函数的循环依赖注入

    Struts2可以完成构造函数的循环依赖注入,来看看Struts2的大师们是怎么做到的吧! 首先定义IBlood与BloodImpl类: public interface IBlood { } pub ...

  10. iOS-微信-分享

    一.微信原生的分享--准备工作. 1. 需要申请微信AppId. 2. 导入系统架包. SDK文件包括 libWeChatSDK.a,WXApi.h,WXApiObject.h,WechatAuthS ...