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…)

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…)

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…)

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…)

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…)

Menú de navegación con Angular Material

Menú de navegación con Angular Material

Resumen: mostrar cómo crear un menú de navegación con Angular Material; es decir, implementar un navigation drawer con el menú a la izquierda (que se puede ocultar y mostrar con un botón) y el contenido a la derecha.

Para implementar un navigation drawer o cajón de navegación en Angular Material vamos a usar combinar algunos componentes. Entre ellos:

  • Mat Toolbar: la barra que estará en la parte superior y tendrá el título de la app de Angular así como un botón para mostrar/ocultar el cajón de navegación
  • Mat Sidenav Container: el contenedor de lo que veremos a continuación
  • Mat Sidenav: el menú con los enlaces, es decir, el cajón de navegación
  • Mat Sidenav Content: el contenido que se irá mostrando e inyectando dependiendo de la sección

Nota: recuerda que para esto debes tener un proyecto de Angular y haberle agregado Angular Material.

Si quieres ver el ejemplo terminado haz click aquí.

(más…)

Angular Router – Tutorial y ejemplo

Resumen: mostrar cómo usar Angular Router con un tutorial y ejemplo para las rutas en Angular.

Recuerdo que el buen AngularJS introdujo buenas cosas como las SPA que son aplicaciones de una sola página en donde los controladores se iban montando en un contenedor conforme se navegaba.

Angular 2 (o 4, 5, 8, 10, 50 o la versión que sea cuando leas este post) también tiene un Router muy eficaz y fácil de configurar. Justamente veremos eso hoy: una introducción al modo de uso del enrutador de angular.

Nota: si quieres puedes ver y editar el resultado final aquí.

(más…)