angular

Clima con Angular - App que consume API

Angular – Aplicación para el clima con API

Clima con Angular - App que consume API

Clima con Angular – App que consume API

Hoy te voy a mostrar un sistema web hecho con Angular. Se trata de una app web que muestra el clima a través de una API.

Lo que hace este software es obtener la ubicación del usuario a través de su IP y obtener el pronóstico del tiempo usando otra API a partir de la latitud y longitud obtenidas anteriormente.

Verás que está implementado de una manera muy sencilla utilizando componentes y servicios. Al final vamos a tener una app web que muestra:

  • Ubicación del usuario con nombre de la ciudad y país
  • Reloj
  • Reporte del clima para los próximos 5 días usando imágenes
  • La temperatura máxima y mínima esperada para determinado día

Además, la aplicación web será responsiva pues vamos a usar Bootstrap. Al final del post dejaré el enlace del repositorio para que puedas explorar el código fuente y descargarlo si es necesario. Como lo dije, utiliza Angular.

(más…)

Por parzibyte, hace

Pequeño e-commerce en Angular, Node y MySQL (tienda online)

Hoy vengo a presentar un software de comercio electrónico, tienda online o e-commerce escrito en Angular, con los estilos de Angular Material, y con una API escrita con JavaScript del lado del servidor usando Node con Express. Para la base de datos se ha usado MySQL.

El software es open source; puede ser descargado y modificado por cualquier persona. Entre sus características encontramos:

  • Gestión de productos
  • Fotos de productos (guardadas en el disco duro)
  • Carrito de compras por cada usuario
  • Registro de venta con dirección de envío
  • Vista de tienda
  • Detalle de producto

Quiero aclarar que no es un software listo para producción, y más bien es un proyecto escolar que puede servir ya sea como base para un proyecto completo de un e-commerce o para otro proyecto escolar.

Veamos ahora cómo es que está programado, en dónde se puede descargar. etcétera.

(más…)

Por parzibyte, hace

Angular cambia la opacidad en CSS

Hoy te voy a mostrar cómo solucionar el siguiente problema: al preparar aplicación web de angular para producción con ng build --prod los estilos CSS se cambian y en la opacidad se obtienen distintos resultados.

Quiero aclarar que esto no es problema de Angular, sino de cssnano, una herramienta que utiliza Angular para optimizar los estilos CSS.

(más…)

Por parzibyte, hace

CORS con Node y Express

CORS es necesario para compartir recursos en distintos dominios. Hoy vamos a ver cómo habilitar CORS con Node.js al usar express.

Sé que CORS no es una cosa “que se habilite” pero encuentro facilidad al decirlo de este modo. De hecho lo que se hace es responder con un encabezado indicando cuáles dominios se permiten para compartir recursos.

Bien, veamos cómo configurar CORS con Node.

(más…)

Por parzibyte, hace

Angular Router: navegar de manera programada

En este post te mostraré cómo navegar a otra ruta en una SPA de Angular usando TypeScript. Es decir, navegar en el click de un botón o en determinada acción, y no a través de un enlace.

Lo único que tenemos que hacer es importar al router, inyectarlo en el constructor y después invocar a navigateByUrl (igualmente el router tiene más métodos).

(más…)

Por parzibyte, hace

Angular router: forzar hash en URL

Introducción

En este post te mostraré cómo forzar que el router de Angular use el hash en la URL. Este hash también es conocido como almohadilla, gatito, etcétera.

De este modo nuestra aplicación web tendrá algo como: http://localhost:4200/#/productos en lugar de algo como http://localhost:4200/productos.

Prefiero este modo para la URL del router de Angular porque no afecta la URL en el servidor y porque simplemente me ha gustado desde que uso las SPA.

(más…)

Por parzibyte, hace
Angular - Formulario basado en plantilla (ejemplo)

Ejemplo de formulario con Angular

Resumen: en este post te mostraré un ejemplo simple de un formulario con Angular, en donde ligamos a un valor del componente con la vista del formulario.

En Angular existen dos tipos de formularios, los que son formularios reactivos (Reactive form) y los que son basados en plantillas (Template driven forms).

Hoy veremos un ejemplo de un Template driven form en Angular, que si vienes de AngularJS (o apenas estás comenzando) vas a entenderlo muy bien.

Si quieres puedes probar el resultado final aquí, y ver el código de todo el proyecto aquí.

(más…)

Por parzibyte, hace
Listar respuesta de petición HTTP con Angular

Angular: Peticiones HTTP con HttpClient

Resumen: mostrar cómo usar el cliente HTTP de Angular para hacer peticiones y consumir API REST usando métodos como GET, POST, PUT y DELETE además de JSON para el intercambio de datos.

En este post vamos a crear un servicio de Angular que a su vez usará el HttpClientModule para hacer peticiones HTTP. Después vamos a consumir ese servicio desde cualquier componente.

(más…)

Por parzibyte, hace
Servicios en Angular - Ejemplo

Servicios en Angular con ejemplo

Los servicios en Angular sirven para varias cosas y son muy parecidos a los servicios de AngularJS.

Un servicio es un servicio, ¿no? sirve para algo y de acuerdo a varios autores debería hacer solo una cosa y debería hacerla bien.

Los servicios sirven para varias cosas, al menos yo los he usado para:

  • Encerrar funciones útiles
  • Obtener cálculos con fórmulas definidas
  • Invocar a servidor HTTP para consumir API

Un servicio en Angular es un paradigma, una forma de pensar y una forma de organizar el código, nada más. Aunque físicamente es un service, pero bien podríamos evitarlos, solo que no se recomienda.

(más…)

Por parzibyte, hace