Dans la section précédente, le cadre JS angulaire est brièvement introduit. Dans cette section, les mécanismes d'amorçage d'Angular (bootstrap) et de compilateur (compilation) seront poursuivis.
1: bootstrap: initialisation angulaire
1: L'automatisation initiale recommandée par Angular est la suivante:
<! doctype html> <html xmlns: ng = "http://angularjs.org" ng -pp> <body> ... <script src = "angular.js"> </ body> </ html
Utilisez NGApp pour marquer le nœud racine où vous devez démarrer automatiquement l'application, qui est généralement une balise HTML. Lorsque l'événement téléchargé DomContent se déclenche angulaire, il trouvera automatiquement le NGApp comme le nœud racine de l'application. S'il est trouvé, les opérations suivantes seront effectuées:
1. Directive liée au module de chargement (module) (instructions).
2. Créez un injecteur d'application (mécanisme d'injection d'Angular).
3. Compiler et traiter Ng-App comme les instructions du nœud racine. Cela vous permet de personnaliser la sélection du nœud DOM comme nœud racine d'application.
<! docType html> <html ng-app = "optionAmModuLename"> <body> je peux ajouter: {{+}}. <script src = "angular.js"> </ script> </ body> </html>2: Initialisation manuelle:
Si vous souhaitez avoir plus de contrôle sur l'initialisation, vous pouvez utiliser une méthode de démarrage manuelle personnalisée pour initialiser au lieu de l'initialisation automatique d'Angular. Par exemple, vous devez faire quelque chose avant de compiler Angular le modèle, comme changer certains contenus du modèle. La méthode de démarrage manuelle sera la suivante:
<! doctype html> <html xmlns: ng = "http://angularjs.org"> <body> bonjour {{'world'}}! <script src = "http://code.angularjs.org/angular.js"> </cript> <script> angular.element (document) .Ready (). {angular.bootstrap (document);}); </cript> </ body> </html>1. Après que tout le code de la page soit chargé, trouvez le nœud racine du modèle HTML (élément de document typique).
2. Appelez api / angular.bootstrap (angular.bootstrap (élément [, modules])) pour compiler le modèle pour le rendre exécutable.
Deux: Compiler: la traduction d'Angular
Le mécanisme de compilation d'Angular permet aux développeurs d'ajouter une nouvelle syntaxe HTML au navigateur, ce qui nous permet d'ajouter des nœuds HTML, des attributs et même de créer des nœuds personnalisés, des attributs. Angular étend ces comportements en directives.
1: Le traitement du compilateur est divisé en deux étapes:
1. Convertir DOM, collectez la fonction directive et return lien (connexion).
2. Fusionner les instructions et la portée pour générer une vue vivante. Toute modification du mode de portée sera reflétée dans la vue et les interactions utilisateur de la vue seront également synchronisées avec le modèle de portée, et la portée est une seule source de données.
2: Commande directive
La directive est un acte qui sera traité par l'édition spéciale de conception HTML. Il peut être placé sur les noms, les attributs, la classe du nœud ou même dans le commentaire HTML. Voici la méthode d'écriture équivalente de Ng-Bind d'Angular:
<span ng-bind = "exp"> </span> <span> </span> <ng-bind> </ng-bind> <! - Directive: ng-bider exp>
La directive n'est qu'une fonction qui sera exécutée par Angular dans le DOM. Voici un exemple de traînée et de gouttes qui peuvent être appliquées à l'attribut de Span et Div:
angular.module ('glisser', []). directive ('gliskable', fonction ($ document) {var startx =, starty =, x =, y =; return function (scope, élément, att) {element.css ({position: 'relative', border: 'px solide rouge', background. fonction (événement) {startx = event.screenx - x; starty = event.screeny - y; 'px', gauche: x + 'px'});Démo
Vous pouvez glisser et me déplacer n'importe où!
3: Voir la compréhension
De nombreux moteurs de modèles sont conçus pour fusionner des modèles et des modèles pour renvoyer une chaîne, puis ajoutez au nœud Dom en utilisant InnerHTML, ce qui est considéré que les modifications de données doivent être remises pour générer de nouveaux contenus et annexées au DOM. La figure suivante appartient à la technologie de liaison à sens unique:
Angular n'utilise pas d'instructions directives plutôt que de chaînes. La valeur de retour est une fonction de liaison qui fusionne le modèle de données. La liaison de la vue et du modèle est automatique et transparente, et ne nécessite pas que les développeurs ajoutent des actions supplémentaires pour mettre à jour la vue. Angular n'est pas seulement une liaison du modèle de données, mais aussi un concept de comportement. En tant que reliure bidirectionnelle, la forme est la suivante:
matériel:
1. site officiel angulaire: http://angularjs.org/
2. Téléchargement de code: https://github.com/angular/angular.js
Ce qui précède est les mécanismes de bootstrap et de compilateur angulaires qui vous sont présentés par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!