Show instruction screen on initial launch of app

Hi,

Our client would like a screen after the splash that is an “Instructional” screen saying a welcome sentence and basic steps to users. This screen will be shown only on initial launch of the app. Has anyone out there done this?

I would like to use it on the ‘AppCtrl’ and make use of localStorage is ok.

I am more of a designer, than developer so any help is much appreciated. Thanks in advance.

Tyler

I’ve used angular-locker to do this on an app. Basically, include locker as an app dependency, inject it into the controller of the first view (I think you can do it in an abstract view), and in that controller something like this:

// isFirstRun is the key, true is the default value
var isFirstRun = locker.get('isFirstRun', true);

if (isFirstRun) {
    // may show a modal or an image, or navigate to a tutorial view
   showIntroductionScreen(); 

   // set isFirstRun to false for future app starts:
   locker.put('isFirstRun', false);
}

Of course this could be wrapped in a function if you want. This value will persist across app updates as long as it isn’t uninstalled, at least in my experience on Android.

1 Like

Hi dpfavand,

Thanks for the suggestion. I would like to use the built-in localStorage. I found this as a guide:

Ah, that works too. (Locker is just a helpful wrapper for local storage).