AngularJS
Migration nach Angular 2+

Einführung

Umwandlung Ihrer AngularJS-App in eine komponentenorientierte Struktur

Im neuen Angular-Framework sind Komponenten die Hauptbausteine, aus denen die Benutzeroberfläche besteht. Einer der ersten Schritte, der eine Migration der AngularJS-App auf den neuen Angular ermöglicht, besteht darin, sie in eine komponentenorientiertere Struktur umzuwandeln.

Komponenten wurden auch in der alten AngularJS ab Version 1.5+ eingeführt . Durch die Verwendung von Komponenten in einer AngularJS-App wird die Struktur nicht nur dem neuen Angular 2+ angenähert, sondern auch modularer und einfacher zu warten.

Bevor Sie fortfahren, empfehle ich Ihnen, sich auf der offiziellen AngularJS-Dokumentationsseite über Komponenten zu informieren , wo ihre Vorteile und ihre Verwendung gut erklärt werden.

Ich möchte eher einige Tipps erwähnen, wie der alte ng-controller Code in den neuen component Stil konvertiert werden kann.

Brechen Sie Ihre App in Komponenten auf

Alle komponentenorientierten Apps haben normalerweise eine oder wenige Komponenten, die andere Unterkomponenten enthalten. Warum also nicht die erste Komponente erstellen, die einfach Ihre App (oder einen großen Teil davon) enthält.

Angenommen, wir haben einem Controller einen Code mit dem Namen UserListController , und wir möchten eine Komponente daraus UserListComponent , die wir UserListComponent .

aktuelles HTML:

<div ng-controller="UserListController as listctrl">
    <ul>
        <li ng-repeat="user in myUserList">
            {{ user }}
        </li>
    </ul>
</div>

aktuelles JavaScript:

app.controller("UserListController", function($scope, SomeService) {

    $scope.myUserList = ['Shin', 'Helias', 'Kalhac'];

    this.someFunction = function() {
        // ...
    }

    // ...
}

neues HTML:

<user-list></user-list>

neues JavaScript:

app.component("UserList", {
    templateUrl: 'user-list.html',
    controller: UserListController
});

function UserListController(SomeService) {

    this.myUserList = ['Shin', 'Helias', 'Kalhac'];

    this.someFunction = function() {
        // ...
    }

    // ...
}

Beachten Sie, wie wir $scope nicht mehr in die Controller-Funktion this.myUserList und deklarieren this.myUserList jetzt this.myUserList anstelle von $scope.myUserList .

neue Vorlagendatei user-list.component.html :

<ul>
    <li ng-repeat="user in $ctrl.myUserList">
        {{ user }}
    </li>
</ul>

Beachten Sie, wie wir uns jetzt auf die Variable myUserList , die zum Controller gehört, und $ctrl.myUserList aus dem HTML- $scope.myUserList anstelle von $scope.myUserList .

Wie Sie wahrscheinlich nach dem Lesen der Dokumentation herausgefunden haben, bezieht sich $ctrl in der Vorlage nun auf die Controller-Funktion.

Was ist mit Controllern und Routen?

Für den Fall, dass Ihr Controller über das Routing-System anstelle des ng-controller an die Vorlage gebunden war, sollten Sie also Folgendes haben:

$stateProvider
  .state('users', {
    url: '/users',
    templateUrl: 'user-list.html',
    controller: 'UserListController'
  })
  // ..

Sie können Ihre Staatserklärung einfach ändern in:

$stateProvider
    .state('users', {
      url: '/',
      template: '<user-list></user-list>'
    })
    // ..

Was kommt als nächstes?

Da Sie nun eine Komponente mit Ihrer App haben (unabhängig davon, ob die gesamte Anwendung oder ein Teil davon wie eine Ansicht enthalten ist), sollten Sie nun beginnen, Ihre Komponente in mehrere verschachtelte Komponenten zu unterteilen, indem Sie Teile davon in neue Unterkomponenten einbetten , und so weiter.

Sie sollten anfangen, die Komponentenfunktionen wie zu verwenden

• Inputs und Outputs- Bindungen

• Lebenszyklus-Hooks wie $onInit() , $onChanges() usw.

Nach dem Lesen Komponentendokumentation sollten Sie wissen bereits , wie alle diese Komponentenmerkmale verwenden, aber wenn Sie ein konkretes Beispiel für eine echte einfache Anwendung benötigen, können Sie überprüfen diese .

Wenn sich innerhalb des Controllers Ihrer Komponente einige Funktionen befinden, die viel Logikcode enthalten, kann es eine gute Idee sein, diese Logik in Dienste zu verschieben .

Fazit

Wenn Sie einen komponentenbasierten Ansatz wählen, wird Ihr AngularJS einen Schritt näher an das neue Angular-Framework heranrücken, es wird jedoch auch besser und viel modularer.

Natürlich gibt es noch viele weitere Schritte, um weiter in die neue Richtung von Angular 2+ zu gehen, die ich in den folgenden Beispielen aufführen werde.

Einführung in Webpack- und ES6-Module

Ein Modul - Lader wie durch die Verwendung Webpack können wir den Einbau-Modul - System in profitieren ES6 (wie auch in Typoskript). Wir können dann die Import- und Exportfunktionen verwenden , mit denen wir festlegen können, welche Codeteile wir für verschiedene Teile der Anwendung freigeben können.

Wenn wir dann unsere Anwendungen in die Produktion aufnehmen, erleichtern die Modulladegeräte das Zusammenfassen der Pakete in Produktionspakete inklusive Batterien.