{"id":19750,"date":"2021-10-13T15:11:18","date_gmt":"2021-10-13T13:11:18","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=19750"},"modified":"2024-06-04T14:22:46","modified_gmt":"2024-06-04T12:22:46","slug":"que-es-angular-y-para-que-sirve","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/que-es-angular-y-para-que-sirve\/","title":{"rendered":"\u00bfQu\u00e9 es Angular y para qu\u00e9 sirve?"},"content":{"rendered":"

Este art\u00edculo puede ayudarte a comprender Angular: qu\u00e9 es Angular, qu\u00e9 ventajas ofrece y qu\u00e9 puede esperar al comenzar a construir sus aplicaciones.<\/p>\n

Angular es una plataforma de desarrollo, construida sobre TypeScript. Es un framework basado en componentes para crear aplicaciones web escalables. Una colecci\u00f3n de bibliotecas bien integradas que cubren una amplia variedad de caracter\u00edsticas, que incluyen enrutamiento, administraci\u00f3n de formularios, comunicaci\u00f3n cliente-servidor y m\u00e1s. Un conjunto de herramientas para desarrolladores que permiten desarrollar, compilar, probar y actualizar el c\u00f3digo fuente de la aplicaci\u00f3n.<\/p>\n

Con Angular, est\u00e1s aprovechando una plataforma que puede escalar desde proyectos de un solo desarrollador hasta aplicaciones de nivel empresarial. Angular est\u00e1 dise\u00f1ado para que la actualizaci\u00f3n sea lo m\u00e1s sencilla posible, y as\u00ed aprovechar los \u00faltimos desarrollos con un m\u00ednimo de esfuerzo. Lo mejor de todo es que el ecosistema Angular consta de un grupo diverso de m\u00e1s de 1,7 millones de desarrolladores<\/strong>, autores de bibliotecas y creadores de contenido.<\/p>\n

\u00bfQu\u00e9 es Angular?<\/strong><\/h2>\n

Angular es un Framework de JavaScript de c\u00f3digo abierto escrito en TypeScript<\/strong>. Su objetivo principal es desarrollar aplicaciones de una sola p\u00e1gina. Google se encarga del mantenimiento y constantes actualizaciones de mejoras para este framework.<\/p>\n

\u00bfPor qu\u00e9 se necesita un Framework<\/strong>?<\/strong><\/h2>\n

En concreto, en el desarrollo de software, un framework<\/strong> es una estructura de soporte conceptual y tecnol\u00f3gica definida, generalmente, con artefactos o m\u00f3dulos de software espec\u00edficos, que pueden servir como base para la organizaci\u00f3n y desarrollo de software.<\/p>\n

Es decir, un framework es una especie de plantilla, esquema o estructura conceptual basada en tecnolog\u00eda que permite trabajar de una forma mucho m\u00e1s sencilla. De esta forma, se evitan posibles errores de programaci\u00f3n.<\/p>\n

Por tanto, un marco es un conjunto de herramientas y m\u00f3dulos que se pueden reutilizar para diferentes proyectos. Facilitando en varios aspectos el desarrollo, mejorando el tiempo, esfuerzo, organizaci\u00f3n.<\/p>\n

Versiones de Angular<\/strong><\/h2>\n

\u00abAngular\u00bb es el t\u00e9rmino general para las distintas versiones que existen. Angular se desarroll\u00f3 en 2009 y, como resultado, ha ido evolucionando cada vez m\u00e1s.<\/p>\n

Primero, estaba el Angular original, llamado Angular 1 y eventualmente conocido como AngularJS. Luego vinieron Angular 2, 3, 4, 5, 6, 7 hasta que finalmente, la versi\u00f3n actual, Angular 12, lanzada el 12\/05\/2021<\/strong>. Cada versi\u00f3n posterior de Angular mejora su predecesora, corrige errores, aborda problemas y se adapta a la creciente complejidad de las plataformas actuales.<\/p>\n

Caracter\u00edsticas de Angular<\/strong><\/h2>\n

Document Object Model<\/strong> (DOM)<\/strong><\/h3>\n

DOM (Document Object Model) trata un documento XML o HTML como una estructura de \u00e1rbol en la que cada nodo representa una parte del documento.<\/p>\n

 <\/p>\n

<\/p>\n

 <\/p>\n

Angular usa DOM regular. Hay que tener en cuenta que se realizan diez actualizaciones en la misma p\u00e1gina HTML. En lugar de actualizar las que ya se actualizaron, Angular actualizar\u00e1 toda la estructura de \u00e1rbol de las etiquetas HTML. A diferencia de otros frameworks como React.<\/p>\n

TypeScript<\/strong><\/h3>\n

TypeScript define un conjunto de tipos de JavaScript, lo que ayuda a los usuarios a escribir c\u00f3digo JavaScript que es m\u00e1s f\u00e1cil de entender. Todo el c\u00f3digo TypeScript se compila con JavaScript y se puede ejecutar sin problemas en cualquier plataforma. TypeScript no es obligatorio para desarrollar una aplicaci\u00f3n Angular. Sin embargo, es muy recomendable ya que ofrece una mejor estructura sint\u00e1ctica, al tiempo que hace que la base de c\u00f3digo sea m\u00e1s f\u00e1cil de entender y mantener.<\/p>\n

Data Binding<\/strong> (Enlace de datos)<\/strong><\/h3>\n

El enlace de datos<\/strong> (data binding) es un proceso que permite a los usuarios manipular elementos de la p\u00e1gina web a trav\u00e9s de un navegador web. Emplea HTML din\u00e1mico y no requiere secuencias de comandos ni programaci\u00f3n complejas. El enlace de datos se utiliza en p\u00e1ginas web que incluyen componentes interactivos, como calculadoras, tutoriales, foros y juegos. Tambi\u00e9n permite una mejor visualizaci\u00f3n incremental de una p\u00e1gina web cuando las p\u00e1ginas contienen una gran cantidad de datos.<\/p>\n

Angular usa el enlace bidireccional. El estado del modelo refleja los cambios realizados en los elementos de la interfaz de usuario correspondientes. Por el contrario, el estado de la interfaz de usuario refleja cualquier cambio en el estado del modelo. Esta caracter\u00edstica permite que el marco conecte el DOM a los datos del modelo a trav\u00e9s del controlador.<\/p>\n

Testing<\/strong><\/a> (Pruebas)<\/strong><\/h3>\n

Angular usa el Framework de prueba Jasmine<\/strong>. Jasmine proporciona m\u00faltiples funcionalidades para escribir diferentes tipos de casos de prueba. Karma es el ejecutor de tareas para las pruebas que usa un archivo de configuraci\u00f3n para configurar la puesta en marcha, los reportes y el framework de prueba.<\/p>\n

Arquitectura de Angular<\/strong><\/h2>\n

 <\/p>\n

<\/p>\n

 <\/p>\n

Angular es un marco modelo-vista-controlador (MVC) completo. Proporciona una gu\u00eda clara sobre c\u00f3mo se debe estructurar la aplicaci\u00f3n y ofrece un flujo de datos bidireccional al tiempo que proporciona un DOM real.<\/p>\n

M\u00f3dulos<\/strong><\/h3>\n

Una aplicaci\u00f3n Angular tiene un m\u00f3dulo ra\u00edz, llamado AppModule<\/strong>, que proporciona el mecanismo de arranque para iniciar la aplicaci\u00f3n.<\/p>\n

Componentes<\/strong><\/h3>\n

Estos son piezas o fragmentos de c\u00f3digo que define una clase que contiene la l\u00f3gica y los datos de la aplicaci\u00f3n. Un componente por lo general define una parte de la interfaz de usuario (UI).<\/p>\n

Ejemplo m\u00ednimo:<\/p>\n

\"\"<\/p>\n

Esto genera el siguiente template para as\u00ed ser usado:<\/p>\n

\"\"<\/p>\n

Cuando Angular haga el render del componente, el DOM resultante ser\u00e1 as\u00ed:<\/p>\n

\"\"<\/p>\n

<\/h3>\n

Plantillas<\/strong><\/h3>\n

Es una combinaci\u00f3n entre el marcado Angular con HTML para modificar los elementos HTML antes de que se muestren. Hay dos tipos de enlace de datos:<\/p>\n

Enlace de eventos: permite que su aplicaci\u00f3n responda a la entrada del usuario en el entorno de destino actualizando los datos de su aplicaci\u00f3n.<\/p>\n

Enlace de propiedad: permite a los usuarios interpolar valores que se calculan a partir de los datos de su aplicaci\u00f3n en el HTML.<\/p>\n

Ejemplo:<\/p>\n

\"\"<\/p>\n

 <\/p>\n

N\u00f3tese que el valor de\u00a0message<\/strong> viene del\u00a0componente<\/strong>:<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Cuando la aplicaci\u00f3n cargue el componente y su template, el usuario ver\u00e1 lo siguiente:<\/p>\n

\"\"<\/p>\n

Metadatos<\/strong><\/h3>\n

Los metadatos le dicen a Angular c\u00f3mo procesar una clase. Se utiliza para decorar la clase para que pueda configurar el comportamiento esperado de una clase.<\/p>\n

Servicios<\/h3>\n

Los servicios sirven para compartir informaci\u00f3n entre componentes o incluso hacer peticiones http a apis para obtener la informaci\u00f3n. Los servicios funcionan solo en \u00e1mbito de l\u00f3gica o datos, no est\u00e1n asociados a la vista.<\/p>\n

Inyecci\u00f3n de dependencia<\/strong><\/h3>\n

Esta caracter\u00edstica le permite mantener sus clases de componentes n\u00edtidas y eficientes. No obtiene datos de un servidor, no valida la entrada del usuario ni se registra directamente en la consola. En cambio, delega tales tareas a los servicios.<\/p>\n

Directivas Angular<\/h3>\n

Las directivas ampl\u00edan el HTML proporcion\u00e1ndole una nueva sintaxis. Puede detectar f\u00e1cilmente las directivas porque tienen el prefijo \u00abng-\u00ab. Consid\u00e9relos marcadores en el elemento DOM, indicando a Angular que adjunte un determinado comportamiento al elemento, o incluso que lo cambie por completo.<\/p>\n

Aqu\u00ed hay dos directivas de muestra:<\/p>\n