Currently, I am in the process of developing a small application using Angular, but I am encountering an issue with template flickering. This problem occurs when one template is displayed briefly and then immediately switches to another.
In my base template, I have defined an <ng-view> tag along with several partial files.
Below is my routeProvider configuration:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '/static/partials/login.html',
controller: 'LoginController',
requireLogin: false
}).
when('/login', {
templateUrl: '/static/partials/login.html',
controller: 'LoginController',
requireLogin: false
}).
when('/register', {
templateUrl: '/static/partials/register.html',
controller: 'RegisterController',
requireLogin: false
}).
when('/profile', {
templateUrl: '/static/partials/profile.html',
controller: 'ProfileController',
requireLogin: true
}).
otherwise({
redirectTo: '/'
});
}]);
In this setup, I have included a requireLogin property to determine if the user needs to be logged in for accessing a specific route.
Additionally, I have implemented an interceptor function that checks the requireLogin property. If it is set to true, the function verifies the user's authentication status with the server. If the user is not authenticated, they are automatically redirected to the login page.
app.run(function($rootScope, $location, $http) {
$rootScope.$on('$routeChangeStart' , function(event, current) {
if(current.requireLogin) {
$http.get('/authenticated').success(function(response){
if(!response.authenticated) {
$location.path('/');
}
});
}
});
});
The template flicker issue specifically arises when the user is not authenticated.