This content originally appeared on DEV Community and was authored by DEV Community
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', {
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>
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.
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.
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-02-22T16:06:11+00:00) Vue al rescate de AngularJS apps. Retrieved from https://www.scien.cx/2022/02/22/vue-al-rescate-de-angularjs-apps/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.