Angular - ngFor

De los recursos más distintivos de ANGULAR, especial para mostrar un contenido extenso de elementos y darle un formato especial en el HTML esta el ngFor, en mejor definicion esta vez se muestra El ngFor que es una extructura que permite la repetición por ciclo de un recurso

HTML

<h1>Héroes <small>Marvel y DC</small></h1>

<div class="card-columns">
  <div class="card" *ngFor="let heroe of heroes">
    <img [src]="heroe.img" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">{{ heroe.nombre }}</h5>
      <p class="card-text">{{ heroe.bio }}</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      <button class="btn btn-outline-primary btn-block">Ver más</button>
    </div>
  </div>
</div>
 

Leer más

Angular - expresiones regulares con VALIDATORS(validar campos)

En cómputo teórico y teoría de lenguajes formales una expresión regular, también conocida como regex, regexp1​ o expresión racional, es una secuencia de caracteres que forma un patrón de búsqueda, principalmente utilizada para la búsqueda de patrones de cadenas de caracteres u operaciones de sustituciones. Por ejemplo, el grupo formado por las cadenas Handel, Händel y Haendel se describe con el patrón "H(a|ä|ae)ndel". La mayoría de las formalizaciones proporcionan los siguientes constructores: una expresión regular es una forma de representar los lenguajes regulares (finitos o infinitos) y se construye utilizando caracteres del alfabeto sobre el cual se define el lenguaje.

TS

//VALIDAR CAMPO IP 255.255.255.255
Validators.pattern(/^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/)

//VALIDAD SOLO NÚMEROS
Validators.pattern(/^([0-9])*$/),//solo numeros

//VALIDAD CAMPO REQUERIDO
Validators.required,

//VALIDA TELEFONO
Validators.minLength(7),
Validators.maxLength(10),
Validators.pattern(/^([0-9])*$/),

//VALIDA CAMPO NOMBRE
Validators.minLength(2),
Validators.maxLength(30),
Validators.pattern(/^[A-Za-z\s\xF1\xD1]+$/)//solo letra

//VALIDA CORREO - EMAIL
Validators.pattern(/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/),//correo debe tner @ y .com

    

Leer más

Angular - Módulos con PRIME NG

Un módulo es uno de los elementos principales con los que podemos organizar el código de las aplicaciones en Angular. No deben ser desconocidos hasta este momento del Manual de Angular, puesto que nuestra aplicación básica ya disponía de uno. Sin embargo, en lugar de colocar el código de todos los componentes, directivas o pipes en el mismo módulo principal, lo adecuado es desarrollar diferentes módulos y agrupar distintos elementos en unos u otros. El orden se realizará de una manera lógica, atendiendo a nuestras propias preferencias, el modelo de negocio o las preferencias del equipo de desarrollo.

TS

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GenteComponent } from './components/gente/gente.component';
import { NavbarComponent } from './components/shared/navbar/navbar.component';
import { CrearGenteComponent } from './components/crear-gente/crear-gente.component';
import { HomeComponent } from './components/home/home.component';

import { HttpClientModule } from '@angular/common/http';

//NG PRIME
import { TableModule } from 'primeng/table';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GalleriaModule } from 'primeng/galleria';
import { MessagesModule } from 'primeng/messages';
import { MessageModule } from 'primeng/message';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { ConfirmationService } from 'primeng/api';

//RUTAS
import { RouterModule } from '@angular/router';
import { ROUTES } from './app.routes';

//FORMULARIOS
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { GuardRoutes } from './components/shared/security/guard-routes';


@NgModule({
  declarations: [
    AppComponent,
    GenteComponent,
    NavbarComponent,
    CrearGenteComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    TableModule,
    GalleriaModule,
    MessagesModule,
    MessageModule,
    ConfirmDialogModule,
    RouterModule.forRoot( ROUTES)
  ],
  providers: [
    ConfirmationService,
    GuardRoutes
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }


    

Leer más

Javascript - JSONs y contenidos

JavaScript Object Notation (JSON) es un formato basado en texto estándar para representar datos estructurados en la sintaxis de objetos de JavaScript. Es comúnmente utilizado para transmitir datos en aplicaciones web (por ejemplo: enviar algunos datos desde el servidor al cliente, así estos datos pueden ser mostrados en páginas web, o vice versa). Se enfrentará a menudo con él, así que este artículo le entrega todo lo que necesita saber para trabajar con JSON utilizando JavaScript, incluyendo el análisis JSON para acceder a los datos en su interior, y cómo crear JSON.

JSON es un formato de datos basado en texto que sigue la sintaxis de objeto de JavaScript, popularizado por Douglas Crockford. Aunque es muy parecido a la sintaxis de objeto literal de JavaScript, puede ser utilizado independientemente de JavaScript, y muchos ambientes de programación poseen la capacidad de leer (analizar; parse) y generar JSON. Los JSON son cadenas - útiles cuando se quiere transmitir datos a través de una red. Debe ser convertido a un objeto nativo de JavaScript cuando se requiera acceder a sus datos. Ésto no es un problema, dado que JavaScript posee un objeto global JSON que tiene los métodos disponibles para convertir entre ellos.

ESTRUCTURAS COMPLETAS

EJEMPLO PRODUCTOS

USERS

Leer más

Angular - Ejemplo de rutas

Qué es un sistema de routing

Pensando en aquellas personas que comienzan con Angular su incursión en las "SPA" (Single Page Application), comenzaremos aclarando qué es un sistema de routing y por qué lo necesitamos.

En cualquier sitio web generalmente tienes varias direcciones que son entregadas por un servidor, para mostrar diferentes contenidos del sitio. Podemos tener una portada, una página de productos, una de contacto, etc. Cada una de esas páginas se presenta en una ruta diferente del sitio web, que podrían ser como example.com, example.com/productos/index.html, example.com/contacto.html, etc. Cada una de esas rutas podría tener un archivo HTML, que se sirve con el contenido de esa sección. Hasta aquí estamos seguros que los lectores no tendrán ningún problema, pues es así como funcionan, en líneas generales, prácticamente todos los sitios web.

Sin embargo, en las aplicaciones Angular sólo tenemos una página, el index.html y toda la acción se desarrolla dentro de esa página. En Angular lo común es que el index sólo tenga un componente en su BODY y realmente toda la acción se desarrollará en ese componente. Todas las "páginas" (pantallas o vistas) del sitio web se mostrarán sobre ese índex, intercambiando el componente que se esté visualizando en cada momento.

Nota: Ese es básicamente el concepto de Single Page Application, del que puedes obtener más información en un artículo genérico sobre SPA, que explica con mayor detalle este modo común de desarrollo de aplicaciones con Javascript.

Para facilitar la navegación por un sitio donde realmente sólo hay un index, existe lo que llamamos el sistema de routing, que tiene el objetivo de permitir que en el sitio web haya rutas internas, respondiendo a rutas "virtuales" como las que existen en los sitios tradicionales.

Llamamos "virtuales" a esas rutas, porque realmente sólo existe un "index.html", no habrá un archivo "contacto.html" o "productos.html" para cada ruta, sino que será realmente siempre el "index.html" el que se entregue al navegador.

El sistema de routing es el encargado de reconocer cuál es la ruta que el usuario quiere mostrar, presentando la pantalla correcta en cada momento. Esto es útil por varios motivos, entre ellos:

Permite que la aplicación responda a rutas internas. Es decir, no hace falta entrar siempre en la pantalla principal de la aplicación y navegar hasta la pantalla que queremos ver realmente. Permite que el usuario pueda usar el historial de navegación, yendo hacia atrás y hacia adelante con el navegador para volver a una de las pantallas de aplicación que estaba viendo antes.

app.routes.ts

TS

    
import { Routes } from '@angular/router';
import { PersonasComponent } from './components/personas/personas.component';
import { CrearPersonasComponent } from './components/crear-personas/crear-personas.component';
import { CanActivateViaAuthGuard } from './components/shared/guard/autho-guard';

export const ROUTES: Routes = [

    {  path: 'crear', component: CrearPersonasComponent, canActivate: [CanActivateViaAuthGuard] },
    {  path: 'crear/:idpersonas', component: CrearPersonasComponent, canActivate: [CanActivateViaAuthGuard] },
    {  path: 'listar', component: PersonasComponent, canActivate: [CanActivateViaAuthGuard] },
    {  path: 'listar/:mensaje', component: PersonasComponent, canActivate: [CanActivateViaAuthGuard] },

];

Leer más