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. ubuntu下解决wireshark权限问题

    wireshark要监控eth0,但是必须要root权限才行.但是,直接用root运行程序是相当危险,也是非常不方便的. 解决方法如下: 1.添加wireshark用户组 sudo groupadd ...

  2. CentOS 编译安装 mysql

    1.前期准备 1.1 环境说明: 操作系统: CentOS release 6.4 (Final) [查看命令 cat /etc/redhat-release ] mysql : mysql-5.6. ...

  3. ArcGIS应用——四种计算图斑面积的方法

    ArcGIS中有多种方法可计算出图斑面积,本文总结了四种方法,是否可堪称史上最全? 1.计算几何 本人认为这是最适合非专业人士的方法,直接利用ArcGIS中的计算几何功能进行计算. a.首先添加一do ...

  4. DDD：谈谈数据模型、领域模型、视图模型和命令模型

    背景 一个类型可以充当多个角色,这个角色可以是显式的(实现了某个接口或基类),也可以是隐式的(承担的具体职责和上下文决定),本文就讨论四个角色:数据模型.领域模型.视图模型和命令模型. 四个角色 数据 ...

  5. set -x与set +x指令

    转载自:http://www.2cto.com/os/201304/205118.html 参考: http://blog.csdn.net/t0nsha/article/details/860688 ...

  6. selenium webdriver (python) 第三版

    感谢 感谢购买第二版的同学,谢谢你们对本人劳动成果的支持!也正是你们时常问我还出不出第三版了,也是你们的鼓励,让我继续学习整理本文档. 感谢乙醇前辈,第二版的文档是放在他的淘宝网站上卖的,感谢他的帮忙 ...

  7. Swift_3.0_取消杂乱无章的log输出

    一 举例: 输出的杂乱无章的东西 subsystem: com.apple.UIKit, category: HIDEventFiltered, enable_level: , persist_lev ...

  8. Angular系列----AngularJS入门教程01：AngularJS模板 （转载）

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  9. C#函数式程序设计之代码即数据

    自3.5版本以来,.NET以及微软的.NET语言开始支持表达式树.它们为这些语言的某个特定子集提供了eval形式的求值功能.考虑下面这个简单的Lambda表达式: Func<int, int, ...

  10. 百度分页样式代码 css+c#

    通过c#输出html分页代码: /// <summary> /// 返回分页Html代码 /// </summary> /// <param name="pag ...