10.Construcción Completa

Objetivo

Construir una aplicación completa en Angular utilizando los conceptos aprendidos.

Componentes

Crea y utiliza componentes para dividir tu aplicación en partes reutilizables.

Servicios

Implementa servicios para manejar la lógica de negocio y la comunicación con APIs.

Directivas

Utiliza directivas para manipular el DOM de manera eficiente.

Enrutamiento

Configura el enrutamiento para navegar entre diferentes vistas o componentes.

Formularios

Crea y maneja formularios reactivos para la entrada de datos del usuario.

HTTP Client

Realiza solicitudes HTTP para interactuar con APIs y servicios web.

Pipes

Utiliza pipes para transformar datos en las plantillas.

Construcción del Proyecto

Combina todos los conceptos aprendidos para construir una aplicación completa en Angular. Aquí hay un ejemplo de cómo se vería el código de un proyecto completo que implementa todos estos conceptos:

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyComponent } from './my-component/my-component.component';
import { MyCustomPipe } from './my-custom.pipe';

@NgModule({
  declarations.[
    AppComponent,
    MyComponent,
    MyCustomPipe
  ],
  imports.[
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers.[],
  bootstrap.[AppComponent]
})
export class AppModule { }

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MyComponent } from './my-component/my-component.component';

const routes.Routes = [
  { path.'', redirectTo.'/my-component', pathMatch.'full' },
  { path.'my-component', component.MyComponent }
];

@NgModule({
  imports.[RouterModule.forRoot(routes)],
  exports.[RouterModule]
})
export class AppRoutingModule { }

// src/app/my-service.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn.'root'
})
export class MyService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http.HttpClient) {}

  getPosts().Observable {
    return this.http.get(this.apiUrl);
  }

  getMessage().string {
    return 'Mensaje desde el Servicio';
  }
}

// src/app/my-component/my-component.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MyService } from '../my-service.service';

@Component({
  selector.'app-my-component',
  templateUrl.'./my-component.component.html',
  styleUrls.['./my-component.component.css']
})
export class MyComponent implements OnInit {
  myForm.FormGroup;
  posts.any[] = [];
  message.string = '';

  constructor(private fb.FormBuilder, private myService.MyService) {
    this.myForm = this.fb.group({
      name.['', Validators.required],
      email.['', [Validators.required, Validators.email]]
    });
  }

  ngOnInit().void {
    this.message = this.myService.getMessage();
    this.myService.getPosts().subscribe(data => {
      this.posts = data;
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      console.log('Formulario Enviado', this.myForm.value);
    } else {
      console.log('Formulario Inválido');
    }
  }
}

// src/app/my-component/my-component.component.html
<div *ngIf="message">
  <p>{{ message }}</p>
</div>
<p>{{ 'hola mundo' | myCustom }}</p>

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label for="name">Nombre:</label>
  <input id="name" formControlName="name">
  <div *ngIf="myForm.get('name').invalid && myForm.get('name').touched">
    Nombre es requerido.
  </div>

  <label for="email">Email:</label>
  <input id="email" formControlName="email">
  <div *ngIf="myForm.get('email').invalid && myForm.get('email').touched">
    Proporcione un email válido.
  </div>

  <button type="submit">Enviar</button>
</form>

<ul>
  <li *ngFor="let post of posts">
    <h3>{{ post.title }}</h3>
    <p>{{ post.body }}</p>
  </li>
</ul>

// src/app/my-custom.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name.'myCustom'
})
export class MyCustomPipe implements PipeTransform {
  transform(value.string).string {
    return value.toUpperCase();
  }
}

Conceptos Básicos

Combinar todos los conceptos aprendidos permite construir aplicaciones Angular robustas y escalables. Cada componente, servicio, directiva, formulario, solicitud HTTP y pipe juega un papel crucial en el desarrollo de la aplicación.

Ejercicio

Combina todos los conceptos aprendidos para construir una aplicación completa en Angular. Verifica que todas las funcionalidades se implementen y funcionen correctamente.