AngularJS
Migración a Angular 2+

Introducción

Convertir su aplicación AngularJS en una estructura orientada a componentes

En el nuevo marco angular, los componentes son los bloques de construcción principales que componen la interfaz de usuario. Por lo tanto, uno de los primeros pasos que ayuda a migrar una aplicación AngularJS al nuevo Angular es refactorizarlo en una estructura más orientada a los componentes.

Los componentes también se introdujeron en el antiguo AngularJS a partir de la versión 1.5+ . El uso de Componentes en una aplicación AngularJS no solo acercará su estructura al nuevo Angular 2+, sino que también lo hará más modular y más fácil de mantener.

Antes de continuar, recomiendo consultar la página de documentación oficial de AngularJS sobre Componentes , donde se explican bien sus ventajas y usos.

Preferiría mencionar algunos consejos sobre cómo convertir el antiguo código orientado a ng-controller al nuevo estilo orientado a component .

Comienza a dividir tu aplicación en componentes

Todas las aplicaciones orientadas a componentes tienen generalmente uno o pocos componentes que incluyen otros subcomponentes. Entonces, ¿por qué no crear el primer componente que simplemente contendrá su aplicación (o una gran parte de ella)?

Supongamos que tenemos un código asignado a un controlador, denominado UserListController , y queremos crear un componente del mismo, al que llamaremos UserListComponent .

HTML actual:

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

JavaScript actual:

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

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

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

    // ...
}

nuevo HTML:

<user-list></user-list>

nuevo JavaScript:

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

function UserListController(SomeService) {

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

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

    // ...
}

Observe cómo ya no estamos inyectando $scope en la función del controlador y ahora estamos declarando this.myUserList lugar de $scope.myUserList ;

Nuevo archivo de plantilla user-list.component.html :

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

Observe cómo nos estamos refiriendo ahora a la variable myUserList , que pertenece al controlador, usando $ctrl.myUserList de html en lugar de $scope.myUserList .

Esto se debe a que, como probablemente haya descubierto después de leer la documentación, $ctrl en la plantilla ahora se refiere a la función del controlador.

¿Qué pasa con los controladores y las rutas?

En caso de que su controlador estuviera vinculado a la plantilla usando el sistema de enrutamiento en lugar de ng-controller , entonces si tiene algo como esto:

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

simplemente puede cambiar su declaración de estado a:

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

¿Que sigue?

Ahora que tiene un componente que contiene su aplicación (ya sea que contenga la aplicación completa o una parte de ella, como una vista), ahora debe comenzar a dividir su componente en múltiples componentes anidados, envolviendo partes de ella en nuevos subcomponentes , y así.

Deberías comenzar a usar las características de los componentes como

• Entradas y enlaces de salidas

• ganchos de ciclo de vida como $onInit() , $onChanges() , etc ...

Después de leer la documentación del Componente , ya debe saber cómo usar todas las funciones de esos componentes, pero si necesita un ejemplo concreto de una aplicación realmente simple, puede verificar esto .

Además, si dentro del controlador de su componente tiene algunas funciones que contienen una gran cantidad de código lógico, una buena idea puede ser considerar mover esa lógica a los servicios .

Conclusión

La adopción de un enfoque basado en componentes empuja su AngularJS un paso más hacia la migración al nuevo marco angular, pero también lo hace mejor y mucho más modular.

Por supuesto, hay muchos otros pasos que puede hacer para ir más allá en la nueva dirección Angular 2+, que enumeraré en los siguientes ejemplos.

Introducción a los módulos Webpack y ES6.

Al utilizar un cargador de módulos como Webpack , podemos beneficiarnos del sistema de módulos integrado disponible en ES6 (así como en TypeScript ). Luego podemos usar las funciones de importación y exportación que nos permiten especificar qué partes de código podemos compartir entre las diferentes partes de la aplicación.

Cuando luego llevamos nuestras aplicaciones a producción, los cargadores de módulos también hacen que sea más fácil empaquetarlos en paquetes de producción con baterías incluidas.