TypeScript

Lista de tareas pendientes con Angular - Ejecutando proyecto con ng serve

Lista de tareas pendientes con Angular – ToDo list

En este post te mostraré un proyecto muy sencillo creado con Angular. Se trata de una lista de tareas pendientes, ToDo list, to-do list o como sea que le llames.

Vamos a usar el framework Angular y el lenguaje de programación TypeScript para crear una lista de tareas por hacer. Tendrá las opciones de agregar, eliminar, editar y marcar como terminada.

Por cierto, en este caso vamos a usar localStorage para almacenar la lista pero bien podrías usar una API con un lenguaje como PHP o cualquier otra cosa.

Para tener el proyecto simple me he enfocado a no usar frameworks CSS, así que solo será HTML plano. De todos modos lo que importa es cómo vamos a manejar la lista de tareas pendientes con Angular.

(más…)

Por parzibyte, hace
Input ligado a propiedad TypeScript con Angular

Angular – Simple binding en Input

En este post te mostraré cómo ligar un input con una variable de Angular, de manera que si la variable cambia en el input, se cambie en los demás lugares.

Y de manera similar, si la variable cambia desde otro lugar se refresque en el input. Todo esto será con Angular y con el two way binding.

Por cierto, esto que te enseñaré será muy simple por si solo necesitas un input. En caso de que quieras algo más avanzado mira los formularios con Angular.

(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

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

Por parzibyte, hace