Objeto: Conjunto de datos estructurados
Los objetos en Angular se usan para almacenar datos estructurados. Puedes usar binding de datos para mostrar las propiedades del objeto en las plantillas
import { Component } from '@angular/core';
// objeto-persona.component.ts
@Component({
selector: 'app-objeto-persona', standalone: true,
imports: [],
template:`
<h4>Objeto: Persona, Datos personales con Interpolación de datos </h4>
<p>Nombre: {{persona1.nombre}}, Edad: {{persona1.edad}} años. </p>
<p>Persona 2: {{ persona2.nombre}}, {{persona2.edad}}, {{persona2.sexo}} </p>
`,
styles: `[]`
})
export class ObjetoPersonaComponent {
//Objeto = Arreglo
persona1 = { nombre: 'Antonio', edad: 30 };
// Objeto Persona2
persona2 = {nombre: 'Ricardo', edad: 45, sexo: 'masculino'};
}
Objetos y Array: Conjunto de datos de una persona:
Crear nuevo proyecto: ng new conjunto-personas y creamos un componente interface llamado: interface-persona.component.ts
En Angular, las interfaces son tipos de datos personalizados que nos permiten establecer una estructura para los objetos que utilizamos en nuestra aplicación. https://angular.dev/cli/generate/interface#. Los arrays en Angular se usan para almacenar listas de elementos. Puedes usar *ngFor para iterar sobre los elementos del array y mostrarlos en la plantilla.
ng generate interface [name-interface] [type]
ng generate i [name-interface] [type] // interface-persona.component.ts
// Definimos las variables y su unidad de medida, del objeto persona
export interface InterfacePersona {
nombre: string;
edad: number;
sexo:string;
escolaridad:string;
}
Agregamos la logica de programación y agregamos el componente creado al conjunto-personas.component.ts
// conjunto-personas.component.ts
import { Component } from '@angular/core';
// Importando la clase: interface interface-persona
import { InterfacePersona } from './interface-persona';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-conjunto-personas', standalone: true,
imports: [CommonModule],
template: `
<h4>Array de Objetos: Personas, Datos personales </h4>
<!--Dime = variable temporal de almacenamiento de los "datos = objeto persona", de "Personas"-->
<ul>
<li *ngFor="let Dime of Personas ">
{{ Dime.nombre}}, {{Dime.edad}}, {{Dime.sexo}}, {{Dime.escolaridad}}
</li>
</ul>
`,
styles: `[]`
})
export class ConjuntoPersonasComponent {
// Array de Objetos: Personas
Personas:InterfacePersona [] = [
{ nombre: 'Richar', edad: 23, sexo: 'masculino', escolaridad: 'universidad' },
{ nombre: 'Marcos', edad: 56, sexo: 'masculino', escolaridad: 'licenciado' } ,
{ nombre: 'Selina', edad: 26, sexo: 'femenino', escolaridad: 'abogada' } ,
{ nombre: 'Romeo', edad: 36, sexo: 'masculino', escolaridad: 'secundaria' } ,
]
}
Formulario para Guardar Datos en una Base de Datos Local, angular v18
Crear un Nuevo Proyecto Angular:ng new database-app
cd database-app
// creando componente: example
ng g c example
// abriendo en editor de codigo: Visual Studio Code
code .
Instalar Angular Forms y HttpClient:
npm install @angular/forms @angular/common/http
Configurar el Módulo Principal: app.component.ts
// app.component.ts:
import { Component } from '@angular/core';
// Agregando clase ExampleComponent
import { ExampleComponent } from './example/example.component';
@Component({
selector: 'app-root',
standalone: true,
// declarations:
imports: [ExampleComponent ],
template:` <app-example/> `,
styles:`[]`
})
export class AppComponent { }
Configurar el Archivo: app.config.ts
// Archivo: app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
// Importando la clase o modulo
import { provideHttpClient } from '@angular/common/http';
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes), provideClientHydration(),
// Agregando el servicio y funcion HttpClient()
provideHttpClient() ,
]
};
Configurar el Componente: example.component.ts:
// example.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-example',
standalone: true,
imports: [FormsModule, ],
templateUrl: './example.component.html',
styles: `[]`
})
export class ExampleComponent {
model = {
name: '',
email: ''
};
constructor(private http: HttpClient) {}
onSubmit() {
this.http.post('http://localhost:3000/users', this.model)
.subscribe(response => {
console.log('Data saved:', response);
});
}
}
Configurar archivo: example.component.html:
<form (ngSubmit)="onSubmit()" #form="ngForm">
<label for="name">Name:</label>
<input type="text" id="name" required [(ngModel)]="model.name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" required [(ngModel)]="model.email" name="email">
<button type="submit" [disabled]="!form.valid">Submit</button>
</form>
Configuración del servidor backend con JSON Server:
Este código de Angular junto con el JSON Server permite crear y gestionar un formulario reactivo que guarda los datos en una base de datos local simulada.
API using HttpClient | Angular 18 - | Angular CRUD https://youtu.be/IXcMAHdJy3o?t=375
1- Instala JSON Server:
// bash
npm install -g json-server
// Entrando a la carpeta del proyecto APP
cd database-app 2- Crea un archivo db.json en la raíz de tu proyecto con el siguiente contenido:
//Creando el archivo: db.json y agreando el contenido
{ "users": [] }
3- Inicia JSON Server:
// bash
json-server --watch db.json --port 3000
C:\ANGULAR-v18\Cmder_Consola\database-app (master)
json-server --watch db.json --port 3000
\{^_^}/ hi!
Loading db.json
Done
Resources
http://localhost:3000/users
Home
http://localhost:3000
4. Agregar al archivo app.config.ts el servicio provideHttpClient y funcion provideHttpClient()
// Archivo: app.config.ts
// Importando la clase o modulo
import { provideHttpClient } from '@angular/common/http';
export const appConfig: ApplicationConfig = {
providers: [
// Agregando el servicio y funcion HttpClient()
provideHttpClient() ,
]
};
5. Archivo template:
// database2.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-database2',
standalone: true,
imports: [FormsModule, ],
template: `
<form (ngSubmit)="onSubmit()" #form="ngForm">
<label for="name">Name:</label>
<input type="text" id="name" required [(ngModel)]="model.name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" required [(ngModel)]="model.email" name="email">
<button type="submit" [disabled]="!form.valid">Submit</button>
</form>
`,
styles: `[]`
})
export class DataBase2Component {
title = 'Data-base2';
model = {
name: '',
email: ''
};
constructor(private http: HttpClient) {}
onSubmit() {
this.http.post('http://localhost:3000/users', this.model)
.subscribe(response => {
console.log('Data saved:', response);
});
}
}
...
...