AngularJS
Migratie naar Angular 2+

Invoering

Uw AngularJS-app omzetten in een op componenten gebaseerde structuur

In het nieuwe Angular-framework zijn componenten de belangrijkste bouwstenen waaruit de gebruikersinterface bestaat. Een van de eerste stappen die een AngularJS-app helpt te migreren naar de nieuwe Angular, is dus om te transformeren naar een meer componentgerichte structuur.

Componenten werden ook geïntroduceerd in de oude AngularJS vanaf versie 1.5+ . Het gebruik van componenten in een AngularJS-app maakt de structuur niet alleen dichter bij de nieuwe Angular 2+, maar maakt deze ook modulair en gemakkelijker te onderhouden.

Voordat ik verder ga, raad ik aan om de officiële AngularJS-documentatiepagina over componenten te bekijken , waar hun voordelen en gebruik goed worden uitgelegd.

Ik zou liever enkele tips noemen over hoe de oude ng-controller georiënteerde code naar de nieuwe component stijl moet worden geconverteerd.

Begin met het opdelen van uw app in componenten

Alle componentgeoriënteerde apps hebben doorgaans een of enkele componenten die andere subcomponenten bevatten. Dus waarom maakt u niet het eerste onderdeel dat gewoon uw app (of een groot deel ervan) zal bevatten.

Stel dat we een stuk code hebben toegewezen aan een controller, genaamd UserListController , en dat we er een component van willen maken, die we UserListComponent zullen noemen.

huidige HTML:

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

huidige JavaScript:

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

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

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

    // ...
}

nieuwe HTML:

<user-list></user-list>

nieuw JavaScript:

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

function UserListController(SomeService) {

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

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

    // ...
}

Merk op hoe we $scope niet langer in de controllerfunctie injecteren en nu this.myUserList plaats van $scope.myUserList ;

nieuw sjabloonbestand user-list.component.html :

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

Merk op hoe we nu verwijzen naar de variabele myUserList , die bij de controller hoort, met behulp van $ctrl.myUserList uit de html in plaats van $scope.myUserList .

Dat komt omdat, zoals je waarschijnlijk hebt bedacht na het lezen van de documentatie, $ctrl in de sjabloon nu verwijst naar de controllerfunctie.

Hoe zit het met controllers en routes?

In het geval dat uw controller gebonden was aan de sjabloon met behulp van het routingsysteem in plaats van ng-controller , dus als u zoiets hebt:

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

u kunt uw staatsverklaring gewoon wijzigen in:

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

Wat is het volgende?

Nu u een component hebt die uw app bevat (of deze nu de hele applicatie of een deel ervan bevat, zoals een weergave), moet u nu beginnen om uw component in meerdere geneste componenten te splitsen, door delen ervan in nieuwe subcomponenten te verpakken , enzovoorts.

U zou de Component-functies zoals moeten gaan gebruiken

• Ingangen en uitgangen bindingen

• levenscyclushaken zoals $onInit() , $onChanges() , enz ...

Na het lezen van de componentdocumentatie zou je al moeten weten hoe je al die componentfuncties moet gebruiken, maar als je een concreet voorbeeld van een echte eenvoudige app nodig hebt, kun je dit controleren.

Ook als u in de controller van uw component een aantal functies heeft die veel logische code bevatten, kan een goed idee zijn om die logica naar services te verplaatsen.

Conclusie

Als u een componentgebaseerde aanpak kiest, komt uw AngularJS een stap dichter bij de migratie naar het nieuwe Angular-framework, maar wordt het ook beter en veel modulair.

Natuurlijk zijn er nog een heleboel andere stappen die je kunt doen om verder te gaan in de nieuwe Angular 2+ richting, die ik in de volgende voorbeelden zal noemen.

Introductie van Webpack- en ES6-modules

Door het gebruik van een module loader zoals Webpack kunnen we profiteren van de ingebouwde module systeem beschikbaar in ES6 (evenals de schrijfmachine). We kunnen dan de import- en exportfuncties gebruiken waarmee we kunnen specificeren welke stukjes code we gaan delen tussen verschillende delen van de applicatie.

Wanneer we onze applicaties vervolgens in productie nemen, maken module-laders het ook gemakkelijker om ze allemaal samen te verpakken in productiebundels met batterijen.