Exécutez les contrôleurs uniquement une fois l'initialisation terminée dans AngularJS
J'ai quelques données globales, qui doit être chargé avant tout contrôleur qui est exécuté dans mon application AngularJS (c'est à dire résoudre des dépendances à l'échelle mondiale dans AngularJS).
Par exemple, j'ai un UserService
avec le getCurrentUser()
méthode qui fait une requête vers le serveur d'arrière-plan afin d'obtenir des données sur l'utilisateur connecté. Et j'ai un contrôleur qui a besoin de ces données afin de lancer une autre demande (par exemple pour charger l'équilibre de l'utilisateur).
Comment puis-je y parvenir?
source d'informationauteur Slava Fomin II
Vous devez vous connecter pour publier un commentaire.
Mise à jour
Veuillez essayer d'utiliser la méthode spécifiée dans la «De façon asynchrone d'Amorçage AngularJS Applications avec des Données Côté Serveur» article si possible.
Vous pouvez utiliser le angulaire différé-bootstrap module pour l'obtenir maintenant!
Je ne suis pas sûr de la validité de cette réponse, vous pouvez toujours utiliser les idées, mais assurez-vous de bien le tester avec votre code. Je vais essayer de garder cette réponse jusqu'à ce jour jamais avec les technologies.
Vieille réponse
Il existe plusieurs approches pour le problème de l'asynchrone d'initialisation de l'application.
Quand il s'agit de données qui doivent être résolus avant qu'un seul contrôleur est appelé - vous pouvez facilement utiliser
resolve
option dengRoute
's$routeProvider
. Toutefois, lorsque vous avez besoin de quelques données globales à être chargée avant que le contrôleur est appelé - vous avoir à improviser.J'ai essayé de rassembler toutes les solutions possibles dans cette réponse. Je donne dans l'ordre de préférence.
1. À l'aide de ui-router
Lors de l'utilisation de l'interface utilisateur du routeur au lieu de native
ngRoute
vous pouvez créer un résumé de la racine de l'état et de résoudre toutes les données qu'il contient, avant de sous-états sont activés.Je vous recommande d'utiliser cette approche.
ui-router
offre beaucoup de caractéristiques supplémentaires y compris la capacité à résoudre des dépendances hiérarchiques et est bien acceptée par la communauté des développeurs.Exemple
La
stateHelper
aidera grandement à réduire le code lors de l'utilisation de résumé de la racine de la portée de l'approche.Racine champ d'application est défini comme abstraite ne peut donc pas être activé directement et il n'a pas d'URL.
template: '<ui-view/>'
est nécessaire pour vues imbriquées à être bien rendu.2. Faire des promesses en racine contrôleur
Vous pouvez faire des promesses et de les ajouter à la
$rootScope
à l'intérieur de la racine de votre contrôleur, c'est à direrun()
fonction.J'ai créé un Débarquez à démontrer l'idée:
http://plnkr.co/edit/gpguG5Y2S4KOz1KOKzXe?p=preview
C'est une parfaite solution de travail, cependant, il gonfle le code et le rend plus difficile à utiliser et à comprendre (rappel de l'enfer). Je le recommande seulement si la première méthode ne fonctionne pas pour vous.
3. La transmission des données à la page de l'application
Vous pouvez inclure toutes les données d'initialisation directement à la page HTML générée sur le serveur et d'y accéder à partir de votre application.
Considérons cet exemple:
Et vous pouvez bootstrap, AngularJS application manuellement dans le
init()
méthode de votre personnaliséapplication
objet.Je n'aime pas vraiment cette approche, comme je crois que le frontend et backend de l'application Web se doit d'être séparés. Idéalement, votre frontend devrait être un site web statique (par exemple, des tas de HTML, de CSS et de JS qui peuvent être livrés via CDN) et back-end et devrait être strictement une API serveur sans une couche de présentation (c'est à dire qu'il devrait ne sais rien à propos de HTML, CSS et autres). Cependant, c'est une solution de travail, si vous pouvez vivre avec l'étroite intégration entre les composants de l'application.