WikiDer > AngularJS

AngularJS
Entwickler	Brat Tech LLC, Google und kollektiv.
Letzte Version	1.8.2 die Info  (21. Oktober 2020)
Status	Aktiv
Betriebssystem	Multiplattform
Geschrieben in	Javascript
Kategorie	JavaScript-Framework
Lizenz	MIT-Lizenz
Versionskontrolle	github.com
Webseite	(und) Projektseite
Portal    Informatik Gratis Software

AngularJS, neueste Version heißt Eckig, ist ein Open SourceInternetanwendungRahmen die gepflegt wird von Google und ein Kollektiv von einzelnen Entwicklern und Unternehmen, die die Entwicklungsmöglichkeiten erkunden Einseitige Anwendungen (SPA) zu verbessern. Das Ziel ist es, sowohl die Entwicklung wenn es zu testen solcher Anwendungen durch die Bereitstellung eines Rahmens für KundenseiteModel View Controller (MVC)-Architektur, zusammen mit Komponenten, die häufig in Rich-Internet-Anwendungen.

Das Framework funktioniert von first de HTMLSeite, die zusätzliche HTML-spezifische Attribute enthält. Diese Attribute werden interpretiert als Richtlinien (Deutsch: Richtlinien)^[1] die dazu führen, dass Angular Eingabe- oder Ausgabekomponenten der Seite einem standardmäßig dargestellten Modell zuordnet JavascriptVariablen. Die Werte dieser JavaScript-Variablen können im Code festgelegt oder aus statischen oder dynamischen abgerufen werden JSON-Datenobjekte.

Die Architektur

Design-Prinzipien

Angular wurde auf der Grundlage gebaut, dass deklarative Programmierung sollte zum Bauen verwendet werden Benutzeroberflächen und verlinken Softwarekomponenten, während zwingende Programmierung besser geeignet, um Geschäftslogik zu definieren.^[2] Das Framework verwendet traditionelles HTML und erweitert es um dynamische Inhalte (Englisch: Inhalt) zur Darstellung mittels Zweiwege-Datenkopplung (Englisch: Zwei-Wege-Datenbindung), die eine automatische Synchronisierung von Modellen und Ansichten ermöglicht. Dadurch entfällt mit Angular die Notwendigkeit, Dokumentobjektmodell (DOM) sinkt, mit dem Ziel, die Testbarkeit und Performance zu erhöhen (de Performance) verbessern.

Zu den Designzielen von Angular gehören:

• Entkoppeln Sie die Manipulation des DOM von der Anwendungslogik. Dies verbessert die Testbarkeit der Programmcode.
• Gehen Sie davon aus, dass das Testen der Anwendung genauso wichtig ist wie die Entwicklung. Die Testbarkeit wird stark von der Struktur des Codes beeinflusst.
• Steck es aus Klient-Teil einer Bewerbung des Server-Teil. Dies ermöglicht eine parallele Durchführung der Entwicklungsarbeit und eine beidseitige Wiederverwendung der Software.
• Stellen Sie eine Struktur für den gesamten Prozess des Erstellens einer Anwendung bereit: Entwerfen der Benutzeroberfläche, Schreiben der Geschäftslogik und Testen.

Angular implementiert das Model-View-Controller-Modell Designmuster Datenmodell (Model), Datenpräsentation (View) und Anwendungslogik (Controller) zu trennen. Unter Verwendung von Abhängigkeitsspritze Angular bringt Dienstleistungen traditionell in die Serverseite wurden wie ansichtsabhängige Controller implementiert, um die Kundenseite der Webanwendung. Dadurch wird ein Teil der Last vom Server genommen.

Starten (Englisch: Bootstrapping)

Die Aufgaben der Angular Bootstrapper^[3] werden nach dem Laden des DOM in drei Stufen ausgeführt:

1. Laden der Methode, die mit dem verknüpft ist ng App-Richtlinie
2. Erstellung eines neuen Injektor
3. Zusammenstellung der Richtlinien, die den dynamischen Teil des DOM . bilden

Zwei-Wege-Datenverbindung

Die bidirektionale Datenkopplung ist eine der bemerkenswertesten Eigenschaften von Angular.^[4] Diese Funktion reduziert die Codemenge, da der Backend-Server nicht mehr für das Ausfüllen von Vorlagen verantwortlich ist. Stattdessen werden Vorlagen in einfachem HTML erstellt, wobei die Daten in a . gespeichert sind Umfang^[5] im Modell definiert. EIN Umfang in Angular ist ein Objekt, das auf das Anwendungsmodell verweist. Es ist eine Umgebung (Englisch: Kontext) innerhalb welcher Ausdrücke ausgeführt werden kann. Bereiche sind in einer hierarchischen Struktur organisiert, die die DOM-Struktur der Anwendung nachahmt. Das $Scopeservice in Angular erkennt Änderungen im Modellbereich und aktualisiert HTML-Ausdrücke in der Ansicht über a Regler. Außerdem werden alle Änderungen in der Ansicht im Modell widergespiegelt. Dadurch ist eine aktive Manipulation des DOM nicht mehr erforderlich und dies fördert eine schnelle Entwicklung von Prototypen von Webanwendungen^[6].Angular entdeckt Änderungen in Modellen, indem es Werte mit zuvor gespeicherten Werten in einem Prozess vergleicht, der schmutzige Überprüfung wird genannt^[7]. Dies steht im Gegensatz zu ember.js und backbone.js, die beim Ändern von Werten im Modell verwendet werden Zuhörer, Software, die auf bestimmte Ereignisse reagiert (Englisch: Veranstaltungen) wie Benutzeraktionen.

Wichtige Richtlinien

Angular-Direktiven sind Markierungen für ein DOM-Element (wie ein Attribut, ein Elementname, ein Kommentar oder eine CSS-Klasse), die bewirken, dass der HTML-Compiler von Angular diesem DOM-Element ein bestimmtes Verhalten zuordnet. Angular enthält eine Reihe von integrierten Direktiven, Entwickler können jedoch auch selbst benutzerdefinierte Direktiven erstellen. Einige der am häufigsten verwendeten Standardrichtlinien sind:

ng App

erklärt es Wurzelelement (das höchste Element in der Struktur) einer Angular-Anwendung, unter der Direktiven verwendet werden können, um Datenlinks zu deklarieren und Verhalten zu definieren.

ng-bind

setzt den Text eines DOM-Elements auf den Wert von a Ausdruck. <span ng-bind="naam"></span> zeigt beispielsweise den Wert der Variablen 'name' im Span-Element an. Alle Änderungen an der Variablen 'name' im Geltungsbereich der Anwendung werden sofort im DOM widergespiegelt.

ng-Modell

ähnlich wie ng-bind, aber diese Direktive entwickelt eine bidirektionale Datenverbindung zwischen der Ansicht und dem Scope.

ng-Modell-Optionen

ermöglicht Ihnen festzulegen, wie Änderungen am Modell vorgenommen werden.

ng klasse

macht es möglich C.S.SKlassenattribute dynamisch mit einem HTML-Element verknüpfen. Dies geschieht über einen Datenlink eines Ausdrucks, der die hinzuzufügenden CSS-Klassen repräsentiert.

ng-Controller

fügt der Ansicht eine JavaScript-Controller-Klasse hinzu. Dies ist ein entscheidender Teil der Implementierung des Model-View-Controller-Entwurfsmusters durch Angular. Controller-Klassen enthalten die Geschäftslogik hinter der Anwendung, sie stellen den Umfang mit Funktionen und Werten zur Verfügung.

ng wiederholen

ein Element einmal pro Element aus einer Sammlung instanziieren.

ng-anzeigen & ng-ausblenden

zeigt oder verbirgt ein Element basierend auf einer Bedingung, abhängig vom Wert von a booleschAusdruck. Das Ein- und Ausblenden erfolgt durch Einstellen der C.S.SPräsentationsstil.

ng schalter

Instanziieren einer Vorlage aus einer Reihe von Auswahlmöglichkeiten basierend auf einer Bedingung, abhängig vom Wert eines Ausdrucks.

ng Ansicht

die für die Handhabung verantwortliche Richtlinie Routen die gekennzeichnet sind durch indicated URLs. Durch das Definieren von Routen werden Vorlagen angezeigt, die von bestimmten Controllern gesteuert werden.

ng-wenn

Diese Direktive entfernt einen Teil des DOM oder zeigt ihn neu an, basierend auf einem Ausdruck, der den Wert enthält wahr ('wahr oder falsch ('false') annehmen kann. Wenn der Ausdruck falsch , wird das Element aus dem DOM entfernt. Wenn der Ausdruck wahr ist, wird eine Instanz des Elements (wieder) eingefügt.

Chrome-Plug-in

Im Juli 2012 baute das Angular-Team ein Plugin für die Google ChromeBrowser namens Batarang^[8], die beim Debuggen hilft (debuggen) in Webanwendungen, die mit Angular erstellt wurden. Dieses Plugin hilft, Leistungsprobleme schnell zu entdecken, und es enthält a grafische Benutzeroberfläche zum Debuggen von Anwendungen.^[9] Es wurden Probleme mit Batarang in Kombination mit neueren Angular-Versionen (nach v1.2.x) gemeldet.^[10]

Unterstützung für ältere Browserversionen

Angular Release 1.2 und höher werden nicht unterstützt Internet Explorer Version 6 oder 7.^[11] Ab Angular Release 1.3 wurde die Unterstützung für Internet Explorer 8 eingestellt.^[12]

Geschichte

Angular wurde ursprünglich 2009 von Miško Hevery und Adam Abrons . entwickelt^[13] von der Firma Brat Tech LLC^[14] als Software hinter einem Online JSONSpeichergerät mit einem Preis pro Megabyte, um die Entwicklung von Anwendungen für das Unternehmen zu vereinfachen. Dieses Unternehmen befand sich auf der Web-Domain 'GetAngular.com' und hatte einige Abonnenten, bevor die beiden beschlossen, das Geschäftsmodell aufzugeben und Angular als Open-Source-Framework zu veröffentlichen.

Abrons hat das Projekt verlassen, aber Hevery, der bei . arbeitet Google, das Framework gemeinsam mit den Google-Mitarbeitern Igor Minár und Vojta Jína weiter entwickelt und gepflegt.^[15]

Angularjs-Veröffentlichungen

Die Releases 1.0.x, 1.2.x, 1.3.x, 1.4.x und 1.5.x sind die stabilen Versionen, während 1.1.x in einigen Subversionen Änderungen enthielt, die dazu führten, dass zuvor erstellte Software fehlschlug (sie enthalten "breaking changes").

Das Codenamen Stehen im Zusammenhang mit Superhelden, sie bestehen aus zwei Wörtern mit Bindestrich, die "nett / verrückt / cool" klingen sollten und öffentlich zur Abstimmung freigegeben werden.^[16]

Zukünftige Entwicklungen

Parallel dazu wird an drei neuen Versionen von Angular gearbeitet:

• Release 1.x.x, das auf der aktuellen Version aufbaut. Dieser Zweig heißt AngularJS.
• Das Release 2.0 soll eine Vielzahl von Verbesserungen bringen sowie Angular deutlich schneller und einfacher machen mit einem Ansatz, der durch inkrementelle Schritte auf Basis der 1.x-Releases nicht realisierbar ist.^[17]
• Angular 4 wurde am 13. Dezember 2016 angekündigt, Version 3 wird übersprungen, um Verwechslungen mit einem NPM-Paket zu vermeiden, das unter dem Namen v3.3.0 vertrieben wird.^[18] Version 4 ist abwärtskompatibel mit Angular 2.

Vergleich mit Backbone.js

Datenverbindung

Die bemerkenswerteste Funktion der Angular- und .-Frameworks backbone.js zeichnet sich durch die Art und Weise aus, in der Modelle und Ansichten synchronisiert werden. Während Angular die bidirektionale Datenverknüpfung unterstützt, verlässt sich Backbone.js stark auf duplizierten Code (Englisch: Boilerplate-Code), um seine Modelle und Ansichten auszurichten.^[19]

SICH AUSRUHEN

Backbone.js kommuniziert gut mit RUHIG Dienstleistungen in der Backend. Auch bei Angular ist die Anwendung von REST-APIs einfach möglich mit dem $Ressource-Bedienung. Angular hat auch a $httpDienst, der flexibler ist und Verbindungen zu entfernten Servern über a XMLHttpAnfrageObjekt aus dem Browser oder über JSONP-Code.

Vorlagen

Die Vorlagenanwendungsfunktionen von Angular verwenden eine Kombination aus anpassbaren HTML-Tags und Ausdrücken. Backbone.js kommt mit dem Vorlage()-Die Funktion von unterstrich.js und lässt sich auch in andere Templating-Software integrieren, wie z Schnurrbart.

Literatur

• (und) Grün, Brad; Shyam Seshadri, AngularJS. O'Reilly Media (April 2013), S. 196,. ISBN 978-1-4493-4485-6 .

• (und) Kozlowski, Pawel; Peter Darwin, Beherrschen der Webanwendungsentwicklung mit AngularJS. Packt Publishing Limited (April 2013), S. 372,. ISBN 978-1-7821-6182-0 .

• (und) Ford, Brian; Lukas Rübbelke, AngularJS in Aktion. Manning Publications (April 2015 (geplanter Termin)), S. 325,. ISBN 978-1-6172-9133-3 .

Siehe auch

• Client-Server-Modell
• HTML-Skripting
• Javascript
• Rich-Internet-Anwendung
• Serverseitiges Skripting
• Web Entwicklung

Externe Links

• (und) AngularJS-Projektseite
• (und) ng-conf - Angular-Konferenz in den USA
• (und) ng-europe - Winkelkonferenz in Europa
• (und) AngularJS-Modulbibliothek (archiviert)
• (und) Mit AngularJS erstellte Anwendungen (archiviert)
• (und) AngularJS in Google Groups
• (und) AngularJS bei Google (archiviert)
• (und) Batarang Chrome-Plugin auf Github Gi
• (und) NG-CONF 2014 Videos und Folien (archiviert)
• (und) NG-EUROPE 2014 Videos und Folien (archiviert)
• (und) AngularSpot, Kollektiv von AngularJS-Entwicklern (archiviert)
• (und) Vergleich von Anwendungsframeworks mit AngularJS sind gebaut (archiviert)
• (und) Videoschulung für AngularJS
• (und) AngularJS-Entwicklerblog

Siehe die Kategorie AngularJS von Wikimedia Commons für Mediendateien zu diesem Thema.