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 angula…

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

fusion

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', {
  computed: {
    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>

finish fusion

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

GitHub logo

rholo
/
ng-vue-migration

Basic sample to migrate from AngularJS to Vue without modules

AngularJS with Vue for migration project

this is an example to migrate your legacy project from angularjs to Vue including Vuex and i18n features,

NOTE: this project is not using javascript modules

this migration is from angularJS inside to create new features using Vue..

even you can add Eslint + Prettier config for better practices and clean code.


Print Share Comment Cite Upload Translate
APA
DEV Community | Sciencx (2024-03-28T13:18:43+00:00) » Vue al rescate de AngularJS apps. Retrieved from https://www.scien.cx/2022/02/22/vue-al-rescate-de-angularjs-apps/.
MLA
" » Vue al rescate de AngularJS apps." DEV Community | Sciencx - Tuesday February 22, 2022, https://www.scien.cx/2022/02/22/vue-al-rescate-de-angularjs-apps/
HARVARD
DEV Community | Sciencx Tuesday February 22, 2022 » Vue al rescate de AngularJS apps., viewed 2024-03-28T13:18:43+00:00,<https://www.scien.cx/2022/02/22/vue-al-rescate-de-angularjs-apps/>
VANCOUVER
DEV Community | Sciencx - » Vue al rescate de AngularJS apps. [Internet]. [Accessed 2024-03-28T13:18:43+00:00]. Available from: https://www.scien.cx/2022/02/22/vue-al-rescate-de-angularjs-apps/
CHICAGO
" » Vue al rescate de AngularJS apps." DEV Community | Sciencx - Accessed 2024-03-28T13:18:43+00:00. https://www.scien.cx/2022/02/22/vue-al-rescate-de-angularjs-apps/
IEEE
" » Vue al rescate de AngularJS apps." DEV Community | Sciencx [Online]. Available: https://www.scien.cx/2022/02/22/vue-al-rescate-de-angularjs-apps/. [Accessed: 2024-03-28T13:18:43+00:00]
rf:citation
» Vue al rescate de AngularJS apps | DEV Community | Sciencx | https://www.scien.cx/2022/02/22/vue-al-rescate-de-angularjs-apps/ | 2024-03-28T13:18:43+00:00
https://github.com/addpipe/simple-recorderjs-demo