AngularJS
Migrazione verso Angular 2+

introduzione

Conversione della tua app AngularJS in una struttura orientata ai componenti

Nel nuovo framework Angular, i componenti sono i principali elementi costitutivi che compongono l'interfaccia utente. Quindi, uno dei primi passaggi che consente a un'app AngularJS di essere migrato al nuovo Angular consiste nel rifattorizzarlo in una struttura più orientata ai componenti.

I componenti sono stati introdotti anche nel vecchio AngularJS a partire dalla versione 1.5+ . L'uso di componenti in un'app AngularJS non solo renderà la sua struttura più vicina al nuovo Angular 2+, ma lo renderà anche più modulare e più facile da mantenere.

Prima di andare oltre, consiglio di consultare la pagina ufficiale della documentazione di AngularJS sui componenti , in cui i loro vantaggi e il loro utilizzo sono ben spiegati.

Vorrei piuttosto menzionare alcuni suggerimenti su come convertire il vecchio codice orientato da ng-controller nel nuovo stile orientato ai component .

Inizia a rompere la tua app in componenti

Tutte le app orientate ai componenti hanno in genere uno o alcuni componenti che includono altri sotto-componenti. Quindi, perché non creare il primo componente che conterrà semplicemente la tua app (o una grande parte di essa).

Supponiamo di avere un pezzo di codice assegnato a un controller, denominato UserListController , e vogliamo creare un componente di esso, che UserListComponent .

HTML corrente:

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

JavaScript attuale:

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

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

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

    // ...
}

nuovo HTML:

<user-list></user-list>

nuovo JavaScript:

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

function UserListController(SomeService) {

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

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

    // ...
}

Nota come non stiamo più iniettando $scope nella funzione controller e ora stiamo dichiarando this.myUserList invece di $scope.myUserList ;

nuovo file modello user-list.component.html :

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

Nota come ora ci stiamo riferendo alla variabile myUserList , che appartiene al controller, usando $ctrl.myUserList dal html invece di $scope.myUserList .

Questo perché, come probabilmente avete capito dopo aver letto la documentazione, $ctrl nel template ora si riferisce alla funzione controller.

E i controller e le rotte?

Nel caso in cui il controller fosse associato al modello usando il sistema di routing invece di ng-controller , quindi se si ha qualcosa del genere:

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

puoi semplicemente cambiare la dichiarazione dello stato in:

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

Qual'è il prossimo?

Ora che hai un componente contenente la tua app (se contiene l'intera applicazione o parte di essa, come una vista), dovresti iniziare a suddividere il tuo componente in più componenti annidati, avvolgendone parti in nuovi sotto-componenti , e così via.

Dovresti iniziare a usare le caratteristiche del componente come

• Input e Output vincoli

• hook del ciclo di vita come $onInit() , $onChanges() , ecc ...

Dopo aver letto la documentazione del componente si dovrebbe già sapere come utilizzare tutte quelle caratteristiche dei componenti, ma se avete bisogno di un esempio concreto di un vero e proprio semplice applicazione, è possibile controllare questo .

Inoltre, se all'interno del controller del componente sono presenti alcune funzioni che contengono molto codice logico, è consigliabile prendere in considerazione l'idea di spostare tale logica in servizi .

Conclusione

Adottando un approccio basato sui componenti, il tuo AngularJS si avvicina di un passo per migrarlo nel nuovo framework Angular, ma lo rende anche migliore e molto più modulare.

Naturalmente ci sono molti altri passi che puoi fare per andare oltre nella nuova direzione Angular 2+, che elencherò nei seguenti esempi.

Presentazione dei moduli Webpack e ES6

Utilizzando un caricatore di moduli come Webpack possiamo beneficiare del sistema di moduli integrato disponibile in ES6 (così come in TypeScript ). Possiamo quindi utilizzare le funzionalità di importazione ed esportazione che ci consentono di specificare quali parti di codice possiamo condividere tra diverse parti dell'applicazione.

Quando poi portiamo le nostre applicazioni in produzione, i caricatori di moduli semplificano anche il confezionamento di tutti i pacchetti di produzione con batterie incluse.