Not sure what I did wrong here. Just basically setting up routes to display a gif when the page is loading with css animation. The gif shows up but everything fades out and the gif stays on the page and I receive the "TypeError: d[h].apply is not a function" error in the console. Any help is appreciated. Here is the code:
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_ponents/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_ponents/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_ponents/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="bower_ponents/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);
}]);
});
Not sure what I did wrong here. Just basically setting up routes to display a gif when the page is loading with css animation. The gif shows up but everything fades out and the gif stays on the page and I receive the "TypeError: d[h].apply is not a function" error in the console. Any help is appreciated. Here is the code:
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_ponents/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_ponents/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_ponents/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="bower_ponents/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);
}]);
});
-
None of the code you have supplied calls
apply. Presumably you are passing something that isn't a function to some library code which expects a function. Open the developer tools in your browser, set the debugger to pause on exceptions, and then use it to track down what value should be a function but isn't. – Quentin Commented Dec 14, 2015 at 21:24 - Okay will go through that. Thanks for the reply. – David Trinh Commented Dec 14, 2015 at 21:28
1 Answer
Reset to default 6The error is here:
$rootScope.$on('$routeChangeSuccess', ['$timeout', function(){
$timeout(function(){
$rootScope.isLoading = false;
}, 1000);
}]);
Just remove array with $timeout and leave only function as a second argument for $on.
$rootScope.$on('$routeChangeSuccess', function(){ ...
Dependency injection should be done here (as other deps):
.run(function($rootScope, $location, $timeout){ ...
Related docs: https://docs.angularjs/api/ng/type/$rootScope.Scope