Instalacion de angular y typescript

[mariogonzalezispc]

Por favor instalar estas dos extensiones (typescript y Angular) en su VCCODE , y en lo posible documentar si tuvieron problema en el proceso para facilitar a los demás integrantes del grupo. Una vez instalado hacer pruebas de compilación de index.html, en SU RAMA no en el main. Hacer capturas de pantalla y colocarlas en las respuestas de esta isuue para ver el resultado. No hacer merge al proyecto.

[ferreyraGaston]

La arquitectura de una aplicación en angular se basa en bloques de construcción, llamados Módulos o Ng Modules y proporcionan un contexto de compilación para cada uno de los componentes que hacen a la página.

Los componentes son el conjunto de archivos HTML, CSS, TS Y SPEC que hacen al componente, como veremos más adelante. Estos definen la vista (lo que el usuario ve), y son mostrados de acuerdo a la lógica y los datos que diseñamos para nuestro programa.

[MonicaAntich]

Ya instale NodeJs con problemas pero me ayudo este tutorial (https://youtu.be/4N4UaFQdk9g). Quiero instalar TypeScript y no hay manera. Me da el siguiente error:

tsc -v : No se puede cargar el archivo C:\Users\Asus\Desktop\NodeJs\node-v16.15.1-win-x64\tsc.ps1 porque la ejecución de scripts está deshabilitada en este sistema. Para obtener más información, consulta el tema about_Execution_Policies en https:/go.microsoft.com/fwlink/?LinkID=135170.

En línea: 1 Carácter: 1 + tsc -v

Fui a San Youtube y encontre un tutorial explicando como habilitar los scripts (https://www.youtube.com/watch?v=bSe2txn_NuQ) pero tengo miedo de dejar expuesta la seguridad de mi compu.

Lo respectivo Angular, lo instale con los pasos dados por Profe Guillen, desde visual studio code

[ferreyraGaston]

Crear proyectos en angular

Ir a la consola DOS o “Símbolo del Sistema”

Paso 1

Ejecutar el comando: ng new store (store nombre del proyecto)

Paso 2

? Would you like to add Angular routing? (y/N). Introducir y

Paso 3

? Which stylesheet format would you like to use?. Introducir CSS

Paso 4

A continuación, AngularCli creará una carpeta <<nombre de la aplicación>>

Paso 5

Cerrar la terminal e ingresar a la carpeta del proyecto dentro de ella abrir de nuevo la terminal o ingresar la ruta del proyecto

[ferreyraGaston]

Creación de Componentes

Paso 1

Dentro del proyecto se abre la terminal

Paso 2

Creo cuatro componentes (Header, contenedor1, footer y items), para crear un componente la sentencia es ng generate componente shared/components/header donde shared/components son dos carpetas que iran almacenadas dentro de la carpeta app

Paso 3

Creación de los cuatros componentes

Conclusión

En la estructura por defecto se pueden observar cuatro archivos de componente:

app.component.css: contiene los estilos propios del componente. app.component.html: define el HTML de componente raíz. app.component.spec.ts: archivo de pruebas unitarias para el componente raíz. app.component.ts: define la lógica del componente raíz. y un archivo de módulo: app.module.ts: es el archivo que le dice a angular como ensamblar (agrupar) los módulos de la aplicación.

[ferreyraGaston]

Compilación de index.html

Paso 1

abrir la terminal donde esta alojado el proyecto, en este caso tengo cargado con cuatro componentes para hacer una prueba, en este caso se intento hacer una copia del proyecto anterior, solo el index pero sin ningún evento solo utilice tres componente para armar la estructura Header, Contenedor1 y Footer.

Paso 2

Se realiza la compilación introduciendo el siguiente código mientras este este activo, se podrá visualizar la pagina. El código a implementar es ng serve -o esta operación puede tardar unos minutos.

Paso 3

Al agregar -o esto hace que el navegador automáticamente abra el proyecto en el http://localhost:4200/

Paso 4

Para cerrar la visualización hay que teclear en el terminal Ctl+C

Paso 5

y si actualizamos el navegador ya no tendrá conexión.