I've been struggling with a persistent bug on my website for the past few days, and I haven't been able to find a solution yet (perhaps because my knowledge in AngularJs is limited).
Currently, I am using the latest versions of Angular (v1.6.1), ngRoute, and ngAnimate.
The issue I am facing is that the ngView animation enter event does not trigger when the website is first loaded.
Below is the snippet of my code:
var app = angular.module('app', ['ngAnimate', 'ngRoute']);
app.animation('.view', function () {
return {
enter : function (element, done) {
alert('enter');
done();
},
leave : function (element, done) {
alert('leave');
done();
}
}
});
//Config
app.config(function ($routeProvider, $locationProvider, $httpProvider){
$routeProvider.when('/test.php',{
template : function () {
return "<div>Welcome to test page</div>";
}
});
$routeProvider.when('/test.php/:path',{
template : function () {
return "<div>Inside page</div>";
}
});
$locationProvider.html5Mode({enabled: true, requireBase: true});
});
I have come across a similar issue reported on GitHub: https://github.com/angular/angular.js/issues/10536
Some sources claim that it's a "feature, not a bug." However, on the live website, the animation sometimes works while other times it doesn't (especially on Safari and mobile browsers).
When I deliberately slow down the template loading process:
$routeProvider.when('/test.php',{
template : function () {
return "<div>Welcome to test page</div>";
},
resolve: {
message: function ($timeout, $q) {
console.log('asdasa')
return $q(function(resolve){
$timeout(function () {
resolve('message');
},1000);
});
}
}
});
$routeProvider.when('/test.php/:path',{
template : function () {
return "<div>Inside page</div>";
},
resolve: {
message: function ($timeout, $q) {
return $q(function(resolve){
$timeout(function () {
resolve('message');
},1000);
});
}
}
});
Or when using PHP delay:
sleep(1)
The enter event seems to fire, but not consistently, especially when the browser caches or loads quickly.
There are various quick fixes available on GitHub, but I prefer more reliable solutions over temporary hacks. One such hack mentioned on GitHub no longer seems to work:
$rootElement.data("$$ngAnimateState").running = false;
I also attempted the following fix:
app.run(function($animate) {
$animate.enabled(true);
});
However, this has shown erratic behavior and did not resolve the issue on Safari.
You can view an example on JSBIN
Thank you in advance for your assistance, and I look forward to your help!