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

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

Angular - Ejemplo de componentes

Los componentes son como etiquetas html nuevas que podemos inventarnos para realizar las funciones necesarias. Pueden ser cosas diversas desde una sección de navegación a un formulario. Los componentes son pequeñas partes lógicas de la aplicación, que van a estar representando a un trozo de la pantalla. Un componente es un bloque, que contiene un template, contiene estilos , contiene lógica. Un componente esta compuesto por un archivo .ts , uno html y uno css, también debemos declararlo en mgModule. De cada componente exportamos una clase, que esta clase luego se podrá importar a otros componentes. Una aplicación de angular esta compuesta por componentes. Los componentes son pequeñas partes lógicas de la aplicación, que van a estar representando a un trozo de la pantalla. Y es así como funciona angular, todo lo que aparece en la aplicación son componentes, que son pequeños trozos de pantalla las cuales van a estar controladas por una clase, que esa clase va a ser la que va a dar soporte al componente. La clase tendrá una serie de funcionalidades y la clase también tendrá una plantilla asociada que sera la que mostrara la información correspondiente.

Algunos ejemplos

Leer más

Angular - Ejemplo de servicios

¿ Que es un Servicio en Angular ?

Un Servicio en Angular es el mecanismo para compartir funcionalidad entre componentes, pero si has leido mi articulo sobre compartir información entre componentes debes saber que usar un servicio es una buena practica y es la recomendación debido a su mantenibilidad.

Pero antes de entrar en el contexto de Angular, miremos un poco el patrón de diseño que siguen los servicios y es el Singleton, en Javascript, Un Singleton sirve como un recurso compartido el cual aisla la implementación de un contexto global, es decir, puedo referenciarlo en varios lugares y llamar sus funciones. Una implementación sencilla seria:

TS

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class HeroesService {

  private heroes:Heroe[] = [
      {
        nombre: "Aquaman",
        bio: "El poder más reconocido de Aquaman es la capacidad telepática para comunicarse con la vida marina, la cual puede convocar a grandes distancias.",
        img: "assets/img/aquaman.png",
        aparicion: "1941-11-01",
        casa:"DC"
      },
      {
        nombre: "Batman",
        bio: "Los rasgos principales de Batman se resumen en «destreza física, habilidades deductivas y obsesión». La mayor parte de las características básicas de los cómics han variado por las diferentes interpretaciones que le han dado al personaje.",
        img: "assets/img/batman.png",
        aparicion: "1939-05-01",
        casa:"DC"
      },
      {
        nombre: "Daredevil",
        bio: "Al haber perdido la vista, los cuatro sentidos restantes de Daredevil fueron aumentados por la radiación a niveles superhumanos, en el accidente que tuvo cuando era niño. A pesar de su ceguera, puede \"ver\" a través de un \"sexto sentido\" que le sirve como un radar similar al de los murciélagos.",
        img: "assets/img/daredevil.png",
        aparicion: "1964-01-01",
        casa: "Marvel"
      },
      {
        nombre: "Hulk",
        bio: "Su principal poder es su capacidad de aumentar su fuerza hasta niveles prácticamente ilimitados a la vez que aumenta su furia. Dependiendo de qué personalidad de Hulk esté al mando en ese momento (el Hulk Banner es el más débil, pero lo compensa con su inteligencia).",
        img: "assets/img/hulk.png",
        aparicion: "1962-05-01",
        casa:"Marvel"
      },
      {
        nombre: "Linterna Verde",
        bio: "Poseedor del anillo de poder que posee la capacidad de crear manifestaciones de luz sólida mediante la utilización del pensamiento. Es alimentado por la Llama Verde (revisada por escritores posteriores como un poder místico llamado Starheart), una llama mágica contenida en dentro de un orbe (el orbe era en realidad un meteorito verde de metal que cayó a la Tierra, el cual encontró un fabricante de lámparas llamado Chang)",
        img: "assets/img/linterna-verde.png",
        aparicion: "1940-06-01",
        casa: "DC"
      },
      {
        nombre: "Spider-Man",
        bio: "Tras ser mordido por una araña radiactiva, obtuvo los siguientes poderes sobrehumanos, una gran fuerza, agilidad, poder trepar por paredes. La fuerza de Spider-Man le permite levantar 10 toneladas o más. Gracias a esta gran fuerza Spider-Man puede realizar saltos íncreibles. Un \"sentido arácnido\", que le permite saber si un peligro se cierne sobre él, antes de que suceda. En ocasiones este puede llevar a Spider-Man al origen del peligro.",
        img: "assets/img/spiderman.png",
        aparicion: "1962-08-01",
        casa: "Marvel"
      },
      {
        nombre: "Wolverine",
        bio: "En el universo ficticio de Marvel, Wolverine posee poderes regenerativos que pueden curar cualquier herida, por mortal que ésta sea, además ese mismo poder hace que sea inmune a cualquier enfermedad existente en la Tierra y algunas extraterrestres . Posee también una fuerza sobrehumana, que si bien no se compara con la de otros superhéroes como Hulk, sí sobrepasa la de cualquier humano.",
        img: "assets/img/wolverine.png",
        aparicion: "1974-11-01",
        casa: "Marvel"
      }
    ]


  constructor() {
    console.log('Servicio lista para usar!!!');
  }

  getHeroes():Heroe[]{
    return this.heroes;
  }
}

export interface Heroe{
  nombre: string;
  bio: string;
  img: string;
  aparicion: string;
  casa: string;
}

          

TS

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { PersonasModel } from '../models/personas.model';

@Injectable({
  providedIn: 'root'
})
export class PersonasService {

  private url = 'http://localhost:3000/personas/';

  constructor(private http: HttpClient) { }

  consultarGente(): Observable<PersonasModel[]>{
    return this.http.get<PersonasModel[]>(this.url);
  }

  consultar(idPersonas: string): Observable<any>{
    return this.http.get<PersonasModel>(this.url + idPersonas);
  }

  guardar(datosPersonas: PersonasModel): Observable<PersonasModel>{
    return this.http.post<PersonasModel>(this.url, datosPersonas);
  }

  actualizar(datosPersonas: PersonasModel): Observable<PersonasModel>{
    return this.http.put<PersonasModel>(this.url + datosPersonas.id, datosPersonas);
  }

  eliminar(idEliminar: string): Observable<PersonasModel>{
    return this.http.delete<PersonasModel>(`${this.url}${idEliminar}`)
  }

}

    

Leer más

Angular - Requerimientos de instalación local

Angular (comúnmente llamado "Angular 2+" o "Angular 2"), es un framework para aplicaciones web desarrollado en TypeScript, de código abierto, mantenido por Google, que se utiliza para crear y mantener aplicaciones web de una sola página. Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el desarrollo y las pruebas sean más fáciles.

La biblioteca lee el HTML que contiene atributos de las etiquetas personalizadas adicionales, entonces obedece a las directivas de los atributos personalizados, y une las piezas de entrada o salida de la página a un modelo representado por las variables estándar de JavaScript.

Angular se basa en clases tipo "Componentes", cuyas propiedades son las usada para hacer el binding de lo datos. En dichas clases tenemos propiedades (variables) y métodos (funciones a llamar).

1. NodeJS: https://nodejs.org/es/
2. Google Chrome: https://www.google.es/chrome/browser/desktop/
3. TypeScript: http://www.typescriptlang.org/
4. Angular CLI https://cli.angular.io/
https://github.com/angular/angular-cli
5. Ionic http://ionicframework.com/getting-started/

Editores de Texto:

Atom

https://atom.io/

Visual Studio Code

https://code.visualstudio.com/

Plugins recomendados para los siguientes editores:

ATOM

• Angular 2 Type Script Snippets
• Atom Bootstrap3
• Atom Typescript
• File Icons
• Platformio Ide Terminal
• V Bootstrap4

Visual Studio Code

• Angular 2 TypeScript Emmet 

• Angular 5 Snippets – TypeScript, Html, Angular Material... 

• Angular Language Service 

• Angular v5 Snippets 

• Angular2-inline 

• Bootstrap 4 & Font Awesome snippets 

• HTML CSS Support 

• JavaScript (ES6) code snippets 

• JS-CSS-HTML Formatter 

• JSHint 

• Material Icon Theme
• Prettier – Code Formatter 

• Terminal 

• TSLint 

• TypeScript Hero 

• TypeScript Importer

TRABAJANDO CON PRIME NG

TS

//------------------------//
//--CREAR NUEVO PROYECTO--//
//------------------------//
ng new project
//SE ESCOGE LOS ESTILOS GENERALES CON SASS

//----------------------//
//--ENTRAR AL PROYECTO--//
//----------------------//
cd project

//-------------------------//
//--INSTALAR DEPENDENCIAS--//
//-------------------------//
npm install primeng --save
npm install primeicons --save

//---------------------------//
//--INSTALAR LA ANIMACIONES POR CONSOLA GENERAL y parado en el proyecto--//
//---------------------------//
npm install @angular/animations --save

//---------------------------------------------//
//--IMPORTAMOS LAS ANIMACIONES EN APP MODULES--//
//---------------------------------------------//
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
BrowserAnimationsModule

//---------------------------------------------------------------//
//--ACTUALIZAR LOS ESTILOS DEL ARCHIVO: project/src/styles.scss--//
//---------------------------------------------------------------//
@import '~primeicons/primeicons.css';
@import '~primeng/resources/themes/nova-light/theme.css';
@import '~primeng/resources/primeng.min.css';


//---------------------------------------------------------------//
//--ACTUALIZAMOS LAS DEPENDENCIAS DE "project/src/package.json"--//
//---------------------------------------------------------------//
"dependencies": {
"@angular/animations": "^8.0.0",
"@angular/cdk": "^8.0.0",
"@angular/common": "~8.0.0",
"@angular/compiler": "~8.0.0",
"@angular/core": "~8.0.0",
"@angular/forms": "~8.0.0",
"@angular/platform-browser": "~8.0.0",
"@angular/platform-browser-dynamic": "~8.0.0",
"@angular/router": "~8.0.0",
"core-js": "^2.5.4",
"primeflex": "^1.0.0-rc.1",
"primeicons": "^1.0.0",
"primeng": "^8.0.0-rc.1",
"rxjs": "~6.5.2",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},

//-------------------------------------------------------------------//
//--ACTUALIZAR LOS ESTILOS EN EL ARCHIVO "project/src/angular.json"--//
//-------------------------------------------------------------------//
"styles": [
"src/styles.scss",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],

//REVISAR QUE TODO ESTE GUARDADO Y EJECUTAMOS EN CONSOLA DE VISUAL:
npm i
//CERRAR Y ABRIR EL VISUAL STUDIO CODE

Leer más