Cómo crear una web todo app en Angular

Para empezar creamos el proyecto con angular CLI:

ng new notas --routing

Esta vez he puesto el parámetro --routing para que Angular se encargue de generar también el archivo de rutas. En mi caso he llamado a la aplicación "notas".

A continuación lo que hago es ejecutar el comando ng serve para que la aplicación empiece a funcionar mientras desarrollo, por suerte, Angular se recompila cada vez que se guarda un archivo por lo que cada cambio que realices se muestra en la página al instante.

En este punto siempre recomiendo crear un commit de git con la estructura base del proyecto por si necesitas volver atrás.

Siguiente paso, generar los componentes que vayamos a necesitar.

En este caso, voy a crear únicamente un componente para mostrar la lista de notas.

ng generate component notes

El siguiente paso es meter el componente que acabamos de crear en el El router de Angular:

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { NotesComponent } from "./notes/notes.component";

const routes: Routes = [
  { path: "", component: NotesComponent, pathMatch: "full" },
];

No hay que olvidar importar el componente de las notas. Para este tutorial he puesto que la ruta hacia las notas sea vacía, es decir, la página que aparece según abrimos la aplicación web.

Siguiente paso añadir el <router-outlet></router-outlet> para que se muestren las rutas en la página, en este caso en **app.component.html **

<router-outlet></router-outlet>

Tenemos que importar también el módulo de formularios (FormsModule) de Angular en el app.module.ts, dentro de la sección imports:

// app.module.ts

import { FormsModule } from "@angular/forms";

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

import { AppRoutingModule } from "./app-routing.module";

import { AppComponent } from "./app.component";
import { NotesComponent } from "./notes/notes.component";

@NgModule({
  declarations: [AppComponent, NotesComponent],
  imports: [BrowserModule, AppRoutingModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Creando y mostrando notas

Dentro del componente de notas, en el controlador (archivo .ts) voy a crear un array de strings para almacenar las notas (lo inicializo en el constructor para evitar problemas) y otra variable para guardar el texto de la nota que va a ser creada, para ello:

// notes.component.ts

export class NotesComponent implements OnInit {
  notes: string[];
  note: string;

  constructor() {
    this.notes = [];
  }

  ngOnInit() {}
}

Ahora, en el html, recorremos y pintamos las notas tal y como vimos en el Sistema de vistas de Angular. He añadido también un input para crear nuevas notas.

<!-- notes.component.html -->
<h1>Notes</h1>
<div class="notes">
  <ul>
    <li *ngFor="let note of notes">{{ note }}</li>
  </ul>
  <input type="text" [(ngModel)]="note" />
  <button (click)="createNote()">Create note</button>
</div>

He bindeado con ngModel el input a la varibale que he creado antes, y he creado un botón con un evento de click para crear la nota.

Falta crerar el método en el controlador para crear las notas y meterlas en el array:

// notes.component.ts

export class NotesComponent implements OnInit {
  notes: string[];
  note: string;

  constructor() {
    this.notes = [];
  }

  ngOnInit() {}

  createNote() {
    this.notes.push(this.note);
  }
}

Si miras en la página ahora, y la pruebas, te darás cuenta de que se van creando las notas al pulsar el botón y que además no hace falta repintar o recargar el array porque Angular lo actualiza solo.

Si ahora, añades estilos CSS en el archivo .css del componente, te puede quedar la página así:

Yo he puesto los estilos que me han gustado pero tu puedes poner los que quieras.

Te dejo el ejemplo completo más algún detalle por si lo quieres ver:

Ejemplo de todo app creado en Angular