Personnellement, je pense que vous devez bien comprendre le mécanisme de fonctionnement des AngularJS afin d'éviter de tomber autant que possible dans la fosse. Dans cet article, je vais faire une analyse plus claire et détaillée de ce que AngularJS a fait après avoir démarré en fonction des informations en ligne et de ma propre compréhension.
Tout d'abord, jetons un coup d'œil à ce que Angular a fait étape par étape.
<! doctype html> <html ng-app> <adref> <script src = "angular.js"> </ script> </ head> <body> <png-initi = "name = 'world'> Bonjour {{name}}! </p> </body> </html>Lorsque vous utilisez votre navigateur pour accéder à index.html, le navigateur fait à son tour les choses suivantes:
L'ensemble du processus peut être représenté par cette image:
OK, via l'exemple ci-dessus, nous pouvons comprendre comment AngularJS rend une page étape par étape. Alors, comment cela interagit-il avec la boucle d'événement du navigateur? Ou comment interagissez-vous avec les utilisateurs? En bref, il est principalement divisé en trois étapes:
1. La boucle d'événement du navigateur attend que l'événement soit déclenché, y compris l'interaction utilisateur, les événements de synchronisation ou les événements réseau (tels que les réponses du serveur, etc.);
2. Une fois un événement déclenché, il entrera dans le contexte JavaScript et le DOM est généralement modifié via des fonctions de rappel;
3. Une fois la fonction de rappel exécutée, le navigateur rend la nouvelle page en fonction du nouveau Dom.
Comme le montre la figure ci-dessous, le processus d'interaction est principalement composé de plusieurs cycles:
AngularJS modifie les workflows JavaScript généraux et fournit son propre mécanisme de traitement des événements. Cela sépare le contexte JavaScript en deux parties, l'une est le contexte JavaScript natif, et l'autre est le contexte angularjs. Seules les opérations dans le contexte AngularJS peuvent profiter de la liaison aux données angulaires, de la gestion des exceptions, de l'observation des biens et d'autres services. Cependant, Angular n'est pas ignoré pour les étrangers (tels que les opérations JavaScript natives, les rappels d'événements personnalisés, les bibliothèques tierces, etc.). Vous pouvez utiliser la fonction $ applique () fournie par AngularJS pour envelopper ces étrangers dans le contexte AngularJS, afin qu'Angular puisse sentir les changements qu'ils ont apportés.
Ensuite, examinons comment ces cycles fonctionnent pendant le processus d'interaction?
1. Tout d'abord, le navigateur sera à l'état d'écoute. Une fois qu'un événement est déclenché, il sera ajouté à une file d'attente d'événements, et les événements de la file d'attente d'événements seront exécutés un par un.
2. Si l'événement dans la file d'attente d'événements est enveloppé par $ applat (), il entrera dans le contexte d'AngularJS. Le fn () ici est la fonction que nous voulons exécuter dans le contexte d'AngularJS.
3. Angularjs exécutera la fonction fn (). Habituellement, cette fonction changera certains états de l'application.
4. Ensuite, Angularjs entrera dans la boucle $ digest composée de deux petites boucles. Une boucle est utilisée pour traiter la file d'attente $ EVAMASYNC (utilisée pour planifier certaines opérations qui doivent être traitées avant de rendre la vue, généralement implémentée via Settimeout (0), qui sera plus lente et peut provoquer une gigue de vue). Une boucle est utilisée pour traiter la liste $ watch (une collection de certaines expressions. Une fois qu'un changement se produit, la fonction de montre $ sera appelée). La boucle $ digest continuera d'itréter lorsqu'il sait que la file d'attente $ EVAMASYNC est vide et que la liste de surveillance $ est également vide, c'est-à-dire que le modèle ne changera plus.
5. Une fois que la boucle $ digest d'AngularJS se termine, l'exécution entière laissera le contexte d'AngularJS et de JavaScript, puis le navigateur renforcera la vue après la modification des données.
Ensuite, analysons-le en combinaison avec le code:
<! doctype html> <html ng-app> <adref> <script src = "angular.js"> </ script> </ head> <body> <entrée ng-model = "name"> <p> Bonjour {{name}}! </p> </body> </html>La seule différence entre ce code et le code précédent est qu'il existe une entrée pour recevoir l'entrée utilisateur. Lorsque vous accédez à ce fichier HTML avec un navigateur, la directive NG-model sur l'entrée liera l'événement Keydown à l'entrée et recommandera une montre $ à la variable de nom pour recevoir la notification du changement de valeur variable. Pendant la phase interactive, la série d'événements suivantes se produit principalement:
1. Lorsque l'utilisateur appuie sur une touche du clavier (par exemple, a), l'événement de la clé de l'entrée est déclenché;
2. L'instruction sur l'entrée détecte le changement de la valeur dans l'entrée et les appels $ applique ("name = 'a'") pour mettre à jour le modèle dans le contexte angularjs;
3. Angularjs attribue «a» à nommer;
4. La boucle $ digest démarre, la liste de surveillance $ détecte un changement dans la valeur du nom, puis informe l'expression {{nom}} pour mettre à jour le DOM;
5. Quittez le contexte d'AngularJS, puis quittez l'événement Keydown dans le contexte de JavaScript;
6. Le navigateur remettait la vue.
Ce qui précède est une collection d'informations sur le principe de travail d'AngularJS. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien à ce site!