Dynamic app intro for Ionic

index.md

#Dynamic app intro for Ionic

Problem

I want to show an app introduction on the first time my users open the app

Solution

Lets create a IntroCtrl

.controller('IntroCtrl', function($scope, $state) {

})

From here, lets create a function to change the states

$scope.startApp = function () {
  $state.go('main');
};

At the same time as we change states, lets write to local storage

$scope.startApp = function () {
  $state.go('main');
  window.localStorage.didTutorial = 'true';
};

Now lets check local storage to see if didTutorial is set to true.

if (window.localStorage.didTutorial === 'true') {

} else {

}

If it is set to true, let's call $scope.startApp() from earlier

if (window.localStorage.didTutorial === 'true') {
  $scope.startApp();
} else {
  console.log('Need to do into');
}

Let's see this everything together.

 .controller('IntroCtrl', function($scope, $state, $ionicSlideBoxDelegate) {
  $scope.startApp = function () {
    $state.go('main');
    window.localStorage.didTutorial = 'true';
  };

  if (window.localStorage.didTutorial === 'true') {
    $scope.startApp();

  } else {
    console.log('Need to do intro');
  }
})

Codepen example

Thanks for this easy to follow example! One question I have: When clicking 'Do Tutorial Again', was the intent for it to go back to the last page of the tutorial as opposed to the first? That is what is happening for me when I run it on my browser and in Ionic View and it seemed strange to me. Maybe some variable for what slide the user is on isn't getting reset? Thoughts?