Premiers pas avec les bases d'Angularjs_AngularJS

À ce propos, en fait, je ne sais pas qui cibler ni par où commencer à écrire, alors là, je vais commencer à écrire selon une idée simple

1.angular.element
2.angulaire.Bootstrap

Nous savons très bien que lorsque ng-app est appliqué à un nœud, angulaire l'initialisera automatiquement pour vous. Le processus d'initialisation est divisé en les étapes suivantes

.

1. Angular s'initialisera automatiquement lors du chargement du document. Il trouvera d'abord le nœud spécifié par l'instruction ng-app.
2. Charger les instructions liées au module
3. Créez un injecteur (gestionnaire de dépendances) lié à l'application
4. Avec le ng-app spécifié comme nœud racine, commencez à compiler le Dom

Maintenant, initialisons-le nous-mêmes et créons quelque chose d'équivalent à la commande ng-app. angulaire.element est un wrapper qui enveloppe les éléments DOM d'origine ou les chaînes HTML en tant qu'éléments jQuery. angulaire.Bootstrap peut initialiser manuellement le script Nous utilisons ces deux-là pour initialiser ce script

.

2.compilateur

Nous voyons clairement que les documents officiels d'angularjs sont tous des noms de cas camel, tels que ngApp, ngModule, ngBind, etc. Ce sont des instructions associées. Le compilateur html nous permet de définir nous-mêmes les attributs et les balises des éléments Angular. les comportements sont appelés directives.
La documentation officielle explique le compilateur comme suit

Compiler est un service d'Angular, chargé de parcourir les nœuds DOM et de rechercher des attributs. La compilation est divisée en deux étapes :

1. Compiler : parcourir les nœuds et collecter toutes les directives, et renvoyer une fonction de liaison
2. Lien : liez les directives à une portée et créez une vue en direct. Toute modification apportée à la portée sera reflétée dans la vue (mise à jour de la vue) ; toute activité utilisateur (modification) sur le modèle sera reflétée dans le modèle de portée (liaison bidirectionnelle). Cela permet au modèle de portée de refléter les valeurs correctes.
Certaines directives, telles que ng-repeat, copieront un élément spécifique (combinaison) une fois pour chaque élément de la collection. Les deux étapes de compilation et de liaison améliorent les performances. Parce que le modèle cloné ne doit être compilé qu'une seule fois, puis lié une fois pour chaque élément de la collection (similaire à la mise en cache des modèles).

3. Créez votre propre directive étape par étape

1. Comprendre la directive
Tout d'abord, comprenez que les directives suivent la dénomination camel, comme ngModule. Une fois compilées, la correspondance est comme ceci, par exemple :

.

la directive peut utiliser x- ou data- comme préfixe, et peut utiliser des délimiteurs tels que :, - ou _ pour convertir les méthodes de dénomination des cas de chameaux, comme indiqué ci-dessous :

Copier le code

2. Étapes de compilation

Trois étapes de "compilation" HTML :

1. Tout d’abord, convertissez le HTML en objets DOM via l’API standard du navigateur. C'est une étape importante. Parce que le modèle doit être analysable (conforme à la spécification) HTML. Cela peut être comparé à la plupart des systèmes de modèles, qui sont généralement basés sur des chaînes plutôt que sur des éléments DOM.
2. La compilation du DOM se termine en appelant la méthode $comple(). Cette méthode traverse le DOM et correspond à la directive. Si la correspondance réussit, elle sera ajoutée à la liste des directives avec le DOM correspondant. Tant que toutes les directives associées au DOM spécifié sont identifiées, elles seront triées par priorité et leurs fonctions compile() seront exécutées dans cet ordre. La fonction compile de la directive a la possibilité de modifier la structure du DOM et est responsable de la génération de l'analyse de la fonction link(). La méthode $compile() renvoie une fonction de liaison combinée, qui est une collection de fonctions de liaison renvoyées par les fonctions de compilation de toutes les directives.

3. Connectez le modèle à la portée via la fonction de liaison renvoyée à l'étape précédente. Cela appelle à son tour la propre fonction de liaison de la directive, leur permettant d'enregistrer certains auditeurs sur l'élément et de configurer certaines surveillances en conjonction avec la portée. Le résultat est une liaison instantanée bidirectionnelle entre la portée et le DOM. Lorsque la portée change, le DOM recevra la réponse correspondante.

Copier le code

// Étape 1 : analyser le HTML dans l'élément DOM

Copier le code