AngularJs und Angular 2: Ein detaillierter Vergleich

Die Hauptunterschiede zwischen AngularJs und Winkel 2

Dieser Artikel vergleicht die Hauptunterschiede zwischen den AngularJs der ersten Generation und dem Angular 2. Wenn Sie derzeit ein AngularJS -Projekt verwenden und sich nicht sicher sind, ob Sie migrieren sollten, hilft Ihnen dieser Artikel beim Einstieg. In den letzten Jahren hat sich Angular schnell als Framework und Plattform für die Entwicklung von Einstellungsanwendungen (SPA) und progressiven Webanwendungen (PWA) entwickelt.

AngularJS ist das Konzept, Ansichten auf der Grundlage deklarativer Programmierung zu erstellen. Dies erfordert die Entkopplung von DOM -Operationen aus der Geschäftslogik der Anwendung, die an sich viele Vorteile hat. AngularJS hat jedoch viele Mängel in Bezug auf die Leistung und wie es unten funktioniert. Daher verbrachte das Entwicklungsteam ein Jahr damit, den Code von Grund auf neu zu schreiben, und veröffentlichte Ende 2016 Angular 2. Die meisten Entwickler betrachten Angular 2 als eine andere Plattform, die wenig Ähnlichkeit mit den ursprünglichen AngularJs hat. Vergleichen und vergleichen wir AngularJs und Angular 2.

Framework Architecture

AngularJS folgt der traditionellen Architektur MVC (Modell-View-Controller), einschließlich Modellen, Ansichten und Controllern:

• Controller: behandelt Benutzerinteraktion, Bindungsmodelle und Ansichten.
• Ansicht: repräsentiert die Präsentationsschicht und die tatsächliche Benutzeroberfläche.
• Modell: abstrakte Darstellung von Daten.

Einige Entwickler glauben, dass AngularJs dem MVVM -Muster folgt und den Controller durch ein View -Modell ersetzt. Das Ansichtsmodell ist eine JavaScript -Funktion, die einem Controller ähnelt. Was es besonders macht, ist, dass es die Daten zwischen der Ansicht und dem Modell synchronisiert. Änderungen an UI -Elementen werden automatisch an das Modell ausgebildet und umgekehrt. Die folgende Abbildung zeigt, wie verschiedene AngularJS -Komponenten miteinander verbunden sind.

Angular verwendet eine Komponentenbasis-Architektur. Jede Winkelanwendung hat mindestens eine Komponente, die als Wurzelkomponente bezeichnet wird. Jede Komponente verfügt über eine zugehörige Klasse, die die Geschäftslogik und eine Vorlage zur Darstellung der Ansichtsschicht übernimmt. Mehrere eng verwandte Komponenten können zusammengestapelt werden, um Module zu erstellen, wobei jedes Modul selbst eine Funktionseinheit bildet.

Wie Sie in der Abbildung sehen können, ist die Komponente an die Vorlage gebunden. Komponenten werden mithilfe von TypeScript -Klassen komponiert und Vorlagen mit @Component Annotation anhängen. Dienste können mit dem Abhängigkeitsinjektionssubsystem von Angular in Komponenten injiziert werden. Das Modulkonzept in Angular unterscheidet sich stark vom AngularJS -Modul. Ngmodule ist ein Behälter, der funktionale Einheiten definiert. Ngmodule kann Komponenten, Dienste und andere Funktionen enthalten. Moduleinheiten können dann importiert und mit anderen Modulen verwendet werden.

Vorlage

In AngularJs sind Vorlagen in HTML geschrieben. Um es dynamisch zu machen, können Sie AngularJS-spezifischen Code wie Eigenschaften, Tags, Filter und Formularsteuerungen hinzufügen. Darüber hinaus unterstützt es die oben genannte Zwei-Wege-Datenbindungstechnologie. Der folgende Code -Snippet zeigt die Verwendung von Richtlinien und Doppelklammern in einer Vorlage:

<code class="language-html"><div ng-app>
  <div ng-controller="MyController">
    <input ng-model="foo" value="bar">
    <button ng-click="changeFoo()">{{buttonText}}</button>
  </div>
  
</div></code>

In Angular wurde die Vorlagenstruktur von AngularJs verbessert und der Vorlage wurden viele neue Funktionen hinzugefügt. Der Hauptunterschied besteht darin, dass jede Komponente über eine Vorlage angehängt ist. Alle HTML -Elemente funktionieren in der Vorlage außer <script></script>, <style></style>, <base> und <title></title>. Darüber hinaus gibt es Funktionen wie Vorlagenbindung, Vorlageninterpolation, Vorlagenanweisungen, Attributbindung, Ereignisbindung und Zwei-Wege-Bindung. Eingebaute Attributanweisungen (wie NGCLASS, NGSTYLE und NGMODEL) und eingebaute Strukturanweisungen (wie NGIF, NGFOROF, NGSWITCH) sind ebenfalls Teil der Vorlage.

Abhängigkeitsinjektion

Abhängigkeitsinjektion ist ein Entwurfsmuster, das für die Befriedigung von Abhängigkeiten und die Injektion von Komponenten bei Bedarf verantwortlich ist. Dies vermeidet die Notwendigkeit, Abhängigkeiten in Komponenten zu harten. AngularJS verfügt über ein Injektorsubsystem, das für die Erstellung von Komponenten, die Injektion von Abhängigkeiten und das Parsen einer Liste aller Abhängigkeiten verantwortlich ist. Die folgenden Komponenten können nach Bedarf injiziert werden:

• Wert
• fabrik
• Service
• Anbieter
• konstant

Dienste, Anweisungen und Filter können mit Fabrikmethoden injiziert werden. Hier ist ein Beispiel für eine Fabrikmethode. Die Werksmethode ist mit einem Modul namens MyModule registriert:

<code class="language-javascript">angular.module('myModule', [])
.factory('serviceId', ['depService', function(depService) {
  // ...
}])
.directive('directiveName', ['depService', function(depService) {
  // ...
}])
.filter('filterName', ['depService', function(depService) {
  // ...
}]);</code>

Obwohl die Methode gleich bleibt, hat Angular ein neues Abhängigkeitsinjektionssystem, das sich vom alten DI -Modus unterscheidet. Die Abhängigkeitsinjektion von Angular wird durch eine Reihe von @ngmodule verwaltet, die Anbieter und Erklärungen enthält. Das Erklärungsarray ist der Raum, um Komponenten und Anweisungen zu deklarieren. Abhängigkeiten und Dienste werden über den Anbieter -Array registriert.

Angenommen, Sie haben einen Dienst, der eine Kontaktliste namens ContactListservice abgerufen und der Kontaktlistenkomponente zur Verfügung stellt. Sie müssen zunächst den ContactListservice im app.module.ts -Array in providers registrieren. Als nächstes müssen Sie den Dienst wie folgt in die Komponente einbringen:

<code class="language-typescript">import { Component }   from '@angular/core';
import { Contact }        from './contact';
import { ContactListService } from './contactlist.service';

@Component({
  selector: 'app-contacts-list',
  template: `
    <div contact of contacts>
      {{contact.id}} - {{contact.name}} - {{contact.number}}
    </div>
  `
})
export class ContactListComponent {
  contacts: Contact[];

  constructor(contactlistService: ContactListService) {
    this.contacts = contactlistService.getcontacts();
  }
}</code>

Hier geben wir Angular an, Dienste in den Konstruktor der Komponente zu injizieren.

JavaScript vs typecript

AngularJS ist ein reines JavaScript -Framework. Dies erleichtert den gesamten Projekt -Setup -Prozess erheblich. Jeder Entwickler mit einer grundlegenden JavaScript -Erfahrung kann das Framework verwenden. Aus diesem Grund ist die Lernkurve von Angular 1.0 im Vergleich zu anderen Front-End-Frameworks sehr glatt.

Angular 2 führt TypeScript als Standardsprache für das Erstellen von Anwendungen ein. TypeScript ist ein Syntax -Superset von JavaScript, das in gewöhnlichem JavaScript zusammengestellt ist. Das Angular -Team hat aufgrund der Typ -Annotation -Funktion über JavaScript über JavaScript ausgewählt, mit dem Sie eine optionale statische Überprüfung durchführen können. Das Typ-Checking verhindert, dass Kompilierungs-Zeit-Fehler in Ihren Code schleichen, der ansonsten möglicherweise ignoriert wird. Dies macht Ihren JavaScript -Code vorhersehbarer.

Darüber hinaus ist TypeScript auch für seine Klassen, Schnittstellen und Dekorateure (Klassendekoratoren, Attributdekoratoren und Parameterdekoratoren) beliebt. Angular verwendet die TypsScript -Klasse, um Komponenten zu definieren. @Component ist ein beliebtes Beispiel dafür, wie Metadaten mit einem Klassendekorator an einer Komponente angehängt werden. Dies umfasst dies in der Regel Komponentenkonfigurationsdetails wie Template -Selector -Tags, Vorlagen- und Anbieter -Arrays, damit Sie alle zugehörigen Abhängigkeiten in die Komponente injizieren können:

<code class="language-html"><div ng-app>
  <div ng-controller="MyController">
    <input ng-model="foo" value="bar">
    <button ng-click="changeFoo()">{{buttonText}}</button>
  </div>
  
</div></code>

Tool -Support

Bessere Tool -Support hilft Entwicklern, die Dinge schneller aufzubauen und sie zum allgemeinen Entwicklungs -Workflow hinzuzufügen. Die Befehlszeilenschnittstelle (CLI) kann beispielsweise die Zeit reduzieren, die für die Erstellung einer Anwendung von Grund auf neu erstellt werden kann. In ähnlicher Weise gibt es andere Tools wie IDE, Texteditor, Testkit usw., mit denen Sie die Entwicklung erleichtern können.

AngularJS hat keine offizielle CLI, aber es stehen viele Generatoren und Werkzeuge von Drittanbietern zur Verfügung. Für IDE sind Webstorm und Aptana unter den Entwicklern eine beliebte Wahl. Wenn Sie wie ich sind, können Sie einen normalen Texteditor wie Submlime -Texteditor anpassen und das richtige Plugin hinzufügen. AngularJS hat eine Browser-Erweiterung für das Debuggen und Tests namens NG-Inspektor. Die AngularJS-Struktur ermöglicht die Zugänglichkeit zu Modulen von Drittanbietern. Sie finden alle beliebten NG -Module auf ngmodules.org, einem Open -Source -Projekt zum Hosting von AngularJS -Modulen.

Angular hat mehr Werkzeugunterstützung als AngularJs. Es gibt eine offizielle CLI, mit der Sie neue Projekte initialisieren, dienen und optimierte Pakete für die Produktion erstellen können. Weitere Informationen können die Winkel -CLI auf Github lesen. Da Angular TypeScript anstelle von JavaScript verwendet, wird Visual Studio als IDE unterstützt. Das ist noch nicht alles. Es gibt auch viele IDE-Plug-Ins und eigenständige Tools, mit denen Sie bestimmte Aspekte Ihres Entwicklungszyklus automatisieren und beschleunigen können. Augury für Debugging, NGREV für die Codeanalyse, codelyzer für die Codeüberprüfung usw. sind alle sehr nützlichen Tools.

Zusammenfassung

AngularJS hat viele Fehler-meist leistungsbezogen-, aber früher war es die Auswahl für schnelle Prototypen. Es ist jedoch keinen Sinn, jetzt zu AngularJs zurückzukehren oder das AngularJS -Projekt beizubehalten. Wenn Sie noch nicht migriert haben, sollten Sie dies in Betracht ziehen.

In diesem Artikel stellen wir die fünf Hauptunterschiede zwischen AngularJs und Angular 2 ein. Fast alles außer der Templatstruktur und Abhängigkeitsinjektionsmethoden wurden verbessert. Viele beliebte Angular 1.0 -Merkmale wie Controller, Bereiche, Anweisungen, Moduldefinitionen usw. wurden durch andere Alternativen ersetzt. Darüber hinaus wurde die zugrunde liegende Sprache geändert und die Struktur geändert.

AngularJs und Winkel -FAQs (FAQs)

(Der FAQ-Teil ist unten weggelassen, da es zu lang ist und nicht mit den pseudooriginalen Anforderungen überein .)

Das obige ist der detaillierte Inhalt vonAngularJs und Angular 2: Ein detaillierter Vergleich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!