Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Primer Proyecto en Angular

    Cargado por

    Roberto Murillo
    28 vistas9 páginas

    Título original

    Primer proyecto en Angular

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    28 vistas9 páginas

    Primer Proyecto en Angular

    Cargado por

    Roberto Murillo

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 9

    Primer proyecto en Angular, Node, Express y MongoDB

    Lista de productos

    Crear productos
    Que vamos a aprender.
    1. Crear componentes
    2. Crear servicios para comunicarnos con el Backend
    3. Ruteo para movernos entre componentes
    4. Validación de formularios con (ReactiveForms)
    5. Crear API Rest utilizando Express y Node
    6. Crear una base de datos no relacional MongoDB
    7. Instalar Bootstrap 5, FontAwesome y Toastr

    Creado nuestro Frontend


    Primera parte: creando el proyecto con angular/cli
    Parar el servicio (ctrl+c s, serve --oo).
    Ruta del trabajo npm in
    1. Vamos a crear nuestro proyecto con el Angular/CLI, para ello creamos
    una carpeta en el escritorio del equipo denominada MEAN
    2. Abrimos una ventana de comandos de Windows, CMD y accedemos a
    la carpeta MEAN, dentro de la ventana de comandos escribimos cd
    desktop y luego cd mean
    3. Validar que tenemos instalado NODE JS y Angular/CLI, si no lo tienes
    los debes instalar. (node -- version ng versión).
    a. Node js: Descargar la versión LTS y darle siguiente siguiente
    hasta el final
    b. Angular/cli: escribes este comando en la consola npm install -g
    @angular/cli
    4. Vamos a crear nuestro proyecto lo hacemos con el comando ng new
    cliente
    5. Al crear el proyecto nos selen algunos mensajes en este caso los
    aceptamos con la letra s y elegimos CSS para los estilos
    6. Una vez creado el proyecto lo abrimos en la herramienta de Visual
    Studio Code (code .)
    7. Ejecutamos el proyecto desde una terminal dentro de VSC, con el
    comando ng serve --o
    8. Validamos que el proyecto se abrió en el navegador que tenemos
    predeterminado.

    Segunda parte: Configurando Bootstrap


    1. Vamos a instalar bootstrap en nuestro proyecto, para ello lo
    podemos hacer en otra terminal o simplemente paramos en
    la que tenemos corriendo el proyecto CTRL + C,
    2. Ingresamos a la página oficial de Bootstrap
    https://getbootstrap.com/ damos clic en download y
    bajamos hasta la opción de npm copiamos npm install
    bootstrap lo pegamos en la consola y lo ejecutamos
    3. Para que funcione Bootstrap en el proyecto realizamos la
    siguiente configuración, vamos al archivo angular.json y
    escribimos la siguiente línea,
    "node_modules/bootstrap/dist/css/bootstrap.min.css"

    4. Validamos que nos toma los cambios que realizamos.

    Tercera parte: Continuamos con la arquitectura del frontend


    1. Ingresamos a la carpeta APP y creamos tres carpetas
    a. Components
    b. Services
    c. Models
    2. Abrimos otra terminal dentro de VSC
    3. Vamos a crear los componentes que necesitamos
    ng g c components/crear-producto
    a. ng g c components/listar-productos
    4. creando los servicios que necesitamos
    a. ng g s services/producto
    5. Vamos a crear nuestro modelo, para ello entramos a la
    carpeta models y creamos un nuevo archivo y lo nombramos
    producto.ts, escribes el siguiente código

    Cuarta parte: Continuamos configurando el ruteo del proyecto


    1. Ingresamos al archivo app-routing.module.ts y lo
    configuramos de la siguiente manera.
    2. Le decimos a angular donde queremos que rende rice esos
    componentes que acabamos de configurar. Para ello
    ingresamos al componente raíz, borramos todo lo que
    tengamos hay y escribimos la siguiente línea <router-
    outlet></router-outlet>
    3. Comprobamos que las rutas están bien configuradas.
    (navegador)
    a. Localhost:4200
    b. Localhost:4200/ crear-producto

    Quinta parte: configurar componente listar productos


    1. Primero vamos a agregar un gradiente de fondo. Entramos a
    la siguiente página https://uigradients.com/ y seleccionamos
    el gradiente que más nos guste, damos clic en
    2. Copiamos el código que nos genera
    3. Vamos al archivo styles.css y lo pegamos allí como lo muestra
    la imagen.
    4. Creamos la vista para lista de productos, para ello vamos al
    archivo listar-productos.component.html y escribimos el
    siguiente código.

    5. Ingresamos a la página de fontAwesome,


    https://cdnjs.com/libraries/font-awesome, copiamos

    6. Ingresamos al archivo index.htm, pegamos dentro del <head>


    7. Ingresamos al archivo listar-productos.component.css y
    agregamos la siguiente clase.
    Sexta parte: configurar componente crear productos
    1. Ingresamos al -archivo crear-producto.component.html y
    escribimos el siguiente código.

    2. Validaciones en el formulario crear producto con


    ReactiveForms
    3. Vamos al archivo app.module.ts e importamos un nuevo
    módulo ReactiveForms, debe quedar agregado de la siguiente
    manera.

    4. Ingresamos al archivo crear-producto.component.ts y


    agregamos las siguientes líneas.
    5. Conectar el archivo crear-producto.component.ts con el
    formulario crear-producto.component.html, para ello vamos
    al archivo crear-producto.component.html y agregamos lo
    que hace falta de acuerdo con la siguiente imagen.
    6. En el archivo crear-producto.component.html, continuamos
    con las validaciones, para ello en los inputs agregamos las
    configuraciones que indica la siguiente imagen.

    Volver producto guardar crear LISTADO DE PRODUCTOS

    También podría gustarte