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

.

Copier le code Le code est le suivant :

C'est en dehors de ng-app~~{{1 2}}

Ceci est à l'intérieur de ng-app~~~ {{1 2}}

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

Copier le code Le code est le suivant :

Compilateur
Le compilateur est un service angulaire qui parcourt le DOM à la recherche d'attributs. Le processus de compilation se déroule en deux phases.

Compiler : parcourir le DOM et collecter toutes les directives. Le résultat est une fonction de liaison.

Lien : combinez les directives avec une portée et produisez une vue en direct. Toutes les modifications apportées au modèle de portée sont reflétées dans la vue, et toutes les interactions de l'utilisateur avec la vue sont reflétées dans le modèle de portée. Cela fait du modèle de portée le modèle unique. source de vérité.

Certaines directives telles que ng-repeat cloner les éléments DOM une fois pour chaque élément d'une collection. Avoir une phase de compilation et de liaison améliore les performances puisque le modèle cloné ne doit être compilé qu'une seule fois, puis lié une fois pour chaque instance de clonage.

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 :

.

Copier le code Le code est le suivant :

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 Le code est le suivant :

Généralement on utilise ng-bind pour correspondre à ngBind, ce format
$compile peut correspondre aux directives basées sur les noms d'éléments, les attributs, les noms de classe et les commentaires

Copier le code

Le code est le suivant :

Pendant le processus de compilation, le compilateur fait correspondre les expressions intégrées (telles que {{quelque chose}}) dans le texte et les attributs via le service $interpolate. Ces expressions seront enregistrées en tant que surveillances et mises à jour dans le cadre du cycle de résumé. Voici une simple interpolation :
Bonjour {{username}} !

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

Le code est le suivant : var $compile = ...; // injecté dans votre code var portée = ...; var html = '

';

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

var modèle = angulaire.element(html);
// Étape 2 : compiler le modèle
var linkFn = $compile(template);
// Étape 3 : lier le modèle compilé au scope.
lienFn(portée);



Liaison d'attribut ngAttr

Copier le code

Le code est le suivant :

C'est tout pour aujourd'hui, et je commencerai à écrire et créer la directive demain ~~~ Ne gardez pas la longueur trop longue, il y a de nombreux concepts principaux dans ce chapitre~~~