More
    InicioTecnologíaComo hacerAngular y AngularJS | Desarrollado front-end

    Angular y AngularJS | Desarrollado front-end

    En términos de filosofía, Angular es un marco completo y ofrece soluciones para casi todas las tareas de un desarrollador front-end. El software de código abierto se encarga de cosas como la validación o la comunicación con el backend.

    Angular y AngularJS

    La versión 2 y posteriores de Angular es una sucesora de AngularJS (Angular 1.x) desarrollado por Google. Sin embargo, dado que Angular se ha reescrito por completo y no es compatible con AngularJS, los desarrolladores, en los que todavía se usa AngularJS, han acordado la diferenciación descrita por el nombre. AngularJS es por tanto la «versión antigua 1.x», Angular es el nuevo desarrollo de la versión 2.0.

    AngularJS (Angular 1) era o es un marco web de JavaScript del lado del cliente para la creación cómoda de aplicaciones web de una sola página de acuerdo con el patrón Model-View-ViewModel (MVVM). Fue desarrollado por Google en 2009 y se puso a disposición de la comunidad bajo la licencia de código abierto del MIT. El Angular 2 significativamente mejorado y no compatible con versiones anteriores apareció en septiembre de 2016; Angular 1 (Angular.JS) seguirá manteniéndose y actualmente está en la versión 1.6.7.

    ¿Qué es AngularJS?

    La forma en que funciona AngularJS se basa en generar vistas HTML en el lado del cliente. Además, AngularJS amplía el «vocabulario» de HTML, con el cual el nivel de vista se mapea dentro del modelo MVVM sin que los desarrolladores tengan que manipular el DOM a través de jQuery como en JavaScript.

    Además, AngularJS se encarga de la validación de datos en el contexto de los formularios de entrada y lo considera una extensión funcional de View. En principio, esto continúa con la idea de la validación de formularios HTML5, pero se implementa en AngularJS en forma de una variante de JavaScript que es independiente del navegador web.

    Sin embargo, AngularJS no ofrece ninguna función para mapear el nivel del modelo en forma de entidades del lado del cliente, que generalmente es parte del área de validación de datos en otros marcos para crear aplicaciones de una sola página. Con Angular, estos generalmente se almacenan directamente en un ViewModel.

    A diferencia de React, los clientes web creados en AngularJS están estructurados en forma de módulos, plantillas de vista, controladores, ámbitos, filtros y los llamados proveedores (fábrica, servicio). La fusión de todos los componentes se realiza mediante la llamada dependencia – Contenedor de AngularJS.

    Esto, en última instancia, conduce a una aplicación poco acoplada, que luego consta de subcomponentes reutilizables. Dado que AngularJS tiene un mecanismo de enlace de datos basado en el modelo MVVM, los desarrolladores no necesitan ningún código de programa explícito para sincronizar la vista y la lógica de la aplicación.

    Angular también describe los enlaces de datos de forma declarativa dentro de la vista. Esto implica un seguimiento bidireccional de los cambios en los valores, que en algunos casos tiene un impacto significativo en el rendimiento de las aplicaciones de una sola página. Desde un punto de vista técnico, funciona de tal manera que AngularJS siempre está en un bucle de eventos para interceptar o evaluar cualquier cambio y actualizar la vista si es necesario.

    Lo que hace Angular de manera diferente

    Angular (AngularJS 2.0), que también fue iniciado por Google, anunciado en 2014 y publicado por primera vez en otoño de 2016, originalmente se llamaba «Angular 2», como se explicó, pero esto a menudo generaba confusión. Hoy en día generalmente hablamos de Angular; el actual La versión estable 5.2.0 se lanzó el 11 de enero de 2018.

    A diferencia de AngularJS, Angular no tiene ni osciloscopios ni controladores. En cambio, se basa el modelo de arquitectura de los programas Angular, que, por cierto, generalmente se escriben en TrueScript Ą como con React en un modelo de componentes jerárquicos. Angular reemplaza los ámbitos y controladores con componentes y directivas, por lo que un componente representa una directiva con una plantilla. Además, en Angular, parte de la funcionalidad principal se subcontrató a módulos para hacer que el núcleo sea más compacto y, por lo tanto, más rápido.

    Los creadores de Angular recomiendan expresamente el uso de TrueScript, que permite la programación orientada a objetos basada en clases, la escritura estática y los genéricos. Dado que TrueScript es un superconjunto de la especificación ECMAScript ES6, también es compatible con ES5 y, por lo tanto, con JavaScript. Sin embargo, con TrueScript, las características de ES6 como declaraciones «for … of», lambdas, iteradores, reflejos o generadores de estilo Python también se pueden usar con Angular.

    Además, Angular admite la carga dinámica, la compilación asincrónica de plantillas o el enrutamiento simple. Además, Angular ofrece una versión mejorada sobre AngularJS. Inyección de dependencias en forma de enlaces que permiten nombrar dependencias. Por último, pero no menos importante, Angular viene con una sintaxis más simple para las expresiones, mediante la cual los enlaces para las propiedades se crean con «[]» y los enlaces para los eventos con «()». Sin embargo, Angular solo es compatible con navegadores modernos. La programación reactiva también es posible con RxJS.

    Angular 5

    Angular 5
    Angular 5

    La última versión principal de Angular se lanzó con Angular 5.0 (incluido Angular CLI 1.5) en noviembre de 2017. Muchos expertos ven esto como un hito en el desarrollo del marco. Lo nuevo en Angular CLI 1.5 es, por ejemplo, un optimizador de compilación revisado, que está diseñado para generar archivos de salida más pequeños.

    El optimizador analiza el código para el proceso posterior de agitación de árboles con el fin de eliminar las partes no utilizadas de la aplicación; Esto incluye los decoradores angulares, que solo usa el compilador angular y no son necesarios cuando la aplicación se está ejecutando. El optimizador de compilación se activa de forma predeterminada desde Angular 5 y se puede desactivar con la bandera «–build-optimizer = false».

    Otra característica nueva es que el compilador angular optimizado admite una compilación incremental AoT (Ahead-of-Time), lo que garantiza que las plantillas HTML se traduzcan (transpilen) a JavaScript, lo que acelera su interpretación. En versiones anteriores, AoT solo se podía construir de forma completa, no incremental. Antes de Angular 5, el proceso de compilación se hizo cargo de todas las pestañas, espacios y saltos de línea innecesarios de las plantillas HTML de forma predeterminada, lo que condujo a un mayor consumo de espacio y, por lo tanto, a archivos de salida más grandes.

    En Angular 5, el @ Component-Decorator de Angular comprende una nueva propiedad llamada «preserveWhitespaces», que está activada por defecto, por lo que se conserva el comportamiento anterior. Si deseas beneficiarte de la optimización, establece la opción en «false».

    @Component({
       selector: 'app-component',
       templateUrl: 'some.component.html',
       preserveWhitespaces: false
    })
    export class SomeComponent {}

    Opcionalmente, la opción también se puede activar para todos los componentes, aunque debes saber que la configuración basada en componentes siempre sobrescribe la configuración global. Además, puedes utilizar la directiva «ngPreserveWhitespaces» para especificar que el espacio en blanco permanece dentro de tu DOM.

    <div ngPreserveWhitespaces>
       Este espacio en blanco
          no se borra.
    </div>

    Angular generalmente usa Zone.js. para la detección de cambios. Angular 5 mejora el rendimiento de Zone.js, y también puedes omitir Zone.js por completo si lo deseas, aunque las ventajas de la detección de cambios se pierden. Sin embargo, esto a veces puede resultar útil para aplicaciones de alto rendimiento. La omisión de Zone.js se especifica cuando se inicia la aplicación:

    platformBrowserDynamic.bootstrapModule(AppModule, { ngZone: 'noop' });

    Antes de Angular 5, cualquier cambio en un campo de entrada, como: una pulsación de tecla para su validación inmediata. Si hay una validación,  por ejemplo, si se utiliza un servicio externo llamado a través de http, el servicio puede recibir consultas frecuentes. Por lo tanto, en Angular 5 puede decidir de una manera más granular cuándo debe tener lugar la validación

    Charles Stuberhttps://tecnologiandroid.com
    Nuevo dueño y administrador de Tecnología Android, estaré encargado de todo el contenido de blog junto con mis nuevos colegas. Espero que nos podamos llevar muy bien. Para contactarte conmigo, escríbeme por la sección de contacto.
    Articulos relacionados

    DEJA UNA RESPUESTA

    Por favor ingrese su comentario!
    Por favor ingrese su nombre aquí

    Ver más

    • Responsable: Charles Stuber.
    • Finalidad:  Moderar los comentarios.
    • Legitimación:  Por consentimiento del interesado.
    • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a Webempresa que actúa como encargado de tratamiento.
    • Derechos: Acceder, rectificar y suprimir los datos.
    • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

    Te recomendamos leer: