10.Código Completo

Objetivo

Proporcionar el código completo para la aplicación de lista de tareas.

Código Completo

A continuación, se muestra el código completo para cada archivo necesario en esta aplicación.

Archivo.src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations.[AppComponent],
  imports.[BrowserModule, IonicModule.forRoot(), AppRoutingModule, FormsModule],
  providers.[{ provide.RouteReuseStrategy, useClass.IonicRouteStrategy }],
  bootstrap.[AppComponent],
})
export class AppModule {}

Archivo.src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes.Routes = [
  {
    path.'',
    redirectTo.'todo',
    pathMatch.'full'
  },
  {
    path.'todo',
    loadChildren.() => import('./todo/todo.module').then(m => m.TodoPageModule)
  },
];

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

Archivo.src/app/todo/todo.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { Routes, RouterModule } from '@angular/router';
import { TodoPage } from './todo.page';

const routes.Routes = [
  {
    path.'',
    component.TodoPage
  }
];

@NgModule({
  imports.[
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations.[TodoPage]
})
export class TodoPageModule {}

Archivo.src/app/todo/todo.page.ts

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

@Component({
  selector.'app-todo',
  templateUrl.'./todo.page.html',
  styleUrls.['./todo.page.scss'],
})
export class TodoPage {
  newTask.string = '';
  tasks.string[] = [];

  constructor() { }

  addTask() {
    if (this.newTask.trim().length === 0) {
      return;
    }
    this.tasks.push(this.newTask);
    this.newTask = '';
  }

  removeTask(index.number) {
    this.tasks.splice(index, 1);
  }
}

Archivo.src/app/todo/todo.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      To-Do List
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-item>
    <ion-label position="floating">Nueva Tarea</ion-label>
    <ion-input [(ngModel)]="newTask"></ion-input>
  </ion-item>
  <ion-button expand="full" (click)="addTask()">Agregar Tarea</ion-button>

  <ion-list>
    <ion-item *ngFor="let task of tasks; let i = index">
      {{ task }}
      <ion-button fill="clear" slot="end" (click)="removeTask(i)">
        <ion-icon name="trash" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-item>
  </ion-list>
</ion-content>

Archivo.src/app/todo/todo.page.scss

/* Estilos personalizados para la página de tareas */

Capacitor Configuration

Archivo.capacitor.config.ts

import { CapacitorConfig } from '@capacitor/cli';

const config.CapacitorConfig = {
  appId.'com.example.todoapp',
  appName.'TodoApp',
  webDir.'www',
  bundledWebRuntime.false
};

export default config;

Este archivo paso10.html proporciona el código completo necesario para que la aplicación de lista de tareas funcione correctamente, incluyendo la configuración básica de Capacitor.