AngularJS

In diesem Artikel handelt es sich um die erste Version des Winkelgerüsts. Für Versionen 2 und später siehe Angular (Web Framework).
Angularjs
AngularJS logo.svg
Entwickler (en) Google
Erstveröffentlichung 20. Oktober 2010; Vor 11 Jahren[1]
Stabile Version
1.8.2[2] Edit this on Wikidata / 21. Oktober 2020; Vor 21 Monaten
Repository AngularJS -Repository
Geschrieben in JavaScript
Plattform JavaScript -Engine
Größe 167 KB Produktion
1,2 MB Entwicklung
Typ Web Framework
Lizenz MIT -Lizenz
Webseite Angularjs.org Edit this on Wikidata

Angularjs war ein JavaScript-basierend Open Source Frontend Web Framework Für die Entwicklung Einseitige Anwendungen. Es wurde hauptsächlich von unterhalten Google und eine Gemeinschaft von Einzelpersonen und Unternehmen. Ziel war es, sowohl die Entwicklung als auch die zu vereinfachen testen solcher Anwendungen durch Bereitstellung eines Frameworks für die client-Seite Model View Controller (MVC) und Modell -View -ViewModel (MVVM) Architekturen sowie Komponenten, die üblicherweise in verwendet werden Web Applikationen und Progressive Webanwendungen.

AngularJs wurde als Frontend der verwendet BEDEUTEN Stapel, das bestand aus MongoDB Datenbank, Express.js Web Application Server Framework, AngularJS selbst (oder Eckig), und Node.js Server -Laufzeitumgebung.

Ab dem 1. Januar 2022 aktualisiert Google AngularJS nicht mehr, um Sicherheit, Browserkompatibilität oder zu beheben oder JQuery Ausgaben.[3][4][5] Das Angular -Team empfiehlt ein Upgrade auf Angular (v2+) als der beste Weg nach vorne, aber sie boten auch einige andere Optionen.[6]

Überblick

Das AngularJS -Framework arbeitete, indem er zuerst das gelesen hat Hypertext -Markup -Sprache (HTML) Seite, auf der zusätzliche Benutzerdefinierter vorhanden waren HTML -Attribute in es eingebettet. Angular interpretierte diese Attribute als Richtlinien Um Eingaben oder Ausgabeteile der Seite an ein Modell zu binden, das durch Standard -JavaScript dargestellt wird Variablen. Die Werte dieser JavaScript -Variablen könnten manuell im Code eingestellt oder aus statischer oder dynamischer Abbildung abgerufen werden JSON Ressourcen.

AngularJs wurde auf dem Glauben aufgebaut, dass deklarative Programmierung sollte verwendet werden, um zu erstellen Benutzeroberflächen und verbinden Softwarekomponenten, während Imperative Programmierung war besser für die Definition der Anwendung geeignet Geschäftslogik.[7] Das Framework adaptierte und erweiterte herkömmliche HTML, um dynamischen Inhalt durch Zwei-Wege-Datenbindung darzustellen, die die automatische Synchronisation von Modellen und Ansichten ermöglichten. Infolge Dokumentobjektmodell (DOM) Manipulation mit dem Ziel, Testbarkeit und Leistung zu verbessern.

Die Designziele von AngularJS umfassten:

  • DOM -Manipulation aus Anwendungslogik. Die Schwierigkeit davon wird durch die Art und Weise, wie der Code strukturiert ist, dramatisch beeinflusst.
  • So grennen Sie die Client-Seite einer Anwendung von der Server-Seite. Dies ermöglicht die Entwicklung von Entwicklungsarbeiten parallel und ermöglicht die Wiederverwendung beider Seiten.
  • Bereitstellung von Struktur für den Weg zum Aufbau einer Anwendung: vom Entwerfen der Benutzeroberfläche über das Schreiben der Geschäftslogik bis zum Testen.

AngularJS implementierte das MVC -Muster für die trennen Präsentation, Daten und Logikkomponenten.[8] Verwendung Abhängigkeitsspritze, Angular traditionell mitgebracht Server-Seite Dienste wie Ansichtsabhängige Controller für clientseitige Webanwendungen. Infolgedessen könnte ein Großteil der Belastung des Servers reduziert werden.

Zielfernrohr

AngularJs verwendete den Begriff "Zielfernrohr" in einer Weise, die den Grundlagen der Informatik ähnelt.

Zielfernrohr in der Informatik beschreibt in dem Programm ein bestimmtes Bindung ist gültig. Das ECMA-262 Die Spezifikation definiert den Umfang als: eine lexikalische Umgebung, in der ein Funktionsobjekt in clientseitigen Webskripten ausgeführt wird;[9] Ähnlich wie der Umfang in definiert ist in Lambda -Kalkül.[10]

Als Teil der "MVC" -Scharchitektur bildet das Zielfernrohr das "Modell", und alle im Bereich definierten Variablen können durch die "Ansicht" sowie den "Controller" zugegriffen werden. Das Zielfernrohr verhält sich wie ein Kleber und bindet die "Ansicht" und den "Controller".

Bootstrap

Die von den AngularJs ausgeführte Aufgabe Bootstrapper trat in drei Phasen auf[11] Nachdem das DOM geladen wurde:

  1. Schaffung eines neuen Injektors
  2. Zusammenstellung der Richtlinien, die das DOM dekorieren
  3. Verknüpfung aller Richtlinien mit dem Umfang

Mit AngularJS-Richtlinien konnten der Entwickler benutzerdefinierte und wiederverwendbare HTML-ähnliche Elemente und Attribute angeben, die Datenbindungen und das Verhalten von Präsentationskomponenten definieren. Einige der am häufigsten verwendeten Richtlinien waren:

Ng-Animate
Ein Modul bietet Unterstützung für JavaScript-, CSS3 -Übergangs- und CSS3 -Keyframe -Animationshaken in vorhandenen Kern- und benutzerdefinierten Anweisungen.

Seit ng-* Attribute sind in HTML -Spezifikationen nicht gültig, Daten-ng-* kann auch als Präfix verwendet werden. Zum Beispiel beides ng-App und Daten-NG-App sind in AngularJs gültig.

ng-App
Deklariert das Wurzelelement einer AngularJS -Anwendung, unter der Richtlinien verwendet werden können, um Bindungen zu deklarieren und das Verhalten zu definieren.
Ng-Aria
Ein Modul zur Erhaltbarkeitsunterstützung von Common ARIA -Attribute.
Ng-Bind
Legt den Text eines DOM -Elements auf den Wert eines Ausdrucks fest. Zum Beispiel, Zeigt den Wert des Namens in dem Span -Element an. Jede Änderung des Variablennamens im Bereich der Anwendung spiegelt sofort im DOM wider.
NG-Klasse
Anwenden Sie eine Klasse bedingt an, abhängig vom Wert eines booleschen Ausdrucks.
ng-controller
Gibt eine JavaScript -Controller -Klasse an, die HTML -Ausdrücke bewertet.
Ng-wenn
Grundlegende Anweisungsrichtlinie, die das folgende Element instanziiert, wenn die Bedingungen wahr sind. Wenn die Bedingung falsch ist, wird das Element aus dem DOM entfernt. Wenn es wahr ist, wird ein Klon des kompilierten Elements erneut eingefügt.
ng-init
Einmal aufgerufen, wenn das Element initialisiert wird.
NG-Modell
Ähnlich zu Ng-Bindlegt aber eine Zwei-Wege-Datenbindung zwischen der Ansicht und dem Umfang her.
NG-Modell-Optionen
Bietet Tuning, wie Modellaktualisierungen durchgeführt werden.
NG-Wiederholung
Sofort pro Element ein Element aus einer Sammlung instanziieren.
ng-show & Ng-Hide
Ein Element bedingt zeigen oder ausblenden, abhängig vom Wert eines booleschen Ausdrucks. Show and Hide wird erreicht, indem der CSS -Display -Stil festgelegt wird.
ng-switch
Bedingt eine Vorlage aus einer Reihe von Auswahlmöglichkeiten instanziieren, abhängig vom Wert eines Auswahlausdrucks.
ng-view
Die Basirichtlinie für den Umgang mit Routen verantwortlich[12] Das löst JSON vor, bevor Vorlagen von bestimmten Controllern angetrieben werden.

Zwei-Wege-Datenbindung

AngularJS Zwei-Wege Datenbindung Hatte seine bemerkenswerteste Funktion, die den Server -Backend der Vorlagenverantwortung weitgehend erleichtert. Stattdessen wurden die Vorlagen in einfachem HTML gemäß den in einem im Modell definierten Bereich in einem Bereich gerendert. Das $ Scope Der Service in angular erkannten Änderungen am Modellabschnitt und modifizierte HTML -Ausdrücke in der Ansicht über einen Controller. Ebenso spiegelten sich alle Änderungen der Ansicht im Modell wider. Dies umgangen die Notwendigkeit, das DOM aktiv zu manipulieren und Bootstrapping und schnelle Prototyping von Webanwendungen zu fördern.[13] AngularJS erkannte Änderungen in den Modellen, indem die Stromwerte mit Werten verglichen wurden Ember.js und Backbone.js Das ausgelöste Zuhörer, wenn die Modellwerte geändert werden.[14]

$ watch
ist eine Winkelmethode für schmutzige Überprüfung. Jede in $ Scope zugewiesene Variable oder Ausdruck wird automatisch a eingerichtet $ watchexpression in Winkel. Deshalb zuweisen eine Variable zu $ Scope oder Verwenden von Direktiven wie NG-IF, NG-Show, NG-Repeat usw. Alle erstellen automatisch Uhren im Winkelbereich. Angular hält eine einfache Reihe von $$ Beobachter in dem $ Scope Objekte
Verschiedene Möglichkeiten, einen Beobachter in AngularJs zu definieren.
  • explizit $ ein Attribut auf $ Scope.
    $ scope. $ watch ('person.username', validateUnique);
  • Platzieren Sie eine Interpolation in Ihre Vorlage (ein Beobachter wird für Sie auf dem aktuellen $ Scope erstellt).
  • Fragen Sie eine Richtlinie wie z. NG-Modell Um den Beobachter für Sie zu definieren.
$ digest
ist Winkelmethode, die in häufigen Intervallen intern durch AngularJs aufgerufen wird. Im $ digest Methode, Winkel iteriert über alle $ Uhren in seinem Bereich/Kinderbereiche.
$ beantragen
ist eine Winkelmethode, die intern anruft $ digest. Diese Methode wird verwendet, wenn Sie Angular manuell mit der schmutzigen Überprüfung anfangen möchten (alle ausführen $ Uhren)
$ zerstören
ist sowohl eine Methode als auch ein Ereignis in AngularJs. $ destroy () Methode, entzieht einen Umfang und alle ihre Kinder von schmutziger Überprüfung. $ zerstören Das Ereignis wird von Angular aufgerufen, wenn ein $ Scope oder $ Controller zerstört wird.

Entwicklungsgeschichte

AngularJS wurde ursprünglich 2009 von Miško HEWERY entwickelt[15] bei Brat Tech LLC[16] Als Software hinter einem Online JSON Speicherdienst, der von der Megabyte für einfach zu erledigende Anwendungen für das Unternehmen bewertet worden wäre. Dieses Unternehmen befand sich in der Web -Domain "getangular.com".[16] und hatte ein paar Abonnenten, bevor die beiden beschlossen, die Geschäftsidee aufzugeben und Angular als Open-Source-Bibliothek freizugeben.

Die 1.6 -Version fügte viele der Konzepte von hinzu Eckig an AngularJs, einschließlich des Konzepts einer Komponenten-basierten Anwendungsarchitektur.[17] Diese Veröffentlichung entfernte unter anderem die Sandbox, von der viele Entwickler glaubten, dass sie zusätzliche Sicherheit bieten, trotz zahlreicher Schwachstellen, die entdeckt wurden, die die Sandbox umgehen.[18] Die aktuelle (ab März 2020) stabile Freisetzung von AngularJS beträgt 1,7,9[19]

Im Januar 2018 wurde ein Zeitplan für Phasing-out AngularJs angekündigt: Nach der Veröffentlichung von 1.7,0 wurde die aktive Entwicklung von AngularJs bis zum 30. Juni 2018 fortgesetzt. Danach wurde 1.7 bis zum 31. Dezember 2021 als unterstützt Langzeitunterstützung.[4][5]

Legacy Browser -Unterstützung

Versionen 1.3 und später von AngularJs unterstützten nicht Internet Explorer 8 oder früher. Während AngularJS 1.2 IE8 unterstützte, tut es das Team nicht.[20][21]

Winkel und Angulardart

Nachfolgende Versionen von AngularJs werden einfach genannt Eckig.[22] Angular ist einkompatibel Typoskript-Basierte Umschreiben von AngularJs. Angular 4 wurde am 13. Dezember 2016 angekündigt und 3 übersprungen, um eine Verwirrung aufgrund der Fehlausrichtung der Version des Routerpakets zu vermeiden, die bereits als V3.3.0 verteilt wurde.[23]

Angulardart arbeitet weiter Pfeil, was ist ein objektorientierter, Klasse definiert, Einzelvererbung Programmiersprache Verwenden C Stil Syntax, das unterscheidet sich von angularer JS (der verwendet JavaScript) und Winkel 2/ Winkel 4 (die verwendet Typoskript). Angular 4 wurde im März 2017 veröffentlicht, wobei die Version des Frameworks mit der Versionsnummer des verwendeten Routers ausgerichtet ist. Angular 5 wurde am 1. November 2017 veröffentlicht.[24] Zu den wichtigsten Verbesserungen bei Angular 5 gehören die Unterstützung für progressive Web -Apps, einen Build -Optimierer und Verbesserungen im Zusammenhang mit dem Materialdesign.[25] Angular 6 wurde am 3. Mai 2018 veröffentlicht,[26] Angular 7 wurde am 18. Oktober 2018 veröffentlicht und Angular 8 wurde am 28. Mai 2019 veröffentlicht. Angular folgt den semantischen Versionsstandards, wobei jede Hauptversionsnummer potenziell brechende Änderungen anzeigt. Angular hat sich verpflichtet, für jede Hauptversion 6 Monate aktiver Unterstützung zu bieten, gefolgt von 12 Monaten langfristiger Unterstützung. Die Hauptveröffentlichungen sind mit 1 bis 3 geringfügigen Veröffentlichungen für jede größere Veröffentlichung bu.[27]

Angular Universal

Eine normale Winkelanwendung wird im Browser ausgeführt, während Angular Universal über serverseitige Rendering (SSR) statische Anwendungsseiten auf dem Server generiert.[28]

Veröffentlichungen

Ausführung Veröffentlichungsdatum Was gibt's Neues
Angular JS 1.x 2010-10-01
Winkel 2 2016-09-01 Mobilorientiert
Angular 3 Angular 3 wurde übersprungen
Angular 4 2017-03-01 Schnellere Zusammenstellung, bessere Fehlerbehebungen[29]
Angular 5 2017-11-01 Optimierer erstellen, Compiler -Verbesserungen[30]
Winkel 6 2018-05-01 CDK, CLI -Arbeitsbereiche, RXJS V6[31]
Winkel 7 2018-10-01 Virtuelle Scrollen, Drag & Drop[32]
Angular 8 2019-05-01 Builder -APIs in CLI, Support für Webarbeiter[33]
Angular 9 2020-02-01 Ivy Compiler, TypeScript 3.7 Support[34]
Winkel 10 2020-06-01 TypeScript 3.9, Tslib v2.0, Tslint v6[35]
Angular 11 2020-11-01 Automatische Schriftintrination, umstrukturierter HMR, Webpack 5[36]
Winkel 12 2021-05-01 Rückenwind -CSS, Nullish Coalscing, veraltete Unterstützung für IE 11[37]
Winkel 13 2021-11-01 Validatoren dynamisch aktivieren/deaktivieren, es ist einfach, dynamische Komponenten zu erstellen

Bibliotheken

AngularJS -Material

AngularJS -Material[38][39] war ein UI Komponentenbibliothek, die implementiert wurde Material Design in AngularJs.[40] Die Bibliothek lieferte eine Reihe wiederverwendbarer, gut getesteter und zugänglicher UI Komponenten. Im Januar 2022 wurde die Bibliothek geschlossen, wie auf ihrer offiziellen Website angekündigt.[41]

Chromverlängerung

Im Juli 2012 baute das Angular Team eine Erweiterung für die Google Chrome Browser namens Batarang,[42] Dies verbesserte das Debugging -Erlebnis für Webanwendungen, die mit Angular erstellt wurden. Die Erweiterung zielte darauf ab, eine einfache Erkennung von Leistungs Engpässen zu ermöglichen, und bot eine GUI für Debugging -Anwendungen an.[43] Für eine Zeit Ende 2014 und Anfang 2015 war die Erweiterung nicht mit den jüngsten Veröffentlichungen (nach v1.2.x) von Angular kompatibel.[44] Das letzte Update dieser Erweiterung war am 4. April 2017.

Leistung

AngularJs legten das Paradigma von a Verdauungszyklus. Dieser Zyklus könnte als Schleife angesehen werden, bei dem AngularJs überprüft wurden, wenn alle Variablen Änderungen vorhanden sind, die von allen beobachtet werden $ Scopes. Wenn $ scope.myvar ist in einem Controller definiert und diese Variable wurde zum Beobachten markiert. Angular überwacht die Änderungen in MyVar in jeder Schleifenersicht.

Dieser Ansatz führte möglicherweise zu einem langsamen Rendering, wenn AngularJs auf zu viele Variablen in der $ Scope Jeder Zyklus. Miško Heivery schlug vor, weniger als 2000 Beobachter auf jeder Seite zu halten.[14]

Siehe auch

Verweise

  1. ^ "Releases · Angular/Angular.js". GitHub. Abgerufen 9. April, 2021.
  2. ^ "Release 1.8.2". 21. Oktober 2020. Abgerufen 6. November 2020.
  3. ^ "AngularJs". docs.angularjs.org. Abgerufen 2021-05-14.
  4. ^ a b "AngularJs". docs.angularjs.org. Abgerufen 9. April, 2021.
  5. ^ a b Darwin, Pete Bacon (27. Juli 2020). "Stabile AngularJs und langfristige Unterstützung". Angular Blog. Abgerufen 9. April, 2021.
  6. ^ Techson, Mark (2. Februar 2021). "Einen Weg nach vorne mit AngularJs finden". Mittel. Abgerufen 9. April, 2021.
  7. ^ "Was ist eckig?". Abgerufen 12. Februar 2013.
  8. ^ "AngularJs". docs.angularjs.org. Abgerufen 9. April, 2021.
  9. ^ "Annotierter ECMascript 5.1, Abschnitt 10.2 Lexikalische Umgebungen". Abgerufen 2015-01-03.
  10. ^ Barendregt, Henk; Barendsen, Erik (März 2000), Einführung in den Lambda -Kalkül (PDF)
  11. ^ "Richtlinien schreiben". AngularJs.org. 28. November 2012. Abgerufen 2013-07-21.
  12. ^ "AngularJs". docs.angularjs.org. Abgerufen 9. April, 2021.
  13. ^ "5 fantastische AngularJs -Features". Abgerufen 13. Februar 2013.
  14. ^ a b Misko, Misko. "Datenbank in AngularJs". Abgerufen 2014-03-09.
  15. ^ "Hallo Welt, <Anglular/> ist hier". Abgerufen 2014-10-12.
  16. ^ a b "Getangular". Angular / Brat Tech. GMBH. Archiviert von das Original Am 2010-04-13. Abgerufen 2014-10-12.
  17. ^ "AngularJS: Entwicklerhandbuch für v1.5.8: Komponenten". Abgerufen 2017-09-26.
  18. ^ "Angular.js". GitHub. Abgerufen 2017-09-26.
  19. ^ "Release v1.7.9 · Angular/Angular.js". GitHub. Abgerufen 9. April, 2021.
  20. ^ "Kompatibilität" Internet Explorer "". Angular JS 1.7.7 Entwicklerhandbuch. Abgerufen 12. Februar 2019. AngularJS 1.3 hat die Unterstützung für IE8 fallen lassen. Lesen Sie mehr darüber in unserem Blog. AngularJS 1.2 wird weiterhin IE8 unterstützen, aber das Kernteam plant nicht, Zeit für Probleme zu verbringen, die spezifisch für IE8 oder früher sind.
  21. ^ Minar, Igor. "AngularJS 1.3: Eine neue Release -Ansätze". AngularJS -Blog. Archiviert von das Original Am 2014-10-13. Abgerufen 2014-10-12.
  22. ^ "Einführung in Angular". Abgerufen 2021-12-08.
  23. ^ "OK ... lassen Sie mich erklären: Es wird Angular 4.0 sein". AngularJs.blogspot.kr. Archiviert von das Original Am 2016-12-13. Abgerufen 2016-12-14.
  24. ^ Fluin, Stephen (26. April 2018). "Version 5.0.0 von Angular jetzt verfügbar". Mittel. Abgerufen 9. April, 2021.
  25. ^ Krill, Paul (18. September 2017). "AngularJS 5 JavaScript -Framework verzögert". InfoWorld. Abgerufen 9. April, 2021.
  26. ^ Fluin, Stephen (3. Mai 2018). "Version 6 von Angular jetzt verfügbar - Angular Blog". Angular Blog. Abgerufen 8. Juni 2018.
  27. ^ "Winkelversioning und Veröffentlichungen". Angular.io. Abgerufen 8. Juni 2018.
  28. ^ Pieszak, Mark (7. Januar 2020). "Angular Universal & Server-Side-Renderning Deep-Dive". Mittel. Abgerufen 9. April, 2021.
  29. ^ "Angular 4: Top -Funktionen, die Sie wissen müssen". Jaxenter. 2017-04-13. Abgerufen 2022-02-24.
  30. ^ Fluin, Stephen (2018-04-26). "Version 5.0.0 von Angular jetzt verfügbar". Mittel. Abgerufen 2022-02-24.
  31. ^ "Angular 6: Upgrade & Zusammenfassung neuer Funktionen | Digitalocean". www.digitalocean.com. Abgerufen 2022-02-24.
  32. ^ Fluin, Stephen (2018-10-18). "Version 7 von Angular - CLI -Eingabeaufforderungen, virtuelle Schriftrolle, Drag & Drop und mehr". Mittel. Abgerufen 2022-02-24.
  33. ^ "Was ist neu in Angular 8.0 und wie man auf Angular 8 upgrade". www.c-sharpcorner.com. Abgerufen 2022-02-24.
  34. ^ "Was ist neu in Angular 9 | Angular 9 Neue Merkmale". EDUREKA. 2020-02-14. Abgerufen 2022-02-24.
  35. ^ Krill, Paul (2020-09-08). "Was ist neu in Angular 10.1". InfoWorld. Abgerufen 2022-02-24.
  36. ^ Thompson (@marktechson), Mark (2020-12-04). "Version 11 von Angular jetzt verfügbar". Mittel. Abgerufen 2022-02-24.
  37. ^ Thompson (@marktechson), Mark (2021-06-16). "Angular V12 ist jetzt verfügbar". Mittel. Abgerufen 2022-02-24.
  38. ^ "Angular/Material (Github)". GitHub. Abgerufen 2020-12-24.
  39. ^ "AngularJS Materialdokumentation". Abgerufen 2020-12-24.
  40. ^ Kotaru, V. Keerti (2016-08-25). Implementierung des Materialdesigns mit AngularJS: UI -Komponenten -Framework. Apress. p. 4. ISBN 9781484221907.
  41. ^ "AngularJS -Material". Material.angularjs.org. Abgerufen 2022-05-04.
  42. ^ "Angular/AngularJS-Batarang (Github)". GitHub. Abgerufen 2014-10-12.
  43. ^ Ford, Brian. "Einführung des AngularJS Batarang". AngularJS -Blog. Archiviert von das Original Am 2014-10-13. Abgerufen 2014-10-12.
  44. ^ "Batarang -Chromverlängerung für AngularJs erscheint gebrochen".

Weitere Lektüre

Externe Links