ng-request-cache
Version:
AngularJS HTTP request cache for IndexeDB and $cacheFactory
212 lines • 7.53 kB
HTML
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>ng request cache examples</title>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.bootcss.com/angular-toastr/2.1.1/angular-toastr.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.css" rel="stylesheet">
</head>
<body ng-controller="mainCtrl">
<div class="container">
<div class="row" style="margin-top: 15px">
<div class="col-md-2">
<button class="btn btn-default btn-block" ng-click="spinner()">开始spin</button>
</div>
<div class="col-md-2">
<button class="btn btn-danger btn-block" ng-click="toastr()">开始toastr</button>
</div>
<div class="col-md-2">
<button class="btn btn-info btn-block" ng-click="loading()">开始loading</button>
</div>
<div class="col-md-2">
<button class="btn btn-success btn-block" ng-click="alert()">打开对话框</button>
</div>
<div class="col-md-2">
<button class="btn btn-warning btn-block" ng-click="confirm()">打开询问框</button>
</div>
<div class="col-md-2">
<button class="btn btn-primary btn-block" ng-click="progress()">打开进度条</button>
</div>
</div>
<div class="row" style="margin-top: 15px">
<div class="col-md-2">
<button class="btn btn-default btn-block" ng-click="prompt()">打开填空框</button>
</div>
<div class="col-md-2">
<button class="btn btn-danger btn-block" ng-click="alertClose()">对话框自动关闭</button>
</div>
<div class="col-md-2">
<button class="btn btn-info btn-block" ng-click="crypt()">数据加密解密</button>
</div>
<div class="col-md-2">
<button class="btn btn-success btn-block" ng-click="imgToBase64()">图片转base64</button>
</div>
<div class="col-md-2">
<button class="btn btn-warning btn-block" ng-click="sendSms($event)">发送短信验证码</button>
</div>
<div class="col-md-2">
<button class="btn btn-primary btn-block" ng-click="upload()">文件上传</button>
</div>
</div>
<div class="row" style="margin-top: 15px" ng-if="show.crypt">
<div class="col-md-6">
<label>Private Key</label><br/>
<small>
<textarea ng-model="privkey" rows="10" style="width:100%"></textarea>
</small>
</div>
<div class="col-md-6">
<label>Public Key</label><br/>
<small><textarea ng-model="pubkey" rows="10" style="width:100%" readonly="readonly"></textarea></small>
</div>
<div class="col-md-6">
<label>加密后的数据</label><br/>
<pre ng-bind="encrypt"></pre>
</div>
<div class="col-md-6">
<label>解密后的数据</label><br/>
<pre ng-bind="decrypt"></pre>
</div>
</div>
<div class="row" style="margin-top: 15px" ng-if="show.base64">
<div class="col-md-2">图片地址</div>
<div class="col-md-10">
<pre ng-bind="imgUrl"></pre>
</div>
<div class="col-md-2">图片BASE64数据</div>
<div class="col-md-10">
<textarea ng-model="base64" rows="10" style="width:100%" readonly="readonly"></textarea>
</div>
</div>
</div>
<span id="spinner"></span>
<toasty></toasty>
<script type="text/javascript" src="https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/spin.js/2.3.2/spin.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jsencrypt/2.3.1/jsencrypt.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.6.9/angular.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/oclazyload/1.1.0/ocLazyLoad.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/angular-toastr/2.1.1/angular-toastr.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/angular-toastr/2.1.1/angular-toastr.tpls.min.js"></script>
<script type="text/javascript" src="lib/angular-indexedDB/angular-indexed-db.min.js"></script>
<script type="text/javascript" src="../dist/ng-unit-webpc.js"></script>
<script type="text/javascript" src="../dist/ng-request-cache.js"></script>
<script type="text/javascript" src="../dist/ng-oauth2.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
app.controller('mainCtrl', function($scope, $interval, unitFactory){
$scope.show = {
crypt: false,
base64: false,
}
$scope.spinner = function(){
var spin = unitFactory.spinner();
setTimeout(function () {
unitFactory.spinner_stop(spin);
}, 5000);
}
$scope.loading = function(){
unitFactory.loading();
setTimeout(function () {
unitFactory.loading_stop();
}, 5000);
}
$scope.toastr = function(){
unitFactory.toastr('success', '成功获取数据！');
}
$scope.alert = function(){
unitFactory.alert({
type: 'success',
title: '对话框的标题',
text: '对话框的正文部分'
}, function(){
console.log('打开对话框的回调');
})
}
$scope.confirm = function(){
unitFactory.confirm({
title: '询问框的标题',
text: '面确认要干点什么吗？'
}, function(){
console.log('点击确认按钮后的回调');
}, function(){
console.log('点击取消按钮后的回调');
})
}
$scope.progress = function(){
$scope.progress_param = {
width: 0,
text: '正在加载数据'
}
$interval(function(){
if($scope.progress_param.width < 100){
$scope.progress_param.width = $scope.progress_param.width + 5;
unitFactory.progress($scope.progress_param);
}else{
unitFactory.close();
}
}, 500, 21);
}
$scope.prompt = function(){
unitFactory.prompt({
title: '填空框标题',
text: '填空框说明',
}, function(input){
console.log('您输入的内容是：'+ input);
})
}
$scope.alertClose = function(){
unitFactory.popup({
title: '对话框的标题',
text: '对话框的正文部分',
})
}
$scope.crypt = function(){
$scope.show = {
crypt: true,
base64: false,
};
unitFactory.prompt({
title: '填空框标题',
text: '填空框说明',
}, function(input){
var crypt = unitFactory.generateKey(512);
$scope.privkey = crypt.privkey
$scope.pubkey = crypt.pubkey;
$scope.encrypt = unitFactory.encrypt(input, $scope.pubkey);
$scope.decrypt = unitFactory.decrypt($scope.encrypt, $scope.privkey)
console.log('您输入的内容是：'+ input, $scope.encrypt, $scope.decrypt);
$scope.$apply();
})
}
$scope.imgToBase64 = function(){
$scope.show = {
crypt: false,
base64: true,
};
unitFactory.prompt({
title: '转换网络图片为base64数据',
text: '图片地址',
}, function(input){
$scope.imgUrl = input;
unitFactory.imgToBase64($scope.imgUrl, function(resp){
$scope.base64 = angular.toJson(resp);
$scope.$apply();
})
})
}
$scope.sendSms = function($event){
unitFactory.sendSms({mobile: '18100882830'}, $event);
}
$scope.upload = function(){
unitFactory.upload();
}
});
</script>
</body>
</html>