Una guía rápida para ayudarlo a comprender y crear aplicaciones de Angular 6

Esta publicación se divide en dos partes:

La primera parte demuestra cómo crear una aplicación Angular 6 simple usando Angular CLI y explica la estructura del proyecto.

La segunda parte explica el código existente que publiqué en GitHub. Este código demuestra el uso de componentes, servicios, cliente HTTP y comunicación entre componentes.

Parte 1

Instale Node.js si aún no está presente

Necesita Node.js, ya que las bibliotecas necesarias para Angular se descargan mediante el administrador de paquetes de nodos (npm). Consulte //nodejs.org/en/ para instalar Node.js.

Instalar CLI angular

Angular CLI es una interfaz de línea de comandos para Angular y es muy útil para crear rápidamente una plantilla de proyecto de Angular 6. Instale el paquete Angular CLI npm globalmente usando el siguiente comando:

npm install -g @angular/cli

Crea el proyecto

Angular CLI ayuda a crear un proyecto muy fácilmente. Para crear el proyecto, use el siguiente comando.

ng new simple-angular6-app

simple-angular6-app es el nombre del proyecto. Ahora notará que ve una carpeta llamada simple-angular6-app. La carpeta es el proyecto que se ha creado. Para probar si todo se ha configurado correctamente, vaya a la carpeta del proyecto y ejecute la aplicación usando los siguientes comandos:

cd simple-angular6-app npm start

Vaya a su navegador y vaya a la siguiente URL: localhost: 4200. Debería poder ver que su aplicación se está ejecutando.

La aplicación se vería así:

Explicación de la estructura básica de carpetas

Cuando crea el proyecto, notará que crea un montón de archivos. Aquí enumeraré algunos de los archivos y carpetas importantes que debe conocer:

  1. package.json: este archivo tiene la lista de dependencias de nodos que se necesitan.
  2. src / styles.css : este archivo tiene el CSS global disponible en toda la aplicación.
  3. src / main.ts : este es el archivo principal que inicia la aplicación angular (AppModule se inicia aquí como se ve en el código). Aquí la extensión .ts significa TypeScript.
  4. src / index.html : este es el primer archivo que se ejecuta junto con main.ts cuando se carga la página.
  5. src / app / app.module.ts : este es el archivo donde se definen todos los componentes, proveedores y módulos. Sin definirlos aquí, no se pueden usar en ninguna otra parte del código.
  6. src / app / app.component.html: este es el componente principal de una aplicación angular, y todos los demás componentes suelen estar presentes dentro de este componente. src / app / app.component.ts es la lógica de este componente, y src / app / app.component.css es el CSS de este componente. Este componente en sí mismo no tiene ninguna lógica importante, pero actúa como un contenedor para otros componentes.
  7. dist : esta carpeta es donde están presentes los archivos construidos. TypeScript se convierte básicamente a JavaScript y los archivos resultantes se almacenan aquí después de empaquetarlos y minificarlos. (Esta carpeta aparece solo si la aplicación está construida. Un simple "npm start" no creará esta carpeta). Dado que los navegadores web solo comprenden JavaScript (al menos por ahora), es necesario convertir TypeScript a JavaScript antes de implementar el código. . Para ver esta carpeta, puede escribir lo siguiente en el símbolo del sistema:
npm run build

También hay varios otros archivos, pero conocer estos básicos es bueno para empezar

Mecanografiado

Angular 6 usa TypeScript para implementar la lógica. Aquellos de ustedes que hayan trabajado en Java encontrarán TypeScript muy fácil. TypeScript es un lenguaje construido sobre JavaScript pero que es seguro para los tipos, y TypeScript a su vez se compila en JavaScript

Creación de componentes y servicios

  1. Componente : un componente en Angular realiza una función específica. Una aplicación Angular se construye utilizando varios componentes. La CLI angular se puede utilizar para crear componentes fácilmente. La sintaxis es ng generate component [nombre]. Utilice el siguiente comando para crear un componente llamado "clientes".
ng generate component customers

2. El comando anterior crea una carpeta llamada clientes dentro de src / app . El componente creado tiene:

  • un archivo customers.component.html para decidir la plantilla (cómo debería verse la interfaz de usuario del componente)
  • un archivo customers.component.ts que es donde está presente la lógica
  • un archivo customers.component.css que tiene contenido CSS
  • y un archivo customers.component.spec.ts que se usa para pruebas unitarias (la especificación no se explicará en esta publicación).

3. Servicio : Un servicio básicamente proporciona una funcionalidad que puede ser utilizada por cualquier componente. El servicio se puede compartir entre todos los componentes o se puede restringir a un componente en particular (cualquier lógica reutilizable se puede poner en un servicio). La CLI angular también se puede utilizar para crear servicios. La sintaxis es ng generate service [nombre]. Utilice el siguiente comando para crear un servicio llamado "datos":

ng generate service data

4. El servicio se crea dentro de src / app. El servicio creado tiene un archivo data.service.ts que tiene la lógica y un archivo data.service.spec.ts para pruebas unitarias.

Felicidades ?

Ha creado con éxito su primera aplicación Angular 6 y también ha aprendido a crear componentes y servicios. Además, ahora ha aprendido la estructura de carpetas básica de un proyecto de Angular 6. La siguiente parte explicará el código de GitHub existente para demostrar cómo usar componentes, servicios, cliente HTTP y comunicación entre componentes.

Parte 2

Código

Este código se explica aquí, así que clone el repositorio en su máquina local. El repositorio tiene instrucciones sobre cómo clonarlo y configurarlo.

URL de la aplicación

Para ver cómo se ve la aplicación final, puede hacer clic en esta URL. Esto le dará una buena idea de lo que intenta hacer la aplicación.

La aplicación se vería así en una pantalla móvil:

¿Qué hace esta aplicación?

El objetivo de la aplicación es mostrar una lista de clientes en forma de tarjetas. Cuando se hace clic en los datos del cliente, la aplicación cambia a una nueva página que luego muestra los detalles del cliente seleccionado.

Estructura de la aplicación explicada

Los componentes creados son:

  1. ClientesComponente : corresponde a la carpeta src / app / customers . Este componente es para mostrar la lista de clientes. Los clientes.componente.tsEl archivo tiene una función llamada ngOnInit () . Esta función se llama siempre que se carga el componente. Por tanto, esta función se puede utilizar para cargar los datos del componente. Esa información se carga llamando a la función getCustomerList () . getCustomerList () a su vez llama al servicio de datos para obtener los datos necesarios.
  2. CustomerdetailsComponent : corresponde a la carpeta src / app / customerdetails . Este componente muestra los detalles de un solo cliente seleccionado. El archivo customerdetails.component.ts tiene la función ngOnInit () que se puede usar para cargar los datos. Para cargar datos, se llama a la función getCustomerDetails () . Esta función realiza una llamada al servicio de datos para obtener los datos necesarios. Pero aquí también notará el uso de routeParams.id que se envía al servicio. routeParams se usa para obtener parámetros de la URL de la aplicación y el idEl parámetro se utiliza para averiguar para qué cliente se deben cargar los detalles. Esto quedará más claro cuando llegue a la parte de enrutamiento.
  3. DisplayComponent : corresponde a la carpeta src / app / display . Este componente muestra el nombre del cliente en el que se hizo clic en el componente Clientes. (El objetivo de este componente es demostrar la comunicación del componente principal al secundario). Este es un componente secundario de CustomerComponent . En customers.component.htmlnotarás que .Esto hace que DisplayComponent sea un componente secundario de CustomersComponent . Los datos se pasan de CustomerComponent a DisplayComponent utilizando el atributo [cliente] .

Los datos de muestra

Los datos de muestra están presentes en la carpeta src / assets / samplejson .

Los servicios creados son:

  1. DataService : corresponde a src / app / data.service.ts . Todo el JSON utilizado en la aplicación se almacena en la carpeta src / assets / samplejson . DataService ayuda a obtener el JSON de la carpeta src / assets / samplejson mediante una solicitud HTTP. En aplicaciones reales, el servicio ayuda a obtener los datos de una API Rest o cualquier otra API mediante una solicitud HTTP. Este servicio es utilizado tanto por el CustomerComponenty CustomerdetailsComponent.

Las clases de modelo utilizadas son:

  1. Cliente : corresponde a src / app / customer.ts . Esta es la clase de modelo que se utiliza para el CustomerComponent para definir la estructura de cada cliente en la lista.
  2. CustomerDetails : corresponde a src / app / customerdetails.ts . Esta es la clase de modelo utilizada por CustomerdetailsComponent para definir la estructura que contiene todos los detalles del cliente.

Módulo de enrutamiento

El módulo de enrutamiento se define en src / app / app-routing.module.ts . Luego, este módulo se aplica a la aplicación agregando app.component.html.

Hay 2 rutas presentes en la aplicación:

  1. / clientes : esta URL muestra la lista de clientes y apunta a CustomersComponent.
  2. / customerdetails /: id : esta URL muestra los detalles de cada cliente y apunta a CustomerdetailsComponent . La identificación que está presente en esta URL es routeParam. Esta identificacióna su vez, es utilizado por CustomerdetailsComponent para saber qué detalles del cliente mostrar. Por ejemplo, / customerdetails / 1 mostrará los detalles del primer cliente, / customerdetails / 3 mostrará los detalles del tercer cliente, y así sucesivamente.

¿Felicidades de nuevo ?

Ahora sabe cómo utilizar componentes y servicios. También sabe cómo realizar llamadas HTTP, cómo utilizar el enrutamiento y cómo pasar routeParams.

Los conceptos básicos se han cubierto en esta publicación y espero que haya sido útil.

Referencias:

  1. Para saber más sobre Angular puede consultar la documentación //angular.io/guide/quickstart. La documentación es muy buena para comprender más conceptos de angular

Sobre el Autor

Amo la tecnología y sigo los avances tecnológicos. También me gusta ayudar a otros con cualquier conocimiento que tenga en el espacio tecnológico.

No dude en conectarse conmigo en mi cuenta LinkdIn //www.linkedin.com/in/aditya1811/

También puedes seguirme en twitter //twitter.com/adityasridhar18

Mi sitio web: //adityasridhar.com/

Otras publicaciones relacionadas por mí

Una guía rápida para ayudarlo a comprender y crear aplicaciones ReactJS

Una introducción rápida a Vue.js