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. yii2 [行为] behaviors 拦截器

    yii2 拦截器 在控制器中可以自定义对action的拦截器,拦截器需要继承 \yii\base\ActionFilter 参考代码: class BaseUserAuthorizeFilter ex ...

  2. Android 优化布局层次结构

    前面介绍过使用HierarchyViewer和Android lint来优化我们的程序,这一篇算是总结性的,借助一个小例子来说用怎么优化应用布局.这个例子是android官网给出的,作者也当一把翻译. ...

  3. $.ajax()方法参数详解

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

  4. 超实用的8个Linux命令行性能监测工具

    http://www.csdn.net/article/2012-09-17/2810047-command-line-tools-to-monitor-linux-perf 你值得拥有:25个Lin ...

  5. JavaScript 变量生命周期

    变量在它声明时初始化. 局部变量在函数调用时创建,当函数执行完毕后销毁,这和为什么要使用闭包也有一点关系,当然这是另外的话题了. 全局变量在页面(当前页面)关闭后销毁.

  6. java模仿qq好友面板的布局（BoxLayout问题）

    .............. JLabel ll = new JLabel(dlg.getNameText() + ":" + dlg.getIPText(), ii[index] ...

  7. Tracert 转

    路由跟踪在线Tracert Tracert(跟踪路由)是路由跟踪实用程序,用于确定 IP 数据报访问目标所采取的路径.Tracert 命令用 IP 生存时间 (TTL) 字段和 ICMP 错误消息来确 ...

  8. php的SAPI，CLI SAPI，CGI SAPI

    首先一个问题:在命令行下执行:php -r 'echo 12;' 控制台会打印出 12: 这个过程不是很奇妙么,我输入的是shell命令,但是执行的却是php脚本.php脚本执行完成之后的输出还能在控 ...

  9. SQL 分类统计函数

    SELECT TransactionNumber,SUM(CASE WHEN ReasonLevel=0 THEN           TransactionNumber ELSE 0 end ) a ...

  10. iOS第三方类库汇总【持续更新】

    在我们平时开发中会经常使用一些第三方开发的开源类库.这样会有效地提高我们开发项目的效率,在这里我找了好几十个进行一个汇总,供大家参考使用,方便大家在需要的时候能容易找到. UI篇 awesome-io ...