AngularJS
Migracja do Angular 2+

Wprowadzenie

Przekształcanie aplikacji AngularJS w strukturę zorientowaną na komponenty

W nowym frameworku Angular komponenty są głównymi elementami składowymi tworzącymi interfejs użytkownika. Tak więc jednym z pierwszych kroków, który pomaga migrować aplikację AngularJS do nowej wersji Angular, jest przekształcenie jej w strukturę bardziej zorientowaną na komponenty.

Komponenty zostały również wprowadzone w starym AngularJS, począwszy od wersji 1.5+ . Korzystanie ze składników w aplikacji AngularJS nie tylko sprawi, że jego struktura będzie bliższa nowemu Angularowi 2+, ale także uczyni go bardziej modułowym i łatwiejszym w utrzymaniu.

Zanim przejdę dalej, polecam przejrzeć oficjalną stronę dokumentacji AngularJS dotyczącą Komponentów , gdzie ich zalety i zastosowanie są dobrze wyjaśnione.

Wolałbym wspomnieć o kilku poradach dotyczących konwertowania starego kodu zorientowanego na ng-controller na nowy styl zorientowany na component .

Zacznij dzielić swoją aplikację na komponenty

Wszystkie aplikacje zorientowane na komponenty mają zazwyczaj jeden lub kilka komponentów, które zawierają inne podkomponenty. Dlaczego więc nie stworzyć pierwszego komponentu, który po prostu będzie zawierał twoją aplikację (lub jej duży fragment)?

Załóżmy, że mamy przypisany do kontrolera fragment kodu o nazwie UserListController i chcemy utworzyć jego składnik, który UserListComponent .

aktualny HTML:

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

aktualny JavaScript:

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

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

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

    // ...
}

nowy HTML:

<user-list></user-list>

nowy JavaScript:

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

function UserListController(SomeService) {

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

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

    // ...
}

Zauważ, że nie wprowadzamy już $scope do funkcji kontrolera i teraz deklarujemy this.myUserList zamiast $scope.myUserList ;

nowy plik szablonu user-list.component.html :

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

Zwróć uwagę, jak mówimy teraz o zmiennej myUserList , która należy do kontrolera, używając $ctrl.myUserList z html zamiast $scope.myUserList .

Jest tak, ponieważ, jak zapewne zorientowałeś się po przeczytaniu dokumentacji, $ctrl w szablonie odnosi się teraz do funkcji kontrolera.

Co z kontrolerami i trasami?

Jeśli Twój kontroler był związany z szablonem za pomocą systemu routingu zamiast ng-controller , więc jeśli masz coś takiego:

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

możesz po prostu zmienić deklarację stanu na:

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

Co dalej?

Teraz, gdy masz komponent zawierający aplikację (bez względu na to, czy zawiera ona całą aplikację, czy jej część, np. Widok), powinieneś teraz zacząć dzielić swój komponent na wiele zagnieżdżonych komponentów, zawijając jego części w nowe podskładniki , i tak dalej.

Powinieneś zacząć korzystać z funkcji Component, takich jak

• Wejścia i wyjścia Wiązania

• haki cyklu życia, takie jak $onInit() , $onChanges() itp.)

Po zapoznaniu się z dokumentacją Element powinieneś już wiedzieć, jak korzystać z tych wszystkich elementów funkcji, ale jeśli potrzebujesz konkretny przykład prawdziwego prostej aplikacji, można sprawdzić to .

Ponadto, jeśli wewnątrz kontrolera komponentu masz kilka funkcji, które zawierają dużo kodu logicznego, dobrym pomysłem może być rozważenie przeniesienia tej logiki do usług .

Wniosek

Przyjęcie podejścia opartego na komponentach popycha twój AngularJS o krok bliżej do migracji do nowej frameworka Angular, ale czyni go również lepszym i znacznie bardziej modułowym.

Oczywiście istnieje wiele innych kroków, które możesz zrobić, aby przejść dalej w nowym kierunku Angular 2+, które wymienię w poniższych przykładach.

Przedstawiamy moduły Webpack i ES6

Korzystając z modułu ładującego, takiego jak Webpack , możemy skorzystać z wbudowanego systemu modułów dostępnego w ES6 (a także w TypeScript ). Następnie możemy użyć funkcji importu i eksportu, które pozwalają nam określić, jakie fragmenty kodu będziemy udostępniać między różnymi częściami aplikacji.

Kiedy następnie wprowadzamy nasze aplikacje do produkcji, moduły ładujące również ułatwiają pakowanie ich wszystkich w pakiety produkcyjne z dołączonymi bateriami.