En fait, je ne sais pas qui devrait être ciblé ou par où commencer à écrire, donc je vais commencer à écrire selon une idée simple.
1.Angular.Element
2.Angular.bootstrap
Nous sommes très clairs que NG-App est appliqué aux nœuds et Angular vous aide automatiquement à vous initialiser. Le processus d'initialisation est divisé en étapes suivantes
1.Angular sera automatiquement initialisé lors de la charge de document, et d'abord, le nœud spécifié par la directive NG-App sera trouvé.
2. Instructions liées au module de chargement
3. Créer un injecteur lié à l'application (Dependence Manager)
4. Commencez à compiler DOM avec la NG-App établie comme nœud racine
Maintenant, nous l'initialisons nous-mêmes et faisons quelque chose d'équivalent à la directive NG-App. Angular.Element Il s'agit de l'emballage, enveloppant l'élément DOM original ou la chaîne HTML en tant qu'élément jQuery. angular.bootstrap peut initialiser manuellement le script, nous les utilisons pour initialiser ce script
La copie de code est la suivante:
<! Doctype html>
<html lang = "zh-cn">
<adal>
<meta charset = "utf-8">
<Title> Bootstrap-Manual </Title>
<style type = "text / css">
.ng-coak {
Affichage: aucun;
}
</ style>
</ head>
<body>
Voici l'extérieur de Ng-App ~~ {{1 + 2}}
<div id = "widuu"> Ceci est dans ng-app ~~~ {{1 + 2}} </div>
<script src = "angular.min.js" type = "text / javascript"> </ script>
<script type = "text / javascript">
angular.element (document) .ready (function () {
angular.bootstrap (angular.element (document.getElementyId ("widuu")));
});
</cript>
</docy>
</html>
2.Compleur
Nous voyons clairement que le document officiel AngularJS est plein de nomenclature de chameaux, comme Ngapp, Ngmodule, Ngbind, etc., sont des instructions connexes. Parmi eux, le compilateur HTML nous permet de définir nous-mêmes les attributs et les étiquettes. Angular appelle ces directives de comportement supplémentaires.
La documentation officielle explique le compilateur comme celui-ci
La copie de code est la suivante:
Compilateur
Le compilateur est un service angulaire qui traverse le DOM à la recherche d'attributs. Le processus de compilation se produit en deux phases.
Compiler: Traverser 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. Tout changement dans le modèle de portée se reflète dans la vue, et toutes les interactions utilisateur avec la vue sont reflétées dans le modèle de portée. Cela fait du modèle de portée la source unique de vérité.
Certaines directives telles que Ng-Repeat Clone Dom Elements une fois pour chaque élément d'une collection. Avoir une phase de compilation et de liaison améliore les performances car le modèle cloné ne doit être compilé qu'une seule fois, puis lié une fois pour chaque instance de clone.
Le compilateur est un service angulaire, responsable de la traversée des nœuds DOM et de la recherche de propriétés. La compilation est divisée en deux étapes:
1. Compilation: traverser les nœuds et collecter toutes les directives, renvoyer une fonction de liaison
2. Lien: liez les directives dans une portée et créez une vue en direct. Toute modification de l'étendue sera reflétée dans la vue (mise à jour de la vue); Toute activité de l'utilisateur (changement) au 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 la valeur correcte.
Certaines directives, telles que Ng-Repeat, copient un élément spécifique (combinaison) une fois pour chaque élément de la collection. La compilation et la liaison sont deux étapes pour améliorer les performances. Parce que le modèle cloné ne doit être compilé qu'une seule fois, puis lier les éléments de chaque collection une fois (similaire au cache de modèle).
3. Créez votre propre directive étape par étape
1. Comprendre la directive
Tout d'abord, nous comprenons que la directive est basée sur la nomenclature de chameaux, comme Ngmodule. Lors de la compilation, le match est comme ça, par exemple:
La copie de code est la suivante:
<entrée ng-model = "foo">
<entrée data-ng: modèle = "foo">
La directive peut utiliser des données x ou des données - comme préfixe, et peut utiliser le délimiteur:,, ou _ etc, pour convertir les méthodes de dénomination de chameau, comme suit:
La copie de code est la suivante:
<span ng-bind = "name"> </span> <br/>
<span ng: bind = "name"> </ span> <br/>
<span ng_bind = "name"> </ span> <br/>
<span data-ng-bind = "name"> </span> <br/>
<span x-ng-bind = "name"> </span> <br/>
Généralement, nous utilisons Ng-Bind pour correspondre à NgBind, ce format
$ compila peut correspondre à la directive en fonction du nom, de l'attribut, du nom de la classe et du commentaire
La copie de code est la suivante:
<my-dir> </ my-dir>
<span my-dir = "exp"> </span>
<! - Directive: My-Dir Exp ->
<span> </span>
Pendant le processus de compilation, le compilateur correspond au texte avec des expressions intégrées dans des attributs (tels que {{quelque chose}}) via le service $ interpolate. Ces expressions seront enregistrées comme montres et seront mises à jour dans le cadre du cycle Digest. Voici une interpolation simple:
<img src = "img / {{nom d'utilisateur}}. jpg" /> Bonjour {{nom d'utilisateur}}!
2. Étapes de compilation
Trois étapes pour "compiler" HTML:
1. Tout d'abord, convertissez HTML en objets DOM via l'API standard du navigateur. C'est une étape très importante. Parce que le modèle doit être analysé (conforme aux spécifications). Cela peut être comparé à la plupart des systèmes de modèles, qui sont généralement basés sur des chaînes, pas des éléments DOM.
2. La compilation du DOM est effectuée en appelant la méthode $ comple (). Cette méthode traverse le DOM et correspond à la directive. Si le match réussit, il sera ajouté à 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 en priorité et exécuteront leur fonction compile () dans cet ordre. Directive Compile Fonction a la possibilité de modifier la structure 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 liées renvoyées par la fonction de compilation de la directive elle-même.
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 fonction de liaison de la directive, leur permettant d'enregistrer certains auditeurs sur l'élément et de créer des montres avec Scope. Le résultat est une liaison instantanée bidirectionnelle entre la portée et le DOM. Lorsque la portée change, le DOM obtiendra la réponse correspondante.
La copie de code est la suivante:
var $ compile = ...; // injecté dans votre code
var scope = ...;
var html = '<div ng-bind =' exp '> </div>';
// Étape 1: analyse HTML dans l'élément DOM
var template = angular.element (html);
// Étape 2: compiler le modèle
var linkfn = $ compile (modèle);
// Étape 3: liez le modèle compilé avec la portée.
linkfn (scope);
liaison de l'attribut ngattr
La copie de code est la suivante:
<SVG>
<cercle ng-attr-cx = "{{cx}}"> </ cercle>
</svg>
C'est tout aujourd'hui, et commencez à écrire pour créer une directive demain ~~~ La longueur de contrôle ne devrait pas être trop longue, il y a beaucoup de concepts principaux dans ce chapitre ~~~