Adresse originale: http://code.angularjs.org/1.0.2/docs/guide/concepts
continuer. .
1. Résumé
Cet article donne principalement un aperçu des composants angulaires et explique comment ils fonctionnent. La liste est la suivante:
2. Startup
Voici comment a commencé Angular (voir le graphique avec l'exemple suivant):
1. Le navigateur charge HTML et convertit les balises HTML en objets DOM;
2. Le navigateur charge le script d'Angular.js;
3. Angular attend l'événement téléchargé DomContent;
4. Angular recherche NG-App, une directive utilisée pour spécifier la plage de limites de l'application;
5. Si Ng-App a un module spécifié (peut-être ng-app = "Someapp"), il sera utilisé comme configuration $ injecteur;
6. $ L'injecteur est utilisé pour créer un service de compilation $ (service) et $ rootscope;
7. Le service de compilation $ est utilisé comme une "compilation" (un peu comme la traversée, puis faire une petite chose mystérieuse) DOM et le connecter au $ Rootscope correspondant.
8. ng-init Cette directive crée un attribut de nom dans la portée correspondante et lui attribue une valeur "Kitty";
9. Insérez la valeur de "{{nom}}" dans l'expression et enfin afficher "Hello Kitty!".
<! Doctype html> <html lang = "zh-cn" ng-app> <ead> <meta charset = "utf-8"> <itle> Bonjour kitty! </tapie> <style type = "text / css"> .ng-coak {affiche: aucun; } </ style> </ head> <body> <div ng-init = "name = 'kitty'"> Bonjour {{name}}! </ div> <script src = "../ angular-1.0.1.js" type = "text / javascript"> </ script> </ body> </html>Les progrès ont été lents parce que j'ai discuté de quelque chose avec quelqu'un ce soir. . . C'est à nouveau la phrase. . . Il est tard dans la nuit maintenant. . . Angular, à bientôt après l'annonce!
=======================================================================.
L'annonce est terminée. . . continuer
3. Exécution
Ce graphique et l'exemple suivant décrivent comment Angular interagit à travers la boucle d'événements du navigateur (toutes les fonctions de traitement de temps, ainsi que les fonctions exécutées par Timer, seront organisées dans une structure de file d'attente, et utiliser une boucle infinie pour extraire en continu les fonctions de la file d'attente pour exécuter. Ceci est en boucle d'événements. http://wiki.nodejs.tw/nodejs_from_scratch/javascript-yunodejs/2-1-event-loop).
1. La boucle d'événement du navigateur attend l'arrivée de l'événement. Les événements proviennent de l'interaction utilisateur (événements DOM), des événements de temporisation (setTimeout), des événements réseau (réponse du serveur, XHR, etc.);
2. La fonction de rappel d'événement commence à s'exécuter. Ici, nous entrons dans le contexte JavaScript (contexte). Cette fonction de rappel peut modifier la structure DOM.
3. Lorsque la fonction de rappel est exécutée, le navigateur quitte le contexte JavaScript et redessine la vue en fonction des changements DOM.
Angular modifie le flux JavaScript général en créant sa propre boucle de traitement d'événements. Cela divise JavaScript dans des contextes d'exécution traditionnels et angulaires. Toutes les opérations effectuées dans le contexte de l'exécution angulaire ont la liaison aux données angulaires, la gestion des exceptions, l'observation des biens et d'autres capacités. Nous pouvons saisir le contexte de l'exécution angulaire en utilisant $ applique () en javascript. Mais n'oubliez pas que dans la plupart des endroits (angulaire) (comme les contrôleurs, les services), la directive qui gère les événements appellera $ vous appliquer. Le scénario où $ s'applique est appelé manuellement lorsque vous implémentez un gestionnaire d'événements personnalisé ou gérez des rappels à partir de bibliothèques tierces.
1. Entrez dans le contexte de l'exécution angulaire en appelant Scope. $ Apply (stimulusfn). StimulusFN est une fonction (y compris la portée comme argument) ou une expression juridique angulaire que nous voulons exécuter dans le contexte de l'exécution angulaire.
2. Angular exécute StimulusFN, qui modifie généralement l'état d'application.
3. Angular entre dans la boucle $ digest. Cette boucle se compose de deux boucles plus petites qui gèrent $ EVALASYNC Fitre et $ watch liste. La boucle $ digest continuera d'itréter avant que le modèle ne soit stable, c'est-à-dire que la file d'attente $ EVAMASYNC est vide, et aucune modification n'est détectée par la liste de surveillance $.
4. $ La file d'attente EVAMASYNC est utilisée comme moyen d'organiser que la trame de pile actuelle doit être sautée de la trame de pile actuelle (le cadre de pile fait référence à la zone (ou à l'espace) alloué à la fonction en cours d'exécution dans la pile. La note de traduction: la fonction de la fonction de la fonction de l'appel principale) et la fonction de la fonction de l'appel principal) et de la fonction de la fonction de l'appel) et de la fonction interne. sur la pile) sont tous dans le cadre de la pile. Ceci est généralement réalisé en utilisant Settimeout (0). Mais la méthode setTimeout (0) provoquera une lenteur, ou lorsque le navigateur dessinait la vue après que chaque événement soit traité, la vue clignote (résoudre ce problème? Comment le résoudre?).
5. $ Watch List est une collection d'expressions qui peuvent être modifiées dans la dernière itération. Si (modèle) change, la fonction de montre $ sera appelée pour atteindre l'objectif de réaffecter un DOM spécifique.
6. Une fois la boucle Angular $ Digest terminée (la situation mentionnée dans les 3 précédents), après avoir quitté le contexte angulaire et javascript, le navigateur repeindra alors le DOM en réponse aux changements.
Ce qui suit explique comment l'exemple "Hello Kitty" (-_-!) Implémente l'effet de liaison aux données lorsque l'utilisateur entre dans la zone de texte.
1. Phase de compilation:
a) Les écouteurs d'événements NG-model et la directive d'entrée sont spécifiés dans <prening>.
b) {{name}} placeholder (interpolation, je ne sais pas comment traduire) (Expression) Définissez une montre $ pour répondre lorsque le nom change.
2. Phase d'exécution:
a) Appuyez sur le bouton "X" dans le contrôle InUT pour permettre au navigateur de déclencher un événement Keydown;
b) La directive d'entrée capture le changement dans la valeur de la zone de texte, puis appelle $ applique ("name = 'x';"), mettant à jour le modèle appliqué dans le contexte d'exécution angulaire.
c) Angluar s'applique "name = 'x';" au modèle. (Le modèle a changé)
D) $ DIGEST LOOP START
E) $ Watch List détecte que la valeur du nom a été modifiée, puis analyse à nouveau l'expression {{nom}}, puis met à jour le dom.
f) Contexte d'exécution de sortie angulaire (angulaire), puis quitter l'événement Keydown et le contexte d'exécution JavaScript à leur tour;
g) Le navigateur redessine la vue et met à jour les caractères.
<! Doctype html> <html lang = "zh-cn" ng-app> <ead> <meta charset = "utf-8"> <itle> Bonjour kitty! </tapie> <style type = "text / css"> .ng-coak {affiche: aucun; } </ style> </ head> <body> <entrée ng-model = "name" /> <p> Bonjour {{name}}! </p> <script src = "../ angular-1.0.1.js" type = "text / javascript"> </ script> </ body> </html>4. Portée
La portée est chargée de détecter les changements dans le modèle et de servir de contexte d'exécution de l'expression. La portée est imbriquée dans une hiérarchie similaire à une structure DOM (comme nous l'avons appris précédemment, la division peut être liée au contrôleur). (Pour plus de détails, consultez la documentation de directive individuelle pour voir quelle directive créera une nouvelle portée)
L'exemple suivant montre que la valeur de l'expression "nom" est déterminée en fonction de la portée dont elle dépend (à laquelle elle appartient), et comprend également la recherche de valeur (similaire à la chaîne de portée JS, si vous ne l'avez pas, veuillez chercher mon père).
<! Doctype html> <html lang = "zh-cn" ng -pp> <ead> <meta charset = "utf-8"> <itle> scope </ title> <style type = "text / css"> .ng-coak {display: non; } </ style> </ head> <body> <div ng-controller = "CONTRILERA"> Bonjour {{nom}} !; </div> <div ng-controller = "ControllerB"> Bonjour {{nom}}!; <div ng-contrôleur = "ControperC"> Bonjour {{nom}}!; <div ng-contrôleur = "Controllerd"> Bonjour {{nom}}!; </ div> </ div> </ div> <script src = "../ angular-1.0.1.js" type = "text / javascript"> </ script> <script type = "text / javascript"> function Controllera ($ scope) {$ scope.name = 'kitty'; } fonction ControllerB ($ scope) {$ scope.name = 'lclao'; } Fonction ControperC ($ scope) {$ scope.name = 'Jeffrey'; } fonction Controllerd ($ scope) {} </cript> </ body> </html>5. Contrôleur
<! Doctype html> <html lang = "zh-cn" ng -pp> <adref> <meta charset = "utf-8"> <tight> Controller </ title> <style type = "text / css"> .ng-coak {display: non; } </ style> </ head> <body> <div ng-contrôleur = "CONTRILERA"> Bonjour {{nom}}! <Button ng-Click = "DOIT ()"> DOIT !! </ Button> </div> <Script Src = "../ Angular-1.0.1.js" Type = "Text / JavaScript"> </ Script> <Script Type = "Text / Javascript"> Function Controplemera ($ SCOPE) {$ SCOPE.NAME = 'KITTY'; $ scope.doin = function () {$ scope.name = "beau"; }; } </ script> </ body> </html>Le contrôleur est le code derrière la vue (-_-!). Sa responsabilité est de construire le modèle et de le pousser dans la vue via la fonction de rappel. La vue est la portée actuelle de la portée du modèle (HTML) (traduit un peu à peine ...). La portée est le lien qui dirige le modèle à la vue et envoie un événement au contrôleur.
Il est important de séparer le contrôleur de la vue car:
1.Controller est écrit en javascript. JavaScript est impératif. Une commande importante est un bon moyen de décrire le comportement d'une application. Les contrôleurs ne doivent contenir aucune information d'affichage (logique) (références DOM ou fragments HTML)
2.View Le modèle est écrit en HTML. HTML est déclaratif. Le déclaratif (HTML) est un bon moyen de décrire une interface utilisateur. Les vues ne doivent contenir aucun comportement.
3. Étant donné que le contrôleur ne sait pas à quelle vue il doit correspondre, un contrôleur peut (indirectement) utiliser plusieurs vues. Ceci est important pour la réchauffement (remplacer les skins?), D'autres vues spécifiques à l'appareil (telles que les téléphones mobiles et les ordinateurs de bureau) et la mesurabilité du code.
6. Modèle
Le modèle peut être compris comme un objet de données. Il est utilisé comme combinaison avec le modèle pour produire des vues. Afin d'écrire le modèle sur la vue, le modèle doit être référencé par Scope. Contrairement à de nombreux autres cadres, Angular n'a aucune restriction ni exigence sur le modèle. Il n'est pas nécessaire d'ajouter une classe supplémentaire, et vous n'avez pas besoin d'accéder ou de modifier le modèle via des méthodes privilégiées spéciales. Le type de données du modèle peut être un type primitif (chaîne, numéro ...), un objet de valeur clé ({a: 1, b: 2}), ou une fonction (fonction () {…}). Pour le dire simplement, le modèle angulaire doit être un objet JavaScript normal.
7. Voir
La vue est quelque chose que les utilisateurs peuvent voir. La vue est née dans le modèle. Il se combine avec le modèle et le rend finalement comme un DOM de navigateur. Angular prend une façon très différente de présenter la vue pour de nombreux autres systèmes de modèles.
Autres moteurs de modèle: de nombreux moteurs de modèle sont implémentés en créant des chaînes HTML avec des balises spéciales. Habituellement, ces balises de modèle détruisent la syntaxe HTML, ce qui signifie que le code ne peut pas être modifié via un éditeur HTML général (c'est ...). La chaîne de modèle est transmise dans le moteur de modèle et fusionné avec les données. Génère enfin une chaîne HTML. Ces chaînes sont généralement écrites dans le DOM dans .innerHTML, ce qui a incité le navigateur à rendre le contenu du modèle. Ce processus doit être répété encore et encore lorsque les données changent. La granularité du modèle est cohérente avec la granularité de la mise à jour DOM. La clé de ce grain est que le système de modèle traite les chaînes.
Angular: la différence entre les modèles angulaires est qu'il est basé sur DOM plutôt que basé sur une chaîne. Le modèle doit encore écrire des chaînes dans le HTML, mais c'est toujours HTML (pas en incorporant le modèle à l'intérieur). Le navigateur convertit HTML en DOM, puis DOM devient l'entrée du compilateur (moteur de modèle d'Angular). Le compilateur recherche à son tour des directives et des montres définies dans le modèle. Le résultat est une vue qui a été mise à jour tout le temps, et il n'est pas nécessaire de recouvrir le modèle et le modèle. Le modèle devient la seule source de vérité pour la vue.
8. Directives
La directive est un comportement (par exemple, dans l'exemple de l'article précédent "masquer et chercher") ou la conversion DOM (balises personnalisées, contenant un ensemble de DOMS), et placer son nom dans l'attribut, le nom de la balise et le nom de classe peuvent déclencher la directive. La directive vous permet d'étendre les balises HTML de manière déclarative.
Il y a encore quelques questions dans les exemples suivants. C'est ainsi que $ rendu déclenche @ _ @
<! Doctype html> <html lang = "zh-cn" ng-app = "mydirective"> <éadf> <meta charset = "utf-8"> <tlect> directive </tapie> <style type = "text / css"> .ng-cok {display: non; } </ style> </ head> <body ng-controller = "myctrl"> <div ng-model = "contenu" tentoditable = "true"> mon petit dada </div> <pre> ModelValue = {{contenu}} </ pre> <Button ng-Click = "reset ()"> réset (modifier le modèle) </ Button> src = "../ angular-1.0.1.js" type = "text / javascript"> </ script> <script type = "text / javascript"> angular.module ("mydirective", []) .directive ("ContentEditable", function () {return {require: 'ngmodel', link: function (scope, élément, élément, attr, ngmodel) {function " {ngmodel. $ setViewValue (élément.Text (); setVal ();9. Filtres
Les filtres jouent un rôle dans la conversion des données (formatage). Habituellement, ils sont liés à la région, et différentes régions peuvent avoir des formats de sortie différents. Ils suivent l'esprit des filtres UNIX avec une syntaxe similaire: | (tuyau)
<! Doctype html> <html lang = "zh-cn" ng-app> <éad> <meta charset = "utf-8"> <itle> filter </ title> <style type = "text / css"> .ng-coak {display: non; } </ style> </ head> <body> <div ng-init = "list = ['baidu b', 'sogou s', '360', '3SB']"> Numéro Formatting: 1233211234567 -> {{{1233211234567 | Number}} <br/> Filter des tableaux, et ensuite la sortie par JSON Format: <boutr/Br/> Filter des tableaux,, et ensuite la sortie par JSON Format: <pouture ng-model = "myFilterText" type = "text" /> <br/> {{list | filter: myFilterText | json}} <br/> </ div> <script src = "../ angular-1.0.1.js" type = "text / javascript"> </script> </ body> </html>10. Modules et l'injecteur
L'injecteur est un localisateur de service. Chaque application angulaire aura un injecteur séparé. L'injecteur fournit un moyen de trouver des instances d'objet par son nom. L'injecteur conservera toutes les instances d'objet dans le cache interne, donc lorsque le même nom est appelé à plusieurs reprises, la même instance d'objet est renvoyée. Si l'objet n'existe pas, il demandera à l'usine d'instance de créer une nouvelle instance.
Le module est une méthode de configuration d'une usine d'instance d'un injecteur, appelé "fournisseur".
// Créer un module var mymodule = angular.module ('mymodule', []) // Configurez l'injecteur mymodule.factory ('Servicea', function () {return {// au lieu de {}, mettez votre création d'objet ici};}); // Créez un injecteur et configurez-le à partir de 'myModule' var $ injector = angular.injector ('mymodule'); // Récupérer un objet de l'injecteur par nom var Servecia = $ inject.get ('Servicea'); // toujours vrai à cause de l'instance cache $ inject.get ('Servicea') === $ injector.get ('Servicea'); // vraiMais le véritable X cool de l'injecteur est qu'il peut être utilisé pour appeler des méthodes et un type "instancier". Cette merveilleuse fonctionnalité est qu'elle permet aux méthodes et aux types de demander les ressources sur lesquelles ils dépendent, plutôt que de les rechercher.
// vous écrivez des fonctions comme celle-ci. Fonction Dosomething (Servicea, ServiceB) {// Faites quelque chose ici. } // Angular fournit l'injecteur de votre application var $ injecteur = ...; ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Appelez la fonction Dosomething (Servicea, ServiceB); // Ce qui précède est l'ancienne méthode traditionnelle ~ ce qui suit est la méthode de parler angulaire de sa propre vache X ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////DEBLE //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////DEBLE La façon cool d'obtenir des dépendances. // L'injecteur $ fournira les arguments à la fonction automatiquement $ inject.invoke (dosomething); // c'est ainsi que le framework appelle vos fonctionsNotez que la seule chose que nous devons écrire est notre fonction, et nous pouvons énumérer la ressource dont la méthode dépend dans les arguments de la fonction! Lorsque la fonction des appels angulaires, il utilisera la méthode "appel" pour remplir automatiquement les agruments de la fonction.
Notez comment les dépendances sont répertoriées dans le constructeur dans l'exemple ci-dessous. Lorsque le contrôleur NG instancie le contrôleur, les ressources de dépendance seront automatiquement fournies. Il n'est pas nécessaire de créer, de rechercher ou de créer des références d'injecteur aux ressources de dépendance de charge.
<! Doctype html> <html lang = "zh-cn" ng-app = "timeExample"> <éadf> <meta charset = "utf-8"> <itle> injector </ title> <style type = "text / css"> .ng-col-kak {display: non; } </ style> </ head> <body> <div ng-controller = "ClockCtrl"> Le temps actuel est: {{time.now}} </div> <script src = "../ angular-1.0.1.js" type = "text / javascrip []). factory ("myClock", function ($ timeout) {var time = {}; (function bick () {time.now = new Date (). toString (); $ timeout (tick, 1000);}) (); return time;}); / ** * * @param $ scope * @param myclock La dépendance myclock est automatiquement insérée ici! ! * @Constructor * / fonction horlogectrl ($ scope, myclock) {$ scope.time = myClock; } </ script> </ body> </html>11. Espace de noms angulaires
Pour éviter les conflits de noms, Angular ajoutera le préfixe $ au nom de l'objet. Veuillez ne pas utiliser $ Prefix dans votre code pour éviter les conflits. (-_- !!)
Ce qui précède est les informations sur les concepts angularjs. Nous continuerons à ajouter des articles pertinents à l'avenir. Merci pour votre soutien à ce site!