ANG_FRONT

Práctica 16. Proyecto práctica API rick and morty

Objetivo de la práctica

• Ver a los personajes realizar una pequeña búsqueda o poder filtrar en el servicio el nombre que deseo buscar.

Duración aproximada

• 115 minutos.

Instrucciones

• Pagina donde se encuentra la API
• Link

Ejemplo

• RickandMorty

• Requisitos de ambiente

Nodejs v14 Angular v12.0.5

Instalar nvm y la instalacion del Nodejs y la ver

1. Paso 1: Desinstalar Node.js (si ya está instalado)

• Si tienes una versión diferente de Node.js instalada, desinstálala primero. La forma de hacerlo dependerá de tu sistema operativo:

• Windows: Ir al Panel de Control > Programas > Desinstalar un programa, y buscar Node.js.

• macOS: Puedes usar Homebrew para desinstalarlo:

brew uninstall node

Linux: Usar el gestor de paquetes correspondiente (como apt, yum, etc.) para desinstalar Node.js.

1. Paso 2: Instalar Node.js versión 14.

• Usar Node Version Manager (NVM):

• La forma más fácil de gestionar versiones de Node.js es mediante NVM. Si no lo tienes instalado, puedes hacerlo así:

Instalar NVM:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash

• Cerrar y volver a abrir la terminal, o ejecutar:

source ~/.bashrc

• Instalar Node.js versión 14:

nvm install 14

• Usar Node.js versión 14:

nvm use 14

• Verificar la instalación:

node -v

Deberías ver algo como v14.x.x.

• Instalación manual:

• Si prefieres no usar NVM, puedes descargar el instalador de Node.js versión 14 directamente desde nodejs.org y seguir las instrucciones de instalación según tu sistema operativo.

1. Paso 3: Verificar la instalación de Angular.
   • Una vez que hayas instalado Node.js versión 14, puedes verificar o instalar Angular CLI:

npm install -g @angular/cli@12.0.5

1. Paso 4: Crear un nuevo proyecto
   • Ahora puedes crear un nuevo proyecto Angular con la versión deseada:

ng new rick-and-morty
cd rick-and-morty

Estructura que vamos a manejar

rick-and-morty/
│
|── e2e/
│
├── node_modules/
│
└── src/
├── app/
│ ├── components/
│ │ ├── pages/
│ │ │ ├── characters/
│ │ │ │ ├── character-detail/
│ │ │ │ │ ├── character-detail.routing.module.ts
│ │ │ │ │ ├── character-detail.component.html
│ │ │ │ │ ├── character-detail.component.scss
│ │ │ │ │ ├── character-detail.component.ts
│ │ │ │ │ ├── character-detail.component.spec.ts
│ │ │ │ │ └── character-detail.module.ts
│ │ │ │ └── character-list/
│ │ │ │ ├── character-list.routing.module.ts
│ │ │ │ ├── character-list.component.html
│ │ │ │ ├── character-list.component.scss
│ │ │ │ ├── character-list.component.ts
│ │ │ │ ├── character-list.component.spec.ts
│ │ │ │ └── character-list.module.ts
│ │ │ └── home/
│ │ │ ├── home.routing.module.ts
│ │ │ ├── home.component.html
│ │ │ ├── home.component.scss
│ │ │ ├── home.component.ts
│ │ │ ├── home.component.spec.ts
│ │ │ └── home.module.ts
│ │ └── shared/
│ │ ├── components/
│ │ │ ├── form-search/
│ │ │ │ └── form-search.component.ts
│ │ │ └── header/
│ │ │ ├── header.component.html
│ │ │ ├── header.component.scss
│ │ │ ├── header.component.ts
│ │ │ └── header.component.spec.ts
│ │ ├── interfaces/
│ │ │ └── character.interfaces.ts
│ │ ├── models/
│ │ │ └── trackHttpError.ts
│ │ └── services/
│ │ ├── character.service.ts
│ │ └── character.service.spec.ts
│ │
│ ├── app.routing.module.ts
│ ├── app.component.html
│ ├── app.component.scss
│ ├── app.component.ts
│ ├── app.component.spec.ts
│ └── app.module.ts
│
├── assets/
│ └── icons/
│
└── environments/
├── environment.prod.ts
└── environment.ts

Instalacion de bibliotecas externas

• Bootstrap

npm install bootstrap

• jQuery

npm install jquery

• Popper.js

npm install @popperjs/core

• ngx-infinite-scroll

npm install ngx-infinite-scroll

Paso 1: Configurar el proyecto.

• Configurar angular.json

• Agrega Bootstrap y jQuery en la sección de estilos y scripts: ```json

“styles”: [ “src/styles.scss”, “node_modules/bootstrap/dist/css/bootstrap.min.css” ], “scripts”: [ “node_modules/jquery/dist/jquery.min.js”, “node_modules/@popperjs/core/dist/umd/popper.min.js” ]

## commands Line para crear Componentes, servicios, module y archivo routing

- Paso 1: Crear un componente.

- Ejemplo de como podriamos crear el componente en la estructura que tenemos con el archivo routing:

```bash

ng generate component app/components/pages/characters/character-list -routing

• Paso 2: Crear un módulo.

ng generate module app/components/pages/characters/characters

• Paso 3: Crear un servicio.

ng generate service app/components/shared/services/character