DATOS SOBRE ANGULAR, RECORDEMOS EN ANGULAR TIENE UNA APLICACIÓN QUE SE LLAMA

NODEMON, ESTE ES UN MONITOR QUE SE ENCARGA DE ESTAR REVISANDO QUE SI ALGUN

ARCHIVO CAMBIA EL AUTOMATICAMENTE VA A GENERAR UNA NUEVA COMPILACION Y
ACTULICE LO QUE ME MUESTRA EN PANTALLA

ANGULAR CAMUFLA TODO EL CODIGO QUE CREEMOS

Los eventos son elementos con los cuales vamos a estar interactuando, como botones.

NOSOTROS EN ESTO VAMOS A ESTAR TRABAJANDO EN SPA, SINGLE PAGE APLICACIÓN, PUESTO
QUE VAMOS A ESTAR COLOCANDO TODO LO QUE CREEMOS EN UNA MISMA PAGINA, LA
DIFERENCIA ES QUE VAMOS A ESTAR TRABAJANDO CON DIFERENTES COMPONENTES, Y ESTOS
LOS VAMOS A ESTAR INCLUYENDO EN LA PÁGINA.

Cuando vamos a crear un nuevo proyecto colocamos ng new proyect, para crear componentes ya
no usamos el new. Para crear un modulo usamos ng generate module nombre_modulo. Pero si
quiero generar un componente dentro de ese modulo lo que tengo que hacer es lo siguiente,
primero tengo que estar parado dentro de ese modulo, luego escribo ng generate component,
pero si lo quiero dejar dentro de una carpeta, después de lo anterior escribimos
nombreCarpetaNueva/nombreComponente. Esto me creara los mismos cuatro archivos, el css,
html, ts y el otro

ESTRUCTURA BASICA DE ANGULAR

Para trabajar con Bootstrap dentro de nuestro archivo, tenemos que pegar el link dentro de la
pagina de index, En en encabezado del index

Para mirar desde donde tenemos el repositorio de git, nos vamos a la carpeta que queremos ver y
le damos en git bash here, luego le damos cd .., este nos ira mostrando un paréntesis (master) en
la ruta si se encuentra dentro del control de versiones

Cuando vayamos a instalar/clonar un proyecto tenemos que tener en cuenta que solo
descargamos el archivo src, no descargamos en ng, entonces tenemos que entrar al proyecto y
decirle npm install, para que se instale lo que hace falta, es decir, crea la carpeta que esta faltando

Los valores en html SIEMPRE van a estar como string, a pesar que lo restringamos con tipos de
datos y cosas por el estilo

para iniciar/correr nuestro proyecto voy a la ruta en documentos, le doy cmd. Ahí en el cmd
escribo cd y el nombre del proyecto, luego me va a salir casi la misma ruta pero escribimos “ng
serve -o” para que me corra el proyecto en el navegador que trae por defecto.

En el archivo Main.ts de nuestro proyecto encontraremos una línea de

código .bootstrapModule(AppModule), y el archivo al que se refiere lo que esta dentro del
paréntesis va a ser lo que va a comenzar a ejecutar el proyecto cuando le demos “compilar”. En
cierta manera el main.ts del proyecto principal es necesario porque este es el que se va a ejecutar
cuando se inicialice el proyecto.

Después nos vamos al archivo appModule y aquí nos dice Appcomponent, que este va a ser con el
que va a estar arrancando. En el archivo component.ts nos muestra ciertos datos, uno a tener en
cuenta es el selector, este nos muestra este como se va a estar identificando, en este caso es app-
root, es decir se esta refiriendo al contenido de toda esa pagina o parte del proyecto

Todas los componentes son una clases, class

Una INTERPOLACION es que indicamos desde el html que tenemos una variable en el archivo
component que la vamos a estar mostrando en el html, esto los hacemos colocando el nombre de
la variable entre dos corchetes, {{nombre variable}}
Dentro de estas interpolación tambien podemos realizar operaciones sencillas usando la segunda
forma de actualizar, y mediante vayamos cambiando el valor tambien va a ir cambiando el
resultado, sin la necesidad de llamar al evento

Un elemento particular en typeScrip es su tipado, es importante que identifiquemos que tipo de

dato va a manejar cada variable, por ejemplo en la variable title, tenemos que indicar que tipo de
dato nos estamos refiriendo

De esta manera podemos estar cambiando datos desde el html, tambien podemos estar enviando
datos desde el html, asi nuestro elemento que lo controla. Para poder enviar los datos tenemos
dos formas:

-en este caso no es necesario poner el “name”

1. De esta primera forma lo que hacemos es que mandamos los datos desde el html al
componente,
Podemos crear dos entradas de datos de una vez desde las variables
 Mediante el # le estamos indicando el nombre de esa entrada de texto

Para enviar los datos lo hacemos mediante un método que me reciba datos, y cuando
colocamos los datos que vamos a enviar lo hacemos mediante val1.value, para enviar
solamente el valor (valor 1 es un elemento dom, y para poder acceder al contenido de ese
elemento se necesita usar el .value). tenemos que tener en cuenta que los datos que se
envíen mediante el html siempre van a ser tomados como string, asi que es necesario
hacer la conversión.

Si no creamos el método que los lea nunca vamos a interactuar con estos datos, puesto
que no tenemos acceso, pero una vez lo creamos vamos a poder tener acceso a estos
datos, como si quedara guardado en una variable llamada val1.value

2. La segunda forma es hacer que se carguen los datos como de doble via, es decir si se
actualiza una variable en el html se va a ver afectado el cambio en el archivo componente,
este cambio es importar el modulo FormsModule, mediante la siguiente manera
Import { FormsModule } from ‘@angular/forms’;

Dentro de una clases no es necesario colocar el let puesto que los datos al estar creados
dentro de una clase se entiende que son solo de esa clase, y que para acceder a estos se
hace mediante un método. En otras palabras toma esos datos como atributos de la clase, y
que para poder acceder a estos es necesario colocar el this.
 OBJETOS:
Para crear un objeto recordemos que debe tener una estructura
Además, si queremos crearlo desde la pagina, tenemos que al momento de declararlo, le
tenemos que asignar los valores específicos que este va a tener al iniciar, algo asi como
tenerlo en blanco, de esta manera cuando abramos la pagina por primera vez me va a
inicializar ese objeto pero con los datos en blanco

Al entender como se relacionan y como funcionan los objetos aquí podemos empezar a darles un
mayor grado de complejidad, por ejemplo dentro del teléfono podemos estar colocando un
arreglo de números, o dentro del email podemos estar colocando otro objeto. Asi podemos ir
estructurando los datos en Jason

ESTUDIAR EL FORMATO DE JASON, EN DONDE PODEMOS MIRAR COMO VAMOS A ESTAR

HACIENDO LA ESTRUCTURA DE DATOS, YA NO LO VAMOS A ESTAR MANEJANDO A MANERA DE
TABLAS. PERO CON JASON PODEMOS ESTAR INCORPORANDO MAS ELEMENTOS DENTRO DE LOS
DATOS. PODEMOS BUSCAR MAS SOBRE ESTO EN LA PAGINA jsonlnt.com, en esta pagina podemos
estar mirando si la estructura que le estamos dando a los datos si es acorde a la estructura que nos
ofrece Jason

1. Todos los elementos Jason deben estar trabajados dentro de un corchete {contenido}
2. Cada elemento de Jason debe venir con par valor, algo asi como una llave y su contenido,
o el nombre del elemento y su contenido.
{
“nombres” : “carlos”,
“apellidos” : “roldan”
}
3. Cada vez que se genere un nuevo dato debe estar separado por coma “,”
4. Jason nos permite mas flexibilidad en los datos que guardemos, por ejemplo lo que
mencionaba del teléfono
{
“nombres” : “carlos”,
“apellidos” : “roldan”
“teléfono” : [12341, 235235, 23523],
}
5. Incluso hasta objetos dentro del mismo objeto

“nombres” : “carlos”,
“apellidos” : “roldan”
“teléfono” : [12341, 235235, 23523],
“dirección”: {
“ubicación”: “casa”,
“texto”: “kra 43ª”
},{

“ubicación”: “casa”,
“texto”: “kra 43ª”
}}

BASES DE DATOS

Cuando pensamos en las bases de datos relacionales siempre pensamos en tablas, que se van
a estar relacionando probablemente mediante un id, como con las llaves foráneas
Pero cuando pensamos en las bases de datos no relacionales, no vamos a estar pensando
en separar la información si no que vamos a estar incorporándola dentro de la misma
estructura, como en el caso con los datos de tipo JSON.
Un sistema de base de datos no relacional nos permite estar manejando mucho mas
registros de una manera mucho mas rápida, no tiene que estar recorriendo tantos
subíndices o tablas y todo eso. Esto cuando manejamos muchísima información como en
el caso de la aplicación Google maps

BASE DE DATOS CON MONGODB

cuando se incorpora un nuevo elemento en MongoDB, la misma base de datos se encarga
de estar generando un _id para este elemento. Toda esa estructura es a lo que nosotros le
llamamos un documento, ya si tenemos un conjunto de documentos, estos es a lo que se
le llama una colección.
Cada uno de los documentos JSON se nos convierten en los registros que vamos a estar
guardando en la base de datos no relacional
Clusters: conjunto de servidores que pueden ser usados por atlas para guardan
información. Estos generan un conjunto de replicas. Mongo crea una copia en cada
servidor de nuestra de base de datos. Asi brinda una seguridad de nuestros datos y
garantiza siempre la conexión a la base de datos. Al generar estar replicas se hace mucho
mas eficiente es tratado de los datos.

Para podernos conectar a la base de datos tenemos 3 opciones posibles. (estamos en la

opción de datobases de atlas mongo, ahí le damos en connect
Compass, es descargar un ejecutable para estar trabajando con esa parte grafica. Para
nuestro caso nos vamos a estar conectando directamente con una aplicación, y esta nos va
a sumistrar la cadena de conexión

TRABAJO CON ATLAS

Para poder entrar a revisar la conexión del cluster vamos a entrar a Browse Collection, y le
damos en crear nuestra base de datos

En los nombres de las conexiónes vamos a estar trabajando en minúscula y en plural

Si queremos estar trabajando o subiendo imágenes vamos a estar pegando aquí el link
CADA VEZ QUE HABLAMOS DE UNA API, ESTAMOS HABLANDO DE UNA INTERFAZ
MODELOS(ESQUEMAS)
Los modelos o esquemas son como estructura vamos a estructurar cada uno de los
documentos que vamos a estar estructurando cada uno de los documentos que vamos a
estar trabajando. Tambien se le conoce como modelos.

CONTROLADORES(OPERACIONES)
En los controladores vamos a tener los archivos js. Aquí vamos a tener nuestras diferentes
operaciones crud, nuestro método para solicitar información, para borrar información,
para actualizar información y demás. Aquí no pensamos en formulario ni nada de ese, por
que se supone que el va a estar recibiendo un objeto json. El hace es el proceso de
ejecución.
RUTAS
Aquí vamos a estar identificando las rutas que vamos a estar utilizando, y cada ruta va a
estar ejecutando una operación en específico.

Ahora vamos a estar creando otro proyecto en el cual vamos a estar trabajando con
nodeJS--- grabación del 12 – 11 – 2021 sobre el min 10 empieza
Este nuevo proyecto va a ser mi API
- Lo primero que hacemos es crear los archivos que están en la foto anterior, las 3
carpetas y los dos archivos, el index y la conexión.
- Asi ya tenemos un proyecto en blanco, pero ahora tenemos que convertirlo en un
proyecto NodeJS
- Abrimos cmd dentro de esa carpeta, escribimos npm init, y respondemos las
preguntas que vienen después.
Asi el mismo me va a crear el archivo package.json
 Ahora vamos a estar modificando ese scrip para que en vez de tomarlo como test, lo
haga para correr el programa
El nombre en “test” lo podemos cambiar por lo que queramos,
PARA QUE EL PROYECTO FUNCIONE LE TENEMOS QUE ESTAR DESCARGANDO EL
EXPRESS MORGAN MONGOOSE. MEDIANTE NPM INSTALL Y LOS 3 NOMBRES
Luego instalamos el nodemon mediante la misma manera pero le añadimos al final -
D para indicar que se a usar para desarrollo
Luego de instalar esto podemos estar pensando en crear mi repositorio git mediante
el comando git init.
Además tenemos que crear el archivo que me va a decir cuales son las carpetas que va
a ignorar, simplemente creando una nueva pagina llamada .gitignore. luego
ponemos /carpetaIgnorar, en este caso node_modules. Y ese carpeta se pondrá en un
color opaco
- Para editar scrip: le ponemos el nombre que queramos al scrip, luego vamos a estar
diciendole que monitoree cada cambio que yo vaya a estar haciendo mediante el
siguiente scrip. “nodemon index.js”
ESTRUCTURAR LOS DOCUMENTOS:

INDEX:

Luego vamos a estar corriendo el archivo mediante npm run nombre_scrip

La cadena de conexión para conectarnos a la base de datos la obtenemos en mongo, cuando le

damos a connect, esa es la que vamos a usar para el archivo connection

Si yo tengo 5 colecciones en la base de datos, tengo que colocar 5 esquemas en nuestro proyecto
angular.

Dentro de este esquema vamos a estar colocando como la misma estructura que tenemos dentro
de la colección que pusimos en nuestro base de datos.
Plantillas del esquema

OPERACIONES BÁSICAS QUE PUEDO REALIZAR CRUD CON LOS PRODUCTOS

Archivo base donde tenemos como la planilla de las rutas