Comment gérer plusieurs appels de ressources sur ngRoute afficher la charge en angulaire js

Question

Besoin d'aide pour réduire le temps de chargement de l'application. Dans notre application, nous utilisons ngroute et dans ng-route, nous avons l'appel de résolution. Une fois l'appel résolu, nous effectuons d'autres appels de fonction. Chaque appel de fonction est un appel de ressource individuel qui obtient des données. Maintenant s'il vous plaît vérifier le code ci-dessous

$routeProvider.when('/friends/search', { 
    controller: 'FriendsSearchController', 
    controllerAs: 'fsvm', 
    templateUrl: 'friends/search/friends-search.html', 
    resolve: { 
     initFriendData: getFriendsList 
    } 
}); 

function init() { 
    if(initFriendData) { 
     if(initFriendData.success) { 
      getToolBoxes(); 
      getFamilyData(); 
     } 
    } 
} 
init(); 

function getToolboxes() { 
    var promise = friendLandingService.getUserInfo(); 
     promise.then(function (result) { 
      _this.userData = result.data; 
     }, function (error) { 
      console.log(error); 
     }); 
} 

function getFamilyData() { 
    var promise = friendLandingService.familyInfo(); 
     promise.then(function (result) { 
      _this.familyData = result.data; 
     }, function (error) { 
      console.log(error); 
     }); 
} 

Maintenant, si vous voyez, j'ai deux fonctions qui font des promesses d'appels et d'obtenir les données. C'est bien, mais la question est de savoir quand les appels prennent du temps, il y a un retard dans les données affichées sur la page. En avant comment inclure plusieurs appels dans la fonction de résolution car je ne peux pas continuer à ajouter des fonctions. Quelqu'un peut-il me dire comment changer ce style de résolution? J'ai besoin de l'information sur le chargement de la page Je ne peux pas changer cela, mais comment gérer ces multiples fonctions dans la résolution. Désolé pour la longue question mais je devais préciser sur ma question :)

Answer 1

Pour exécuter les trois données va chercher dans une résolution fonction, utilisez $q.all:

$routeProvider.when('/friends/search', { 
    controller: 'FriendsSearchController', 
    controllerAs: 'fsvm', 
    templateUrl: 'friends/search/friends-search.html', 
    resolve: { 
     initData: ["$q", "friendLandingService" function($q,service) { 
      return initDataPromise($q, service); 
     })] 
    } 
}); 

function initDataPromise($q, service) { 
    var promiseHash = {}; 
    promiseHash.friendData = service.getFriendInfo() 
     .then(function(result) { 
     return result.data; 
    }); 
    promiseHash.familyData = service.getFamilyInfo() 
     .then(function(result) { 
     return result.data; 
    }); 
    promiseHash.userInfo = service.getUserInfo() 
     .then(function(result) { 
     return result.data; 
    }); 
    return $q.all(promiseHash); 
} 

L'objet initData résoudra avec les trois ensembles de données avant que la vue est rendu à DOM. L'une des choses qui distingue le AngularJS $q Service des autres bibliothèques de promesses est que sa méthode $q.all fonctionne avec des hachages d'objet JavaScript (tableaux associatifs).

Ensuite, dans le contrôleur:

app.controller("FriendsSearchController", ["initData", function(initData) { 
    this.friendData = initData.friendData; 
    this.familyData = initData.familyData; 
    this.userInfo = initData.userInfo; 
}]); 

Answer 2

Vous n'utilisez pas les promesses à leur plein potentiel. Si au lieu d'avoir vos deux fonctions pour le chargement des données (getToolboxes() et getFamilyData()) définissez un var local à la promesse, vous pouvez les faire renvoyer les promesses. Ensuite, dans votre méthode init, vous pourriez faire en sorte que les promesses soient exécutées en parallèle en utilisant Promise.all(). Then(). Jetez un oeil à la documentation sur les promesses fournies par google, cela m'a vraiment aidé à comprendre comment utiliser les promesses à leur plein potentiel. https://developers.google.com/web/fundamentals/getting-started/primers/promises