CODEWITHSUNDEEP
javascriptangularjs
Jason
Jason

Reputation: 1141

Angular flickers when authenticating user

I need help eliminating a flicker with Angular. I am getting a flicker every time a new route is passed through. I have a login and logout button outside the ng-view which uses ng-if="authenticated". The problem is any time a menu item is clicked and a new view is displayed the logout or login button flickers. Is there a way to eliminate this? Below is the module, config and run function.

PS. I am very new to Angular. This was a script from a tutorial on using Angular, php and mysql for a login system.

var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ui.bootstrap', 'toaster']);

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/login', {
            title: 'Login',
            templateUrl: 'views/login.html',
            controller: 'authCtrl'
        })
        .when('/logout', {
            title: 'Logout',
            templateUrl: 'views/login.html',
            controller: 'logoutCtrl'
        })
        .when('/signup', {
            title: 'Signup',
            templateUrl: 'views/signup.html',
            controller: 'authCtrl'
        })
        .when('/dashboard', {
            title: 'Dashboard',
            templateUrl: 'views/dashboard.html',
            controller: 'authCtrl'
        })
        .when('/posts', {
            title: 'Posts',
            templateUrl: 'views/posts.html',
            controller: 'authCtrl'
        })
        .when('/stats', {
            title: 'Stats',
            templateUrl: 'views/stats.html',
            controller: 'authCtrl'
        })
        .when('/ambas', {
            title: 'Ambassadors',
            templateUrl: 'views/ambassadors.html',
            controller: 'authCtrl'
        })
        .when('/images', {
            title: 'Images',
            templateUrl: 'views/images.html',
            controller: 'authCtrl'
        })
        .when('/', {
            title: 'Login',
            templateUrl: 'views/login.html',
            controller: 'authCtrl'
        })
        .otherwise({
            redirectTo: '/posts'
        });
}])
.run(function ($rootScope, $location, Data) {
    $rootScope.$on("$routeChangeStart", function (event, next, current) {
        $rootScope.authenticated = false;
        Data.get('session').then(function (results) {
            if (results.uid) {
                $rootScope.authenticated = true;
                $rootScope.uid = results.uid;
                $rootScope.name = results.name;
                $rootScope.email = results.email;
            } else {
                var nextUrl = next.$$route.originalPath;
                if (nextUrl == '/signup' || nextUrl == '/login') {

                } else {
                    $location.path("/login");
                }
            }
        });
    });
});

Upvotes: 1

Views: 353

Answers (1)

Bata
Bata

Reputation: 651

You are setting the authenticated value to false on every route change start. So every time a user clicks to change the route you set it to false, and then a few moments later you set it to true if authentication is fine. That will cause a flicker.

So, remove the $rootScope.authenticated = false; from the $routeChangeStart callback.

$rootScope.$on("$routeChangeStart", function (event, next, current) {
    //$rootScope.authenticated = false; <--- *remove this*
    Data.get('session').then(function (results) {
    ...........

Upvotes: 2

Related Questions