Angular

Resumen: aprender a usar las variables del entorno de angular usando archivo environment.prod.ts y environment.ts para diferenciar entre entorno de producción y entorno de desarrollo. ...

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. ...

Resumen: utilizar el componente MatDialog de Angular Material para mostrar un diálogo de confirmación, y de la misma manera ejemplificar cómo usar diálogos en Angular utilizando componentes y plantillas personalizadas. Al final vamos a tener un ejemplo de un diálogo de confirmación con Material Design en donde podremos saber si el usuario hizo click en Sí o en No. Mira el resultado final aquí. ...

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. ...

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í. ...

En este post te muestro cómo agregar y utilizar los estilos de Material Design o Angular Material a una aplicación de Angular. Vamos a ver cómo: Agregar @angular/material a proyecto Utilizar un tema presideñado Configurar componente contenedor Usar algunos componentes Nota: para esto necesitas un proyecto existente. Si no lo tienes, mira aquí cómo comenzar con Angular. ...

Resumen: crear proyecto básico de Angular usando la CLI, es decir, hacer un hola mundo con Angular o mejor dicho, Hola angular. En este post veremos cómo comenzar un proyecto de Angular, cómo modificarlo y finalmente cómo “compilarlo” para tener una versión lista para producción. Recuerda que el desarrollo de Angular se hace con la angular CLI; si no cuentas con ella mira aquí cómo se instala. ...

Resumen: instalar CLI de Angular en Windows paso a paso. Para crear aplicaciones web de Angular necesitamos instalar la CLI de Angular, que nos permitirá crear aplicaciones de Angular, agregar componentes y compilar, todo en un comando (con ng). En este post veremos cómo instalar la CLI de Angular. ...

AngularJS, si bien es un framework que ya no es recomendado hoy en día para realizar proyectos (si eres fan de AngularJS entonces puedes ver a angular.io), tiene un gran uso. Infiero que muchísimos sistemas están escritos con el framework superheroico de Google. En este post se verá cómo mostrar notificaciones usando el framework de JavaScript llamado AngularJS y una librería llamada angular-ui-notification. ...

Introducción angular.copy es una función que trae el framework AngularJS. Funciona para, como su nombre lo indica, copiar variables. Cada que utilizamos angular.copy, ésta función devuelve una nueva copia exacta del objeto que le pasamos, pero sin mantener la referencia en el objeto original. Así, aunque esta nueva copia sufra cambios, el original no se verá afectado. Y lo mismo pasa si el original sufre cambios Demostración sin angular.copy Para explicar mejor el funcionamiento, hagamos un pequeño ejemplo que guarde el nombre y la edad de las mascotas en un arreglo. Y luego, que lo dibuje en una tabla. ...