CODEWITHSUNDEEP
angularjsionic-framework
Klidi Spiro
Klidi Spiro

Reputation: 49

Angularjs State transition

I am building a hybrid mobile app using ionic framework and cordova (first time).I am having problems with state transition because by default angular renders the template before completing the transition.This makes the the app look slow (when you click a menu item and wait for it to come).This happens only for those who load data from local storage or service! My Question is: How can I make the template come empty in the moment I click the menu item , then show a loader until the template is ready.Below is some code is use in my menu controller for the state transition!

//I use ng-click="navigateTo('state name')"

$scope.navigateTo = function (stateName) {
    $timeout(function () {
        $mdSidenav('left').close();
        if ($ionicHistory.currentStateName() != stateName) {
            $ionicHistory.nextViewOptions({
                disableAnimate: false,
                disableBack: true
            });
            $state.go(stateName);
        }
    }, ($scope.isAndroid == true ? 1000 : 0));
};// End navigateTo.

Below is the controller code for the view that needs a solution

appControllers.controller("calendar_Ctrl", function($scope,$rootScope, $state,$stateParams, $ionicHistory, $filter, $q, $timeout, $log, MaterialCalendarData, $moment) {

$scope.isAnimated =  $stateParams.isAnimated;

$scope.selectedDate = null;
$scope.weekStartsOn = 0;
$scope.dayFormat = "d";
$scope.disableFutureDates = false;
$scope.directionn = "horizontal";


$scope.setDirection = function(direction) {
    $scope.directionn = direction;
    $scope.dayFormat = direction === "vertical" ? "EEEE, MMMM d" : "d";
};

$scope.dayClick = function(date) {
    $scope.msg = "You clicked " + $filter("date")(date, "MMM d, y h:mm:ss a Z");
};



$scope.setContentViaService = function() {
    var today = new Date();
    MaterialCalendarData.setDayContent(today, '<span> :oD </span>')
}

$scope.getItems = function(){
  if(localStorage.getItem("eventsData")){
     var eventsData = localStorage.getItem("eventsData");
     return JSON.parse(eventsData);

  }else{
    return [];
  }
}



var events =  $scope.getItems();



// You would inject any HTML you wanted for
// that particular date here.
var numFmt = function(num) {
    num = num.toString();
    if (num.length < 2) {
        num = "0" + num;
    }
    return num;
};




var loadContentAsync = false;
$log.info("setDayContent.async", loadContentAsync);
$scope.setDayContent = function(date) {

    var key = [date.getFullYear(), numFmt(date.getMonth()+1), numFmt(date.getDate())].join("-");
    var data = (events[key]||[{ type: ""}]); 

    if (loadContentAsync) {
        var deferred = $q.defer();
        $timeout(function() {
            deferred.resolve(data);
        });
        return deferred.promise;
    }

    return data;

};


$scope.isAnimated =  $stateParams.isAnimated;


});

Thank You Very Much for your time and help!!

Upvotes: 0

Views: 169

Answers (1)

Gopinath Kaliappan
Gopinath Kaliappan

Reputation: 7359

Hi Use $ionicLoading Service to solve this problem,

http://ionicframework.com/docs/api/service/$ionicLoading/

Upvotes: 0

Related Questions