# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pentester-101.gitbook.io/web-app/angular/angular.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.