Angular es una plataforma y marco de desarrollo de TypeScript que se utiliza para crear aplicaciones de una sola página.

Angular tiene una historia compleja. Los desarrolladores usaron JavaScript para construir la primera versión de este marco (AngularJS). Los desarrolladores de Angular luego usaron TypeScript para construir todas las versiones sucesivas de Angular (debido a la cantidad de errores en la primera versión).

A partir de 2021, la última versión de Angular es 12.0. En este artículo, aprenderá todo lo que necesita saber sobre Angularframework.

¿Qué es angular?

Mucha gente describe Angularas como un marco, y aunque esta definición no es incorrecta, Angular no es solo un marco. Angular también es una plataforma de desarrollo. Esto significa que tiene un sistema de hardware y software, que ejecuta aplicaciones Angular.

Aunque se basa en TypeScript, puede escribir la mayor parte del código de la plataforma en JavaScript. Como la mayoría de los marcos, Angular está basado en componentes. Esto significa que cada sección de una interfaz de usuario angular se trata como una entidad independiente, lo que conduce a la creación de código reutilizable y aplicaciones escalables.

Para usar Angular, deberá estar familiarizado con HTML, CSS y JavaScript (saber TypeScript es un activo, pero no un requisito). Angular se compara con frecuencia con VueJS y ReactJS, y una de las principales quejas es que Angular tiene una curva de aprendizaje más pronunciada.

Relacionado: ¿Qué es ReactJS y para qué se puede utilizar?

Esto no es ninguna sorpresa, ya que Angular (al ser una plataforma de desarrollo), tiene una mayor cantidad de estructuras centrales para que se familiarice. Estas estructuras incluyen:

• Módulos
• Componentes
• Plantillas

Y comprender estas características principales le asegurará que está en camino de convertirse en un desarrollador de Angular.

Explorando archivos angulares

La aplicación Angular genera muchos archivos dentro de la carpeta de su nuevo proyecto (como puede ver en la imagen a continuación). Consulte el sitio web oficial de Angular para obtener instrucciones sobre cómo instalar Angular en su computadora.

Uno de los archivos más importantes dentro de la carpeta principal del proyecto es el package.json expediente. Este archivo le dice el nombre de su proyecto, cómo comenzar su proyecto (ng servir), cómo construir su proyecto (ng build) y cómo probar su proyecto (prueba ng) entre otras cosas.

La carpeta principal del proyecto también contiene dos carpetas:módulos_nodo y src. los src carpeta es donde harás todo tu desarrollo; contiene varios archivos y carpetas.

La carpeta src

los styles.css archivo es donde pondrá todas sus preferencias de estilo globales, y el index.html archivo es la única página que se muestra en su navegador.

Explorando el archivo index.html

Lo único que le gustaría cambiar en el index.html El archivo de arriba es el título de la aplicación. los etiqueta en el cuerpo del archivo HTML que se encuentra arriba enlaces al app.component.ts archivo, que se encuentra dentro de la carpeta de la aplicación (como puede ver en la imagen a continuación).

Explorando el archivo app.component.ts

importar {Componente} desde '@ angular / core';
@Componente({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'mi-aplicación';
}

los app.component.ts archivo utiliza el raíz de la aplicación selector, que se encuentra en el index.html archivo de arriba. Usa el app.component.html archivo como plantilla y el app.component.css archivo de estilo.

los app.component.css El archivo está vacío cuando se genera porque todas las preferencias de estilo, junto con el diseño HTML, están dentro del app.component.html expediente.

Ejecutando la aplicación Angular con el ng serve --abierto comando mostrará lo siguiente en su navegador:

Para cambiar lo que se muestra en su navegador, deberá editar el app.component.html expediente.

Reemplazando el contenido de este archivo con el siguiente código:

Hola Mundo

Producirá la siguiente salida en su navegador:

Comprensión de los módulos angulares

Cada Angular La aplicación se basa en un sistema de módulos fundamentales, conocido como NgModules. Cada aplicación contiene al menos una NgModule. Angular genera dos módulos a partir del ng nuevo comandoapp-routing.module.ts y app.module.ts).

los app.module.ts El archivo contiene el módulo raíz, que debe estar presente para que se ejecute la aplicación.

Explorando el archivo app.module.ts

importar {NgModule} desde '@ angular / core';
importar {BrowserModule} desde '@ angular / platform-browser';
importar {AppRoutingModule} desde './app-routing.module';
importar {AppComponent} desde './app.component';
@NgModule ({
declaraciones: [
AppComponent
],
importaciones: [
BrowserModule,
AppRoutingModule
],
proveedores: [],
bootstrap: [AppComponent]
})
exportar clase AppModule {}

El archivo de arriba usa JavaScript importar declaración para importar el NgModule, los BrowserModule, los AppComponent, y el AppRoutingModule (que es el segundo NgModule del proyecto).

los @NgModule decorador viene después de las importaciones. Indica que el app.module.ts el archivo es de hecho un NgModule. los @NgModule luego, el decorador configura varias matrices: declaraciones, los importaciones, los proveedores, y el oreja.

los declaraciones matriz almacena los componentes, directivas y conductos que pertenecen a un NgModule. Sin embargo, en el caso de un módulo raíz, solo el AppComponent se almacena en el declaración array (como puede ver en el código anterior).

los importaciones matriz importa el otro NgModules que está utilizando en la aplicación. los importaciones matriz en el código anterior importa el BrowserModule (que le permite utilizar servicios específicos del navegador, como la representación DOM), y AppRoutingModule (que permite que la aplicación utilice el Angular enrutador).

Relacionado: El héroe oculto de los sitios web: comprensión del DOM

los proveedores La matriz debe contener servicios que los componentes en otros NgModules puedo usar.

los oreja La matriz es muy importante porque contiene el componente de entrada que Angular crea e inserta en el index.html archivo en la carpeta principal del proyecto. Cada aplicación Angular se inicia desde el oreja matriz en la raíz NgModule por bootstrapping los NgModule (que implica un proceso que inserta cada componente en el oreja matriz en el DOM del navegador).

Comprensión de los componentes angulares

Cada componente angular se genera con cuatro archivos específicos. Si echas un vistazo a la imagen de la carpeta de la aplicación de arriba, verás los siguientes archivos:

• app.component.css (un archivo CSS)
• app.component.html (un archivo de plantilla)
• app.component.spec.ts (un archivo de especificación de prueba)
• app.component.ts (un archivo de componente)

Todos los archivos anteriores están asociados con el mismo componente. Si usa el ng generar comando para generar un nuevo componente, se generarán cuatro archivos similares a los anteriores. los app.component.ts archivo contiene el componente raíz, que conecta los diferentes aspectos del componente (como la plantilla y el estilo).

Explorando el archivo app.component.ts

importar {Componente} desde '@ angular / core';
@Componente({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'mi-aplicación';
}

los app.component.ts El archivo utiliza la declaración de importación de JavaScript para importar "Componente" desde el núcleo de Angular. Entonces el @Componente decorador identifica la clase como un componente. los @Componente decorador contiene un objeto compuesto por un selector, a templateUrly un styleUrls formación.

los selector dice Angular para insertar una instancia del componente de la aplicación en cualquier plantilla HTML que tenga una etiqueta correspondiente a la selector (entonces el etiqueta). Y si echa un vistazo al código en el index.html archivo de arriba encontrará el etiqueta.

El archivo del componente principal de la aplicación también se vincula al archivo de plantilla, utilizando el templateUrl propiedad. Este es el app.component.html file, que describe cómo se debe representar un componente específico en una aplicación Angular.

La propiedad final en el objeto es la styleUrls. Esta propiedad hace referencia a una serie de hojas de estilo, lo que significa que puede aplicar varias hojas de estilo a un solo componente (para que pueda agregar la hoja de estilo global en la carpeta src a la matriz styleUrls como bien).

Comprensión de las plantillas angulares

los app.component.html archivo es un ejemplo de una plantilla angular. Este archivo es un archivo HTML y un archivo de componente (el componente de la aplicación). Por lo tanto, cada componente debe tener una plantilla HTML, simplemente porque describe cómo se representa un componente en el DOM.

¿Que sigue?

Comprender el DOM es su próximo mejor paso. Adoptar la plataforma y el marco de Angular es sin duda un desafío. Sin embargo, es posible, y dado que Angular renderiza sus componentes en el DOM, aprender sobre el DOM, mientras intentas dominar Angular, es otro gran paso.

El héroe oculto de los sitios web: comprensión del DOM

¿Está aprendiendo diseño web y necesita saber más sobre el modelo de objetos de documento? Esto es lo que necesita saber sobre DOM.

Leer siguiente

Sobre el Autor