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