> For the complete documentation index, see [llms.txt](https://pentester-101.gitbook.io/web-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pentester-101.gitbook.io/web-app/angular/angular.md).

# Angular

Instalando:

```
npm install -g @angular/cli
```

```
ng new <project-name>
ng g c login
```

```
ng serve
npm start
```

***

<figure><img src="/files/hf5CKEgRCbJWViFEgjKK" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.npmjs.com/package/bootstrap>" %}

```
npm i bootstrap
```

Ruta:

```
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
```

<figure><img src="/files/4pyVVfq1ofTzKqwVFnfE" alt=""><figcaption></figcaption></figure>

***

Redirección de rutas:

* Importando:

<figure><img src="/files/HrLL547geuP7FewhA626" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/MvejHj1PSkTR98j6x59n" alt=""><figcaption></figcaption></figure>

* En vez de href usamos routerLink  con el nombre que le dimos a la ruta del component:

<figure><img src="/files/giiazwouaFA4HVslfRRh" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/s6dIviN4MaBTmnXJW9VW" alt=""><figcaption></figcaption></figure>

* Asignando nombre a los componentes:

<figure><img src="/files/FA9vlLjg2pWBXb7pPBB9" alt=""><figcaption></figcaption></figure>

***

* ng class ng style

<figure><img src="/files/22aBDnva4PL8Azc77vPv" alt=""><figcaption></figcaption></figure>

***

#### 1. **`controllers/`**

**Propósito:** Gestionar la lógica de las solicitudes HTTP. Cada controlador maneja las operaciones relacionadas con un recurso (por ejemplo, usuarios).

* **Ejemplo de archivo:**
  * `auth.js`: Controlador para manejar la autenticación de usuarios (login, logout).
  * `usuarios.js`: Controlador para manejar la creación, edición y eliminación de usuarios.

#### 2. **`database/`**

**Propósito:** Configuración de la base de datos, como las conexiones y modelos de datos.

* **Ejemplo de archivo:**
  * `db.js`: Configuración de la conexión a la base de datos (por ejemplo, conexión con MongoDB, MySQL, etc.).

#### 3. **`middlewares/`**

**Propósito:** Contiene funciones intermedias que se ejecutan entre la solicitud del cliente y la respuesta. Aquí puedes colocar la validación y la autenticación.

* **Ejemplo de archivo:**
  * `authMiddleware.js`: Middleware para verificar si el usuario está autenticado (por ejemplo, comprobación de un token JWT).
  * `adminMiddleware.js`: Middleware para comprobar si un usuario tiene privilegios de administrador.

#### 4. **`model/`**

**Propósito:** Definir los esquemas de los modelos de base de datos (por ejemplo, la estructura de un usuario).

* **Ejemplo de archivo:**
  * `usuario.js`: Modelo para la entidad "usuario", definiendo los campos y validaciones.

#### 5. **`routes/`**

**Propósito:** Define las rutas de la API. Cada archivo dentro de esta carpeta tiene las rutas relacionadas con un recurso específico.

* **Ejemplo de archivo:**
  * `auth.js`: Define las rutas de autenticación (login, logout).
  * `usuarios.js`: Define las rutas relacionadas con usuarios (crear, obtener, editar, eliminar usuarios).

#### 6. **Archivos raíz**

* **`.env`**: Archivo de variables de entorno, donde puedes almacenar configuraciones sensibles como claves de API, cadenas de conexión de base de datos, etc.
* **`index.js`**: Archivo principal donde inicializas la aplicación de Express, conectas la base de datos y configuras las rutas.
* **`package.json`**: Configuración del proyecto, dependencias, scripts, etc.
* **`package-lock.json`**: Bloqueo de versiones de dependencias para garantizar que el proyecto tenga las mismas dependencias en diferentes máquinas.

#### Sugerencias para organizar el código:

1. **Controladores** deben ser responsables solo de la lógica de negocio. No deben tener la lógica de la base de datos o de autenticación.
2. **Middlewares** deben ser pequeños y reutilizables. Si tienes un middleware muy grande, considera dividirlo.
3. **Modelos** deben contener solo las definiciones y validaciones de las estructuras de datos, sin incluir lógica de negocio.
4. **Rutas** deben estar lo más delgadas posible. Solo deberían asignar las solicitudes a sus respectivos controladores.