AngularJS
Migration vers Angular 2+

Introduction

Conversion de votre application AngularJS en une structure orientée composants

Dans le nouveau framework angulaire, les composants sont les principaux composants constitutifs de l'interface utilisateur. Ainsi, l'une des premières étapes permettant à une application AngularJS d'être migrée vers le nouvel Angular est de la transformer en une structure plus orientée composants.

Des composants ont également été introduits dans l’ancienne AngularJS à partir de la version 1.5+ . L'utilisation de composants dans une application AngularJS ne rendra pas seulement sa structure plus proche du nouvel Angular 2+, mais la rendra également plus modulaire et plus facile à entretenir.

Avant d'aller plus loin, je recommande de consulter la page de documentation officielle d'AngularJS sur les composants , où leurs avantages et leur utilisation sont bien expliqués.

Je préférerais mentionner quelques astuces sur la façon de convertir l'ancien code orienté ng-controller vers le nouveau style orienté component .

Commencez à décomposer votre application en composants

Toutes les applications orientées composants ont généralement un ou plusieurs composants qui incluent d'autres sous-composants. Alors pourquoi ne pas créer le premier composant qui contiendra simplement votre application (ou un gros morceau de celle-ci).

Supposons que nous ayons un morceau de code assigné à un contrôleur, nommé UserListController , et que nous voulons en créer un composant, que nous UserListComponent .

HTML actuel:

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

JavaScript actuel:

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

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

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

    // ...
}

nouveau HTML:

<user-list></user-list>

nouveau JavaScript:

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

function UserListController(SomeService) {

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

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

    // ...
}

Notez que nous n'injectons plus $scope dans la fonction contrôleur et que nous this.myUserList maintenant this.myUserList au lieu de $scope.myUserList ;

nouveau fichier de modèle user-list.component.html :

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

Notez comment nous faisons maintenant référence à la variable myUserList , qui appartient au contrôleur, en utilisant $ctrl.myUserList partir du HTML au lieu de $scope.myUserList .

C'est parce que, comme vous l'avez probablement compris après avoir lu la documentation, $ctrl dans le modèle fait maintenant référence à la fonction du contrôleur.

Qu'en est-il des contrôleurs et des routes?

Si votre contrôleur était lié au modèle en utilisant le système de routage au lieu de ng-controller , si vous avez quelque chose comme ceci:

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

vous pouvez simplement changer votre déclaration d'état pour:

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

Et après?

Maintenant que vous avez un composant contenant votre application (qu'elle contienne l'intégralité de l'application ou une partie de celle-ci, comme une vue), vous devez maintenant commencer à diviser votre composant en plusieurs composants imbriqués, en encapsulant des parties dans de nouveaux sous-composants. , etc.

Vous devriez commencer à utiliser les fonctionnalités du composant comme

• Liaisons des entrées et des sorties

• des crochets de cycle de vie tels que $onInit() , $onChanges() , etc ...

Après avoir lu la documentation des composants que vous devriez déjà savoir comment utiliser toutes les fonctionnalités de composants, mais si vous avez besoin d' un exemple concret d'une véritable application simple, vous pouvez vérifier cela .

En outre, si vous disposez de certaines fonctions contenant beaucoup de code logique dans le contrôleur de votre composant, vous pouvez envisager de transférer cette logique dans des services .

Conclusion

Adopter une approche basée sur les composants vous permet de faire évoluer votre AngularJS vers le nouveau framework Angular, mais le rend également meilleur et beaucoup plus modulaire.

Bien sûr, il y a beaucoup d'autres étapes à franchir pour aller plus loin dans la nouvelle direction Angular 2+, que je vais énumérer dans les exemples suivants.

Présentation des modules Webpack et ES6

En utilisant un chargeur de module tel que Webpack, nous pouvons bénéficier du système de module intégré disponible dans ES6 (ainsi que dans TypeScript ). Nous pouvons alors utiliser les fonctionnalités d' importation et d' exportation qui nous permettent de spécifier les morceaux de code que nous pouvons partager entre les différentes parties de l'application.

Lorsque nous introduisons ensuite nos applications dans la production, les chargeurs de modules facilitent également leur conditionnement dans des lots de production avec les piles incluses.