Creación de componentes y rutas en Angular para gestión de tareas

Clase 3 de 71 • Curso de Angular: Creación de Aplicaciones Web

Resumen

¿Cómo crear una aplicación más ambiciosa con Angular?

Si ya has dado tus primeros pasos con Angular y creado una aplicación sencilla, es momento de ser más ambicioso. Una de las mejores maneras de ampliar tus habilidades es embarcándote en un proyecto de gestión de tareas. En este artículo, te explicaremos cómo darle vida a esta idea utilizando Angular, particularmente mediante la creación de nuevos componentes y el manejo del routing.

¿Cómo generar nuevos componentes en Angular?

Para crear componentes que añadan funcionalidad a tu aplicación, puedes seguir estos pasos:

Abre la terminal: Utilizaremos comandos de Angular CLI para generar los componentes.
Utiliza el comando de generación: Escribe ng g component seguido de la ruta donde deseas crear el componente. Si deseas organizarlos, es útil crear una carpeta llamada pages.
Crea componentes específicos: Por ejemplo, puedes comenzar con un componente home para tu aplicación principal y otro labs para experimentar con las características de Angular.

Ejemplo de comando:

ng g component pages/home
ng g component pages/labs

Cada componente recién creado incluirá archivos para estilos (CSS), estructura (HTML) y lógica (TypeScript), lo que facilita la organización del proyecto.

¿Cómo implementar routing básico en Angular?

El routing permite que diferentes secciones de tu aplicación se redirijan y funcionen de manera separada. Esto es esencial para mantener una lógica clara y dividida en nuestra aplicación.

Importar los componentes: En el archivo app.routes.ts, importa los componentes que deseas utilizar en las rutas.

import { HomeComponent } from './pages/home/home.component';
import { LabsComponent } from './pages/labs/labs.component';

Definir las rutas: Configura las rutas para cada componente, indicando el path y el component.

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'labs', component: LabsComponent },
  { path: '', component: HomeComponent } // Ruta por defecto
];

Modificar el componente principal: Usa <router-outlet></router-outlet> en el componente principal para que se rendericen los componentes en las rutas definidas.
```
<router-outlet></router-outlet>
```

¿Cuáles son los pasos para mejorar el aspecto visual?

Una buena aplicación no solo debe funcionar bien, sino también tener un buen diseño. Aunque en este artículo no profundizaremos mucho en estilos, aquí te ofrecemos algunas pautas:

Referencia de estilos globales: Incluye estilos globales en el archivo styles.css. Este archivo afecta a todos los componentes de la aplicación.
Estilos específicos para componentes: Cada componente tiene su propio archivo CSS. Los estilos aquí solo afectan a su respectivo componente, lo cual es útil para mantener la encapsulación.
Aplicación de un diseño base: Usa una URL de Gist o recursos predefinidos que incluyan un conjunto básico de estilos globales para comenzar.

¿Por qué es importante dividir las responsabilidades en Angular?

Dividir responsabilidades es clave para el mantenimiento y la escalabilidad de cualquier aplicación. Angular facilita esto al:

Encapsular lógica y vista: Cada componente maneja su HTML, CSS y lógica de negocio.
Clarificar el flujo de trabajo: Mediante el uso de rutas y componentes bien definidos, es fácil seguir el flujo y la funcionalidad de la aplicación.
Fomentar la reutilización: Componentes bien diseñados pueden ser reutilizados en diferentes partes de la aplicación o incluso en proyectos futuros.

Con estas prácticas, podrás llevar tu aplicación Angular a un nuevo nivel de complejidad y funcionalidad. ¡Continúa explorando y experimentando para dominar Angular!

Daniel Felipe Diaz Rodriguez

student•

acá les dejo el ccs usado en la clase

/* You can add global styles to this file, and also import other style files */
html,
body {
  margin: 0;
  padding: 0;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 100%;
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Roboto", sans-serif;
  background: #f5f5f5;
  color: #111111;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
}

:focus {
  outline: 0;
}

Juan Esteban Valdés Ospina

student•

Muchas gracias , aclaro que este css se pone en styles.css dentro la carpeta app.

Juan Esteban Valdés Ospina

student•

Es dentro la carpeta src**

Daniel Felipe Diaz Rodriguez

student•

acá esta el css del home

.container {
    min-width: 230px;
    max-width: 550px;
    margin: 0 auto;
  }
  
  .header {
    background-image: linear-gradient(
      224deg,
      hsl(240deg 100% 50%) 2%,
      hsl(249deg 100% 59%) 63%,
      hsl(252deg 99% 64%) 78%,
      hsl(253deg 98% 68%) 87%,
      hsl(254deg 96% 73%) 92%,
      hsl(253deg 93% 77%) 96%,
      hsl(251deg 89% 81%) 98%,
      hsl(246deg 81% 85%) 99%,
      hsl(232deg 68% 88%) 100%,
      hsl(200deg 53% 90%) 100%
    );
    padding-bottom: 4rem;
  }
  
  .hidden {
    display: none;
  }
  
  .todoapp-wrapper {
    position: relative;
    top: -40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  
  .todoapp input::-webkit-input-placeholder {
    font-style: italic;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
  }
  
  .todoapp input::-moz-placeholder {
    font-style: italic;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
  }
  
  .todoapp input::input-placeholder {
    font-style: italic;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
  }
  
  .header h1 {
    width: 100%;
    font-size: 3rem;
    font-weight: 200;
    color: white;
    padding-top: 2rem;
    margin: 0;
  }
  
  .header h1 + p {
    margin: 0;
    color: white;
    padding-bottom: 1.2rem;
  }
  
  .new-todo,
  .edit {
    position: relative;
    margin: 0;
    width: 100%;
    font-size: 24px;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.4em;
    color: inherit;
    padding: 6px;
    border: 1px solid #999;
    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .new-todo {
    padding: 2rem;
    height: 65px;
    border: none;
    background: white;
    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
    border-radius: 8px;
  }
  
  .main {
    position: relative;
    z-index: 2;
    border-top: 1px solid #e6e6e6;
  }
  
  .toggle-all {
    width: 1px;
    height: 1px;
    border: none;
    /* Mobile Safari */
    opacity: 0;
    position: absolute;
    right: 100%;
    bottom: 100%;
  }
  
  .toggle-all + label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 65px;
    font-size: 0;
    position: absolute;
    top: -65px;
    left: -0;
  }
  
  .toggle-all + label:before {
    content: "❯";
    display: inline-block;
    font-size: 22px;
    color: #949494;
    padding: 10px 27px 10px 27px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  
  .toggle-all:checked + label:before {
    color: #484848;
  }
  
  .todo-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .todo-list li {
    position: relative;
    font-size: 24px;
    border-bottom: 1px solid #ededed;
    padding: 0rem 1rem;
  }
  
  .todo-list li:last-child {
    border-bottom: none;
  }
  
  .todo-list li.editing {
    border-bottom: none;
    padding: 0;
  }
  
  .todo-list li.editing .edit {
    display: block;
    width: calc(100% - 4rem);
    padding: 12px 16px;
    margin: 0 0 0 4rem;
  }
  
  .todo-list li.editing .view {
    display: none;
  }
  
  .todo-list li .toggle {
    text-align: center;
    width: 40px;
    /* auto, since non-WebKit browsers doesn't support input styling */
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    border: none;
    /* Mobile Safari */
    -webkit-appearance: none;
    appearance: none;
  }
  
  .todo-list li .toggle {
    opacity: 0;
  }
  
  .todo-list li .toggle + label {
    /*
          Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
          IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
      */
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center left;
  }
  
  .todo-list li .toggle:checked + label {
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E");
  }
  
  .todo-list li label {
    word-break: break-all;
    padding: 15px 15px 15px 60px;
    display: block;
    line-height: 1.2;
    transition: color 0.4s;
    font-weight: 400;
    color: #484848;
  }
  
  .todo-list li.completed label {
    color: #949494;
    text-decoration: line-through;
  }
  
  .todo-list li .destroy {
    display: none;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: auto 0;
    font-size: 30px;
    color: #949494;
    transition: color 0.2s ease-out;
  }
  
  .todo-list li .destroy:hover,
  .todo-list li .destroy:focus {
    color: #c18585;
  }
  
  .todo-list li .destroy:after {
    content: "×";
    display: block;
    height: 100%;
    line-height: 1.1;
  }
  
  .todo-list li:hover .destroy {
    display: block;
  }
  
  .todo-list li .edit {
    display: none;
  }
  
  .todo-list li.editing:last-child {
    margin-bottom: -1px;
  }
  
  .footer {
    padding: 1rem 1.5rem;
    height: 20px;
    text-align: center;
    font-size: 15px;
    border-top: 1px solid #e6e6e6;
  }
  
  .todo-count {
    float: left;
    text-align: left;
  }
  
  .todo-count strong {
    font-weight: 300;
  }
  
  .filters {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    right: 0;
    left: 0;
  }
  
  .filters li {
    display: inline;
  }
  
  .filters li a {
    color: inherit;
    margin: 3px;
    padding: 3px 7px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 3px;
  }
  
  .filters li a:hover {
    border-color: #6e49fe;
  }
  
  .filters li a.selected {
    border-color: #4c33b1;
  }
  
  .clear-completed,
  html .clear-completed:active {
    float: right;
    position: relative;
    line-height: 19px;
    text-decoration: none;
    cursor: pointer;
  }
  
  .clear-completed:hover {
    text-decoration: underline;
  }
  
  .info {
    margin: 65px auto 0;
    color: #4d4d4d;
    font-size: 11px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    text-align: center;
  }
  
  .info p {
    line-height: 1;
  }
  
  .info a {
    color: inherit;
    text-decoration: none;
    font-weight: 400;
  }
  
  .info a:hover {
    text-decoration: underline;
  }
  
  /*
      Hack to remove background from Mobile Safari.
      Can't use it globally since it destroys checkboxes in Firefox
  */
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .toggle-all,
    .todo-list li .toggle {
      background: none;
    }
  
    .todo-list li .toggle {
      height: 40px;
    }
  }
  
  @media (max-width: 430px) {
    .footer {
      height: 50px;
    }
  
    .filters {
      bottom: 10px;
    }
  }

Daniel Felipe Diaz Rodriguez

student•

acá esta el html del home

<section class="todoapp">
    <header class="header">
      <div class="container">
        <h2>My Day</h2>
        <p>All my tasks in one place</p>
        <input
          class="new-todo"
          placeholder="Type new todo"
          autofocus
          type="text"
        />
      </div>
    </header>
    <div class="container todoapp-wrapper">
      <!-- This section should be hidden by default and shown when there are todos -->
      <section class="main">
        <ul class="todo-list">
          <li class="completed">
            <div class="view">
              <input class="toggle" type="checkbox" checked />
              <label>Learn JavaScript</label>
              <button class="destroy"></button>
            </div>
            <input class="edit" value="Learn JavaScript" />
          </li>
          <li>
            <div class="view">
              <input class="toggle" type="checkbox" />
              <label>Buy a unicorn</label>
              <button class="destroy"></button>
            </div>
            <input class="edit" value="Buy a unicorn" />
          </li>
          <li class="editing">
            <div class="view">
              <input class="toggle" type="checkbox" />
              <label>Make dishes</label>
              <button class="destroy"></button>
            </div>
            <input class="edit" value="Make dishes" />
          </li>
        </ul>
      </section>
      <!-- This footer should be hidden by default and shown when there are todos -->
      <footer class="footer">
        <!-- This should be `0 items left` by default -->
        <span class="todo-count"><strong>0</strong> item left</span>
        <!-- Remove this if you don't implement routing -->
        <ul class="filters">
          <li>
            <a routerLink="/" class="selected">All</a>
          </li>
          <li>
            <a routerLink="/pending">Pending</a>
          </li>
          <li>
            <a routerLink="/completed">Completed</a>
          </li>
        </ul>
        <!-- Hidden if no completed items are left ↓ -->
        <button class="clear-completed">Clear completed</button>
      </footer>
    </div>
  </section>

Mane Miranda

student•

Gracias !!!!

Reymundo Fernando Figueroa Romo

student•

Excelente aporte, solo una cosa de nada, el html en el titulo hay que cambiar la etiqueta h2 por un h1 para que los estilos se apliquen correctamente. ¡¡Muchas gracias por el aporte crack!!

Gerardo Estrella

student•

Link del gist para los estilos

https://gist.github.com/nicobytes/ba2252b0b5ac2cbdafc40c0accd24862

Carlos Dugarte

student•

Si usan el comando ng g c components/form --dry-run con el flag --dry-run te ejecuta el comando pero no crea el componente. Es útil cuando quieres verificar que la ruta donde se va a crear el componente sea correcta

Juan manuel Suárez aguirre

student•

me suelta este warning: "The \*ngFor directive was used in the template, but neither the NgFor directive nor the CommonModule was imported. Use Angular's built-in control flow @for or make sure that either the NgFor directive or the CommonModule is included in the @Component.imports array of this component.".

basicamente me pide usar la nueva sintaxis y la lista tampoco se renderiza ;(, en el app.component si funcionaba.

marc gt

student•

Para arreglarlo debes incluir el import de CommonModule. Minuto 2:49, línea 2 y línea 7. :)

Maira Tatiana Quiroga Peralta

student•

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports : [RouterOutlet, CommonModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',

})
export class AppComponent {
  welcome = 'Hola !!';
  tasks = [
    'Instalar en angular en CLI',
    'Crear proyecto',
    'Crear componentes',
  ]
}
```Debes incluir el import { CommonModule } from '@angular/common'; en el archivo app.components.ts yllamarlo dentro de @Component: imports : \[RouterOutlet, CommonModule],

Ismael Melgarejo

student•

¿Alguien tiene el link del repositorio que utilizar el profe?

Hugo Ponce

student•

https://gist.github.com/nicobytes/ba2252b0b5ac2cbdafc40c0accd24862

Gladys Felix

student•

Para los que les marca el siguiente error de 'router-outlet':

'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is included in the '@Component.imports' of this component. 2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.

solo tienen que agregar lo sig:

labs.component.ts

import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-labs',
  standalone: true,
  imports: [RouterModule, CommonModule],
  templateUrl: './labs.component.html',
  styleUrl: './labs.component.css'
})

Pablo Arturo Gonzalez Aldana

student•

Tengo ese error y aplique la posible solución, pero no me funciona

Reinaldo Mendoza

student•

seria bueno tener mas detalle de que es lo que "no funciona"

Juan Luis Oropeza

student•

pues yo instale angular 17 hice el *ngFor y me dio warning y no me cargo la lista:

Lucas Castillo Vasquez

student•

Angular 17 usa otra forma de sintaxis para el ngFor

<h1>Hola este es mi primer proyecto</h1>

<h2>{{welcome}}</h2>

<ul>

@for (task of tasks; track task) {

<li>{{task}}</li>

}

</ul>

Cristian Esquivel

student•

Preferí instalarle tailwind, porque me agiliza mucho el hacer los estilos

Nicolas Molina

teacher•

Genial tailwind lo vamos a usar para el proyecto del ecommerce en este mismo curso

Kenet Andrés Chungandro Montenegro

student•

Tania Andrea Chavez Ortiz

student•

Cuando accedo a la URL del home o de labs , no esta cargando la pagina , carga el html que viene por defecto , a alguien mas le sucede me podrian ayudar por favor

Willerenver Terrero

student•

si cambias a la ruta 127.0.0.1:4200/home deberia funcionarte al parece tiene que ver algo con el router. pero no se porque pasa con el tema del localhost:4200/home no te redirecicona si no que va devuelta al appComponent

Willerenver Terrero

student•

puede ser algo con el caso del firmware. estoy investigando. pero si te funciona favor dejarme saber

Carlos Fernando Rojas Barja

student•

Aca dejo el link de gist para los styles.css y home.component.css and home.component.html

Angular Course · GitHub

Carlos Mauricio Alarcon Casallas

student•

¿Porque al instructor le sale automáticamente la importación del CommonModule cuando crea un componente? en mi caso y, aunque tengo versión 17 de angular, al crear un componente no me aparece y tengo que importarlo manualmente, de lo contrario ngFor no me servirá. ¿Existe un modo más práctico de importarlo globalmente?

Jesus Maria Gonzalez Guardo

student•

Instalando alguna extension como Angular 17 Snippets

edward.arroyave

student•

cursos turbo

Reinaldo Mendoza

student•

eso parece, por ahora no mucho de angular power

geovanni perez polo

student•

En Angular, los estilos se pueden aplicar de manera global a través del archivo styles.css, lo cual afecta a toda la aplicación, o de forma específica en cada componente con su propio archivo de estilos, como home.component.css. Esto permite encapsular estilos y evitar conflictos.

Carlos Gutiérrez

student•

Les recomiendo a los usuarios nuevos que vean la ayuda que tiene el mismo angular desde el cli usando la bandera --help por ejemplo:

$ng --help
$ng g c --help
$ng g s --help
$ng serve --help
$ng doc --help

```No tienen que aprender las opciones, simplemente revisar como se usan con la ayuda.

Pamela Pinzón

student•

Cuando compilaba en la web, en la vista de labs no me cargaba la lista, esto fue debido a que en labs.component.ts me faltaba añadir la siguiente línea de código:

import { CommonModule } from '@angular/common';

Alejandro Cordoba Lozano

student•

Los estilos a nivel de componente tienen prioridad sobre los globales? ¿Que ocurre si existen conflictos sobre una misma clase? y cuales son las buenas practicas en relación a este asunto? Gracias!

Glenda López

student•

Gracias .

Adicionalmente se debe incluir la importación , para los que somo nuevos en angular: <import { CommonModule } from '@angular/common';>

Carlos Andrés Pupiales Córdoba

student•

Que pasa Platzi, los 3 servidores caidos??