Pouvez-vous expliquer la façon étape par étape dans laquelle une application JS angulaire démarre et commence à courir sur une page HTML? N’épargner aucun détail important.

Vous commencez en émettant une requête standard pour une page Web qui est servie à vous de l’application d’hébergement de serveur où son HTML/CSS est chargé dans votre navigateur (cela devrait tous être plutôt familier donc je vais juste sauter ces détails par souci de concision). L’aperçu général de la chaîne de processus est Bootstrap-> Compilation-> exécution

  • La première partie consiste à définir le point d’entrée pour angulaire à utiliser comme l’étendue racine lorsqu’il initialise votre module (s) ; Pour ce faire placer la directive ng-app à l’intérieur d’une balise de l’élément dans votre page - habituellement, vous pouvez placer ce droit dans la balise d’ouverture « html » qui signifie la page entière sera incluse, mais d’autres éléments fera aussi bien selon vos besoins.
  • Au cours de la première page-charge statique, il y a un lien de source pour le code de bibliothèque Angular.js partir du même serveur ou via un CDN et l’emplacement idéal de cet appel est un point de débat - le consensus général semble être ne pas lier dedans jusqu'à ce que juste avant la fermeture balise html-body (mais avant de relier d’autres sources telles que vos directives angulaires etc..) comme cela se traduira par la plus grande efficacité/vitesse depuis cela immédiatement commence la phase de Bootstrapping dans lequel AngularJS s’initialise lui-même, puis localise son point d’entrée (directive ng-app) immédiatement commence à chercher pour Directives liées à la page dans le processus de Compilation.
  • (Note que vous verrez généralement un effet « clignotant » où vous pouvez voir momentanément des variables de portée, des accolades, des filtres, des Expressions, etc. qui font partie de votre modèle d’affichage lorsque le faire de cette façon et une façon vous pouvez lutter contre ce phénomène consiste à créer une règle CSS telles que
  • Phase de compilation recherche et recueille toutes les Directives, rencontrées sur la page et effectue ensuite Linking d'entre eux à leur code de Javascript approprié/fonctionnalité via AngularJS bibliothèques intégrées et/ou code de Directives personnalisé. Ces Directives combinées avec une étendue de remplacent le DOM pour produire un nouvel affichage dynamique « en direct » du modèle.
  • Fur AngularJS compilation phase, Modules sont rencontrés contenir des instances d’autres objets (contrôleurs, filtres, Services, Animations, etc..) et ces modules sont reliés entre eux grâce à l’injection de dépendance via le Service Providers/injecteur (facilitant le code réutilisation, héritage, et globalement une meilleure structuré hiérarchie). Ici, un ou plusieurs enfant portée sont créés par ng-contrôleur (contrôleurs) ou directives ng-répétition (etc.). Vous avez également la configuration de boucle « Digest » pour gérer l’interaction entre votre application et la boucle d’événements de navigateur qui est responsable en partie de mettre à jour les éléments DOM avec toutes les modifications pour modéliser les données et l’exécution de toute fonction de Watcher enregistrées. (Watcher fonctions contribuent à propager les valeurs portée également utilisé dans le modèle tel que l’affichage de DOM tenir compte de changements dans les valeurs du modèle de données). À la fin de la phase de compilation avec angulaire (qui devrait vraiment seulement se produire une fois) le modèle compilé est lié de sorte que la portée du modèle et la vue sont liés très étroitement - ainsi à l’un des changements affectent directement et mettre à jour l’autre sans besoin de re-manipuler le DOM entière chaque fois les modifications de vos données. Cette liaison de données mène à l’étape de Runtime qui persiste jusqu'à ce que la page est fermée, navigué loin de, ou de rechargement ne se produit.

Le cycle de vie étendue repose sur les phases ainsi que brièvement peuvent être décrite comme suit (à ce stade nous avons déjà créé la portée et enregistré les observateurs dans l’étape de liaison de données donc ramasser de là...).

  • Modèle Phase de Mutation - lorsque les données dans le code de AngularJS portée changent, la méthode $apply() met à jour le modèle et les appels à $digest() mise à jour le DOM ainsi que les montres enregistrés. Permet également aux changements de manutention dans les contrôleurs/Services de mise à jour automatique du DOM (ainsi il est recommandé que les modifications apportées au champ d’application se fasse principalement à l’intérieur des contrôleurs ou des Services, d’autre, vous devez appeler à Scope.$apply() pour forcer le modèle + DOM pour mettre à jour correctement de manière synchronisée.
  • Observation de mutation - se produit lors de l’exécution de la boucle de Digest (ou un appel direct à $apply() méthode) $digest() méthode. À ce stade tous les montres sont évalués pour toutes les modifications possibles et, si la modification a été apportée, cette montre $watch (fonction d’écouteur) est appelée pour mettre à jour le DOM en conséquence
  • À la fin du cycle de vie est la phase de Destruction dans lequel $destroy() supprime le champ d’application de la mémoire du navigateur. Cela peut être appelé automatiquement par angulaire quand une portée enfant n’est plus nécessaire, et il arrête les appels $digest(), supprime toute montres et marque l’étendue pour être la mémoire nettoyée par le navigateur.

Ouf... Je suis certain que je pourrais relire ce 100 fois prendre part, ré-arranger les choses, ré-organiser et ré-expliquer 100 façons différentes. La vérité est je ne suis pas un expert par tout moyen sur AngularJS - en général, je travaille avec une architecture MVC hautement personnalisée, construite autour de nœud, Express, Mongo et l’épine dorsale. Mais comme j’ai pataugé mon chemin dans l’apprentissage et à l’aide de AngularJS plus récemment, j’ai fait un point de décomposant en une hiérarchie de concepts majeurs et puis itérativement passant par chacune d'entre elles et les faire tomber dans les détails supplémentaires et ainsi de suite. La vérité est angulaire est un cadre assez complexe et lourd, et une explication détaillée de chaque minutie exigerait un expert en la matière à écrire un livre de texte assez long et exhaustif pour tout couvrir. Il s’agit peut-être d’un début et d’autres peuvent remplir plus de détails et d’apporter quelques corrections à mon essai ici.


Tags: HTML, AngularJS