angularjs multi step form performance

Question

Hi I am working on project that has five step form and there is about 10 ng-repeat of json value. I am facing performance problem sometime there is empty ng-repeat so my fields show no value but when I refresh browser it work again I am using ui.router. How do i solve this issue please help. Is there anyway that can ensure all the values are loaded.

Answer 1

Use the resolve parameter of angular ui-router to make sure data is available before the controller is instantiated.

https://github.com/angular-ui/ui-router/wiki scroll down to the resolve section.

Edit: for your particular use case...

$stateProvider.state('wsp.first_step', 
  { 
    url: '/first_step', 
    templateUrl: 'wsp_edit_step_first',
    resolve: {
      jsonData: function() { //jsonData can be injected into controller
        return /* insert json objects here */;  
      }
    }
  }).state('wsp.second_step', 
  { 
    url: '/second_step', 
    templateUrl: 'wsp_edit_step_second',
    resolve: {
      jsonData2: function() { //jsonData2 can be injected into controller
        return /* insert json objects here */;  
      }
    } 
  }) 
  $urlRouterProvider.otherwise('/wsp/first_step')