Wenn wir mit arbeiten AngularJS und wir beginnen die Dokumentation zu lesen, das erste, was wir sehen, ist das Wort UmfangDies könnte als Anwendungsbereich ins Spanische übersetzt werden, jedoch ist die Verwendung innerhalb dieses Rahmens viel breiter.
Deshalb müssen wir verstehen, dass es wirklich die Umfang und wie es sich in unseren Anwendungen verhält, auf diese Weise können wir einen Sprung zwischen dem Versuch machen, zu verwenden AngularJS und verwenden Sie es mit Basis, Überzeugung und nicht nur durch Wiederholen von Code.
Das Interessanteste ist, dass als AngularJS ist komplett eingebaut JavaScript, können wir die Konzepte der Sprache nehmen und sie beim Studium und Verstehen der Framework-Tools anwenden, wodurch wir ein zusätzliches Maß an Fähigkeiten erhalten, um die Logik zu entwickeln, die wir für unsere Anwendungen denken
Anforderungen
1- Um dieses Tutorial zu erfüllen, benötigen wir einen Webserver wie Wamp, oder wenn wir uns in Umgebungen wie . befinden Linux eine Konfiguration Lampe Es wird für uns ausreichen, die Idee ist, unsere Dateien bereitstellen zu können, die enthalten AngularJS und nicht nur ein Dokument öffnen HTML.
2- Wir müssen auch einen Rich-Text-Editor haben, der es uns ermöglicht, den notwendigen Code für unsere Beispiele zu schreiben, dies kann sein Erhabener Text oder Notizblock ++.
3- Schließlich müssen wir Zugang zum Internet haben, um die Einbindung von AngularJS über sein CDN zu verwenden, oder die Datei heruntergeladen haben, die das Framework enthält, um es lokal bereitzustellen.
Was ist der Umfang?
Es ist nichts anderes als ein einfaches Objekt JavaScript die die Fähigkeit hat, eine Schlüsselwertstruktur zu speichern, zusätzlich zu der Fähigkeit, Eigenschaften zu speichern. Das hilft uns sehr, denn wenn wir es so sehen, können wir die Grundkonzepte der Programmiersprache anwenden
Wie funktioniert es?AngularJS ist dafür verantwortlich, dieses Objekt automatisch zu erstellen und in unsere Anwendungsausführung einzubetten, daher ist sein Name scope, da es uns ermöglicht, die Werte der Modelle zu manipulieren und darauf zuzugreifen und auch als Schnittstelle zur Kommunikation mit der Ansicht zu dienen. Diese Struktur ermöglicht es uns, die Umfang in unseren Controllern und fügen Eigenschaften hinzu, die wir direkt in der Ansicht aufrufen können, und erfüllen somit einen Kreislauf, in dem alles innerhalb unserer Anwendung verbunden und verbunden ist.
Im folgenden Bild sehen wir, wie die Skala ist oder in welcher Weise AngularJS erzeugt anders Anwendungsbereiche, obwohl alle von Umfang des Elements, das sie enthält, außer dem Root-Bereich welches als erstes generiert wird. Wenn sich im Root-Bereich zwei Elemente auf derselben Ebene befinden, erben sie natürlich beide davon.
VERGRÖSSERN
Wie funktioniert der Prototyp?
Im Gegensatz zu Sprachen wie Java, C++ und andere, JavaScript geht anders mit dem Konzept der Vererbung um, deshalb müssen wir lernen, was es nützt Prototyp Das ist nichts anderes als eine Methode, die innerhalb von Klassenkonstruktoren existiert und es uns ermöglicht, unserem Code neue Eigenschaften hinzuzufügen.
Dies trotz der Tatsache, dass es etwas Typisches ist für JavaScript ermöglicht es uns, ein wenig mehr zu verstehen, wie wir einige Ergebnisse erzielen können, und hilft uns außerdem zu verstehen, wie die Umfang innerhalb AngularJS.
Im folgenden Beispiel sehen wir, wie wir eine Klasse mit bestimmten Eigenschaften oder Attributen erstellen und dann durch Prototyp Wir können unserer Klasse eine zusätzliche Eigenschaft hinzufügen und somit, indem wir die Instanz erstellen, darauf zugreifen.
Das Interessante ist, dass es eine Methode gibt, die uns hilft zu überprüfen, ob ein Attribut typisch für die Klasse ist. Wenn diese Methode einen falschen Wert zurückgibt, wissen wir, dass es sich um ein Attribut handelt, das aus einer Vererbung mit . resultiert Prototyp. Sehen wir uns den Code an, der all dies darstellt:
DokumentierenMal sehen, wie auf der Konsole JavaScript Wir erhalten die Ergebnisse, die wir suchen:
Wir bemerken dann, wie die Methode hasOWnProperty Es hilft uns, die ursprünglichen Attribute oder Eigenschaften der Klasse zu identifizieren oder nicht. Auf diese Weise können wir verstehen, ob wir eine effektive Vererbung erstellt haben oder nicht, da wir erkennen können, wie wir die Attributkapazität einer Klasse erweitern.
WichtigDiese Art der Vererbung durch Prototyp gilt AngularJS beim Erstellen der verschiedenen Anwendungsbereiche eines Dokuments in einer Anwendung, wo es sich durch den Baum bewegt SONNE wobei zuerst angibt, ob die Eigenschaft existiert ng-app, glaube in diesem Moment $ rootScope, dann erstellt das Finden eines Controllers eine Variable $ Umfang das ergibt sich aus der Anwendung der Methode $ rootScope.new().
Und so eskaliert es, wenn es interne Elemente ineinander findet, von der unmittelbar vorherigen Struktur erbt und seine Funktionalitäten davon ableitet $ rootScope und eigene Funktionalitäten.
Im folgenden Beispiel haben wir eine Anwendung entwickelt, in der wir zwei Controller haben, auf diese Weise sehen wir, wie durch die Vererbung von Umfang die verschiedenen Eigenschaften oder Attribute derselben werden vererbt, bis eine verschachtelte Struktur entsteht, die auf die Eigenschaften der Eltern zugreifen und die Funktionalitäten der Anwendung als solche erweitern kann. Sehen wir uns den Code an:
{{editors}} hat Bücher von: {{category}}
Die beliebtesten Bücher von {{editors}} sind:
- {{Buchen}}
Dies kann als etwas weit hergeholt angesehen werden, aber es ist der beste Weg, um zu verstehen, wie die Variable $ Umfang funktioniert in unseren Anwendungen und kann dies somit in unserer Logik anwenden, um das Beste aus den Framework-Tools herauszuholen. Sehen wir uns im folgenden Bild an, wie unsere vorherige Bewerbung aussieht und wie die erklärten Punkte erfüllt wurden:
Wir bemerken dann, wie die Bücherliste zum Objekt gehört Umfang interner, da wir jedoch das redaktionelle Attribut nicht definieren, können wir dasjenige verwenden, das wir im übergeordneten Controller definieren, und kommen zu dem Schluss, dass wir die Verwendung von erwartet haben Prototyp von AngulaJS.
Der Beobachter als fortschrittliches Konzept
Es gibt Zeiten, in denen wir fortfahren und eine bestimmte Situation auf irgendeine Weise überwachen möchten, hier kommt das Objekt ins Spiel. $ ansehen, die es uns ermöglicht, genau das zu tun, was wir erklären.
Wie funktioniert es?Durch Hinzufügen als Hörer eines Elements in unserer Anwendung wird dieses Objekt jedes Mal registriert, wenn es geändert wird. Auf diese Weise können wir jedes Mal Bedingungen anwenden, wenn ein von uns festgestelltes Ereignis eintritt. Ein Beispiel könnte sein, wenn wir einen Einkaufswagen erstellen, wenn der Benutzer mehr als einen Artikel hinzufügt, können wir eine Nachricht anzeigen, oder wenn er mehrmals versucht zu kaufen, fragen wir ihn, ob er ein Problem hat.
Dies mag auf den ersten Blick wie etwas sehr fortgeschritten erscheinen, aber AngularJS nimmt es in unsere Hände, ohne große Komplikationen zu verursachen. Das Objekt $ ansehen Es kann nicht nur einen bestimmten Wert beobachten, wir können ihm dies auch mit einer Sammlung zuordnen, was uns die Möglichkeit gibt, mehrere Werte gleichzeitig zu berücksichtigen und somit komplexere Ergebnisse zu erzielen als mit der vorherigen Form .
Damit sind wir mit diesem Tutorial fertig, wir haben gelernt zu verstehen, was die Umfang innerhalb AngularJS und dafür haben wir uns auf die abstraktesten Konzepte von . verlassen JavaScript, und zeigt damit, dass diese Sprache uns alle Werkzeuge zur Verfügung stellt, um so fortschrittliche Aufgaben zu erfüllen wie das gleiche Framework, über das wir sprechen, dass wir jedoch die von uns verwendeten Werkzeuge zu etwas Überlegenem machen können, wenn wir seine Konzepte beherrschen.
Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben
