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. ArcGIS Runtime for Android 使用异步GP服务绘制等值线

    关于基于Android上ArcGIS Server GP服务的调用,已经有前辈给出了很好的例子: http://blog.csdn.net/esrichinacd/article/details/92 ...

  2. 查询修改linux 打开文件句柄数量

    查询系统支持最大可打开文件句柄数量: #vi /proc/sys/fs/file-max 查询当前连接用户最大可打开文件句柄数量: #ulimit -a 修改当前连接用户最大可打开文件句柄数量: #u ...

  3. DMSFrame 之简单用法（二）

    上次说了下DMSFrame的一些查询方式,之前也有好多朋友问了下这个ORM与EF有什么样的区别. 要论区别,我自己也总结了几点.如果有其它朋友知道的,可以回复补充下. 1.不需要编辑的时候需要再次查询 ...

  4. Python Django 开发 4 ORM

    第三篇最后写了,光知道那些基础的查询在项目中是没有什么卵用的,重点是实体关系映射(ORM),今天学习了,来记录一下,关键词:ForeignKey(多对一).OneToOneField(一对一).Man ...

  5. hdinfo

    --------[ 鲁大师 ]-------------------------------------------------------------------------------- 版本: ...

  6. Android使用SurfaceView实现墨迹天气的风车效果

    SurfaceView也是继承自View,它和我们以前接触到的View(Button.TextView等)最大的不同是,SurfaceView可以有一个单独的线程进行绘制,这个线程区别于UI线程(主线 ...

  7. 【NS2仿真】RTP协议安装

    来自: http://personales.upv.es/fboronat/Research/NS2_RTP/NS2_RTP_RTCP_module.htm 文件:http://pan.baidu.c ...

  8. mysql event

    1.定时调用 存储过程 DELIMITER $$ ALTER DEFINER=`root`@`localhost` EVENT `event_stroke_ArchivesReportDataRefr ...

  9. 什么是作用域链，什么是原型链，它们的区别，在js中它们具体指什么？

    什么是作用域链,什么是原型链. 作用域是针对变量的,比如我们创建了一个函数,函数里面又包含了一个函数,那么现在就有三个作用域 全局作用域==>函数1作用域==>函数2作用域 作用域的特点就 ...

  10. perl基本语法--转载

    http://www.cnblogs.com/zhtxwd/archive/2012/03/06/2381585.html 本文介绍从变量类型.操作运算符.控制叙述.子程序.I/O和档案处理. Reg ...