Vue al rescate de AngularJS apps

Así es, aún existen muchas aplicaciones desarrolladas en AngularJS incluso cuando a finales del año 2021 se anunciara el fin del soporte a su última versión, de hecho se anuncio que el equipo de XLTS.dev mantendrá un Fork de la última versión de angularJS para casos puntuales. Por defecto la única forma de migrar "oficialmente" vamos a decirlo así, es siguiendo la documentación que ha facilitado angular implementando algunas librerías.

¿Porqué Vue?

Vue ofrece una manera natural a mi parecer de migrar componentes de angularJS a componentes Vue, ya que poseen algunas similitudes en sus características que lo hacen compatibles de cierta manera, por ejemplo la sintaxis de templates y modelo reactivo.

Esto permite que la migración se torne menos compleja para el equipo, y además se puede continuar el desarrollo de nuevas funcionalidades sin afectar tiempos, al mismo tiempo que se lleva a cabo la migración de componentes.

Ahora quiero mostrarles un ejemplo básico de como sería...

Configurando AngularJS y Vue

Snippet de Vue

se debe incluir Vue desde tu carpeta de librerías o un CDN

<script url=".../vue.js"></script>

Crear una instancia de Vue

Crearemos una instancia de vue en un controller de angularJS, asociado a una vista o al controller principal.

((module) => {
  const vm = this;

  vm.$onInit = () => {
    vm.ngText = 'Hello World!';
    vm.vueInstance();
  }
  vm.vueInstance = () => {
    new Vue({
      el: document.getElementById('vue-app'),
      data:{
        someText: vm.ngText
      }
    });
  };
})(angular.module('app'))

Creamos un componente de Vue

Este componente lo declaramos en una constante solo para efectos de pruebas unitarias.

const MyVueComponent = Vue.component('MyVueComponent', {
  props: {
    text: {
      type: String
    }
  },
  template:`<div>{{ text }}</div>`
});

Finalmente, en el template de HTML ng-non-bindable hará que todo ocurra!, esta directiva le dice a angularJS no compilar o vincular en el elemento actual del DOM, en nuestro caso la instancia de Vue.

<main ng-controller="MainCtrl as vm">
  <div id="vue-app" ng-non-bindable>
    <MyVueComponent :text="someText" />
  </div>
</main>

Ahora puedes comenzar a migrar y continuar tu desarrollo sin afectar la entrega de nuevas funcionalidades.

Puedes revisar un ejemplo completo en este repositorio, en el cual se incluye un store con Vuex.

Post original