我试图在页面加载之前显示加载动画，但我无法在ng视图中运行javascript函数，我正在寻找解决方案我认为您会支持我的问题我正在等待您的支持
_____________________________________________________________________
loading.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
@-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
@keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
#myDiv {
display: none;
text-align: center;
}
</style>
</head>
<body onload="myFunction()" style="margin:0;">
<center>
<div id="loading">
<div></div>
<div></div>
<a>Yükleniyor</a>
</div>
</center>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>welcome</h2>
<p>loaded content</p>
</div>
<script>
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 2000);
}
function showPage() {
document.getElementById("loading").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}
});
</script>
</body>
</html>
home.html
<div class="body" ng-app="v3App" ng-controller="v3Ctrl">
<ng-view></ng-view>
</div>
app.js
var appv3 = angular.module('v3App', ['ngRoute']);
appv3.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'loading.html'
})
.when('/home', {
templateUrl: 'loading.html'
})
.when('/forum', {
templateUrl: 'forum/index'
})
.otherwise({
redirectTo: '/404'
})
});
要在<ng-view>元素中使用JavaScript，请创建一个控制器函数：
$routeProvider.when('/', {
templateUrl: 'loading.html',
controller: function() {
//code here
})
})
当路由器加载视图时，它会调用控制器函数。
另一个运行JavaScript的地方是解析函数：
$routeProvider.when('/', {
templateUrl: 'loading.html',
resolve: {
loading: function() {
//code here
if (ok) return "OK";
//ELSE abort
throw "loading aborted";
}
}
})
在加载视图之前，路由器调用解析函数。
有关更多信息，请参阅
- AngularJS ngRoute$routeProvider Provider API参考-
.when方法