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. 随手写的自动批量编译部署NativeAndroid程序Python脚本

    背景 有一堆工程NativeAndroid程序,要一一编译部署编译测试,手头只有AndroidManifest和Makefile,需要一个个Update,Ndk-build,和发包安装测试,很是头疼, ...

  2. Codeforces Round #236 (Div. 2) C. Searching for Graph（水构造）

    题目大意 我们说一个无向图是 p-interesting 当且仅当这个无向图满足如下条件: 1. 该图恰有 2 * n + p 条边 2. 该图没有自环和重边 3. 该图的任意一个包含 k 个节点的子 ...

  3. pod install 错误 - incompatible character encodings: UTF-8 and ASCII-8BIT

    pod install [!] Invalid `Podfile` file: incompatible character encodings: UTF-8 and ASCII-8BIT. Upda ...

  4. VPN理论简单介绍(转载)

    标签:VPN理论简单介绍 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://lvnian.blog.51cto.com/715528 ...

  5. 使用go的ssh包快速打造一个本地命令行ssh客户端

    热身运动

  6. [转载]QString 乱谈(3)-Qt5与中文

    原文地址http://blog.csdn.net/dbzhang800/article/details/7542672?reload 两个月前,简单写过QTextCodec中的setCodecForT ...

  7. 有了Hadoop MapReduce, 为什么还要Spark?

    a. 由于MapReduce的shuffle过程需写磁盘,比较影响性能:而Spark利用RDD技术,计算在内存中进行. b. MapReduce计算框架(API)比较局限, 而Spark则是具备灵活性 ...

  8. JavaScript面试库

    1.将一段字符串转成驼峰命名法. var str = "web-kit-index"; function to(str){ var j = str.split("-&qu ...

  9. get新技能： 如何设置元素高度与宽度成特定比例。宽度改变，高度自动按比例改变。 例如设置宽高比16:9。

    设置宽高比在很多时候是有用的. 下面的栗子,我们设置一个容器的宽高比为16:9 //HTML代码片段 <div class="container"> <div c ...

  10. rabbitmq使用dead letter机制来进行retry

    首先建立 工作exchange和工作queue,指定工作队列的x-dead-letter-exchange到重试exchenge var workQueueArgs = new Dictionary& ...