CODEWITHSUNDEEP
javascriptangularjsionic-framework
Siyah
Siyah

Reputation: 2897

What is the best way to show a page only on first visit with Angular?

I am using this code to show the splashscreen only when the user is visiting the app for the first time. This works, partially, but it's not working properly.

When a user, who has already visited the app before, visits again, it first shows the splashscreen for just 1 second (so a delay), before it (eventually) goes to the home screen... so it's like a glitch.

Main controller:

$urlRouterProvider.otherwise("/splash");

In my splashscreen controller, I have this:

  if (localStorage['firstTimeLoad']!='TRUE'){
        localStorage['firstTimeLoad']='TRUE';
        $state.go('splash'); 
    }
    else {
        $state.go('home');
    }

So probably I am doing something wrong here and I want to know how can I show a page just once (on first visit!) and not anymore...

Upvotes: 0

Views: 1812

Answers (1)

Frank Modica
Frank Modica

Reputation: 10516

The code that is currently in your splashscreen controller might belong in your Main controller:

  if (localStorage['firstTimeLoad']!='TRUE'){
        localStorage['firstTimeLoad']='TRUE';
        $state.go('splash'); 
    }
    else {
        $state.go('home');
    }

If the code above were in your splash screen controller, whenever the user gets to the splash screen for the first time it would send them back to the splash screen. Then the second time it would send them to Home (but you're still starting from the splash screen, so maybe there is still a delay before you send them to Home?).

Also, it seems like the code that is currently in your Main controller should be in your routes file:

$urlRouterProvider.otherwise("/splash");

Edit: According to the comments, there is no Main controller (that is what you call your route provider). So the redirect logic could go in your Home controller. But if you want to keep it in your splash screen controller, I assume there is a setTimeout in there - where is it located? It looks like your logic needs to be something like this:

if (localStorage['firstTimeLoad']!='TRUE'){
    localStorage['firstTimeLoad']='TRUE';

    $timeout(function() {
        // Show the current splash screen for some time, then redirect
        $state.go('home'); 
    }, delayTimeInMilliseconds);
}
else {
    $state.go('home');
}

But we may be able to provide better help if you show more code.

Edit: The code above works for me, but since it executes in the splash screen controller, even if the second branch of the if statement executes (causing an immediate redirect to home) the splash screen could still render and display for a fraction of a second before the redirect completes. A quick workaround could be to set a variable showSplashScreen:

if (localStorage['firstTimeLoad']!='TRUE'){
    localStorage['firstTimeLoad']='TRUE';

    $scope.showSplashScreen = true;

    $timeout(function() {
        // Show the current splash screen for some time, then redirect
        $state.go('home'); 
    }, delayTimeInMilliseconds);
}
else {
    $state.go('home');
}

And then use ng-if = "showSplashScreen" on the outermost element of your splash screen template. Otherwise, the redirect logic should be moved elsewhere (perhaps into the router itself, as a resolve property on the Home route or a parent route, or even in the Home controller) so that you never even get to the splash screen controller if the user has already been to the site.

Upvotes: 2

Related Questions