How to make an Initial page for ionic app

ionic-v1
1

My app need some data to load from the server before starting, I want to make an initial page that shows a spinner for example and load the data, after loading that data, the initial page controller (InitCtrl) will redirect to the main app page with a $state.go('tab.dash').

2

Use $http service it returns a promise, so after you get the data from the server it will call the function passed inside .then()

$http.get('/some-url').then(function(data) {
  $scope.items = data.items;
  // do redirection here
 })
3

You can use the splashscreen plugin for initializing stuff while starting the application.

Alternatively, you can use a custom loading approach, something like the following:

.controller('InitCtrl', ['$scope', '$ionicLoading', '$state', 'MyFactory', function ($scope, $ionicLoading, $state,  MyFactory) {
   
    $ionicLoading.show({
        template: "Loading..."
    });

    MyFactory.LoadData()
        .then(function() {
            // success loading data
            $ionicLoading.hide();
            $state.go('myHomeState');
        }, function() {
            // if fails
        });
});
2 Likes