Having some trouble with my code here. I'm trying to set up routes to display a gif using CSS animation when the page is loading. The gif shows up initially, but then everything fades out and the gif remains on the page. Additionally, I'm getting a "TypeError: d[h].apply is not a function" error in the console. Any assistance would be greatly appreciated. Here's the code snippet:
HTML:
<!DOCTYPE html>
<html lang="en" ng-app="OWMApp">
<head>
<meta charset="UTF-8">
<title>Open Weather Map App</title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/owm-app.css">
</head>
<body ng-class="{loading: isLoading}">
<div class="container">
<a href="#/">Home</a>
<a href="#/cities/New York">New York</a>
<a href="#/cities/Dallas">Dallas</a>
<a href="#/cities/Chicago">Chicago</a>
<a href="#/cities/NotOnList">Unsupported city</a>
<div class="animate-view-container">
<div ng-view class="animate-view"></div>
</div>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="bower_components/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="app/owm-app.js"></script>
</div>
</body>
</html>
CSS:
body, html { position: relative; min-height: 100%;}
.loading {
position: relative;
height: 100%;
}
.loading:before {
position: absolute;
content: "";
left: 0;
bottom: 0;
right: 0;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.9) no-repeat center center;
background-image: url('./loading-animation.gif');
}
.animate-view-container { position: relative; min-height: 100%; }
.animate-view.ng-enter,
.animate-view.ng-leave {
transition: 1s linear all;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #eee;
}
.animate-view.ng-enter { opacity: 0; z-index:100; }
.animate-view.ng-enter.ng-enter-active { opacity: 1; }
.animate-view.ng-leave { opacity: 1; z-index: 99; }
.animate-view.ng-leave.ng-leave-active { opacity: 0; }
JS:
angular.module('OWMApp', ['ngRoute', 'ngAnimate'])
.value('owmCities', ['New York', 'Dallas', 'Chicago'])
.config(['$routeProvider', function($routeProvider){
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.when('/cities/:city', {
templateUrl: 'city.html',
controller: 'CityCtrl',
resolve: {
city: function(owmCities, $route, $location) {
var city = $route.current.params.city;
if(owmCities.indexOf(city) == -1){
$location.path('/error');
return;
}
return city;
}
}
})
.when('/error', {
template: '<p>Error - Page Not Found</p>'
});
}])
.controller('HomeCtrl', ['$scope', function($scope){
}])
.controller('CityCtrl', function($scope, city){
$scope.city = city;
})
.run(function($rootScope, $location){
$rootScope.$on('$routeChangeError', function(){
$loaction.path('/error');
});
$rootScope.$on('$routeChangeStart', function(){
$rootScope.isLoading = true;
});
$rootScope.$on('$routeChangeSuccess', ['$timeout', function(){
$timeout(function(){
$rootScope.isLoading = false;
}, 1000);
}]);
});