Angular - Instalación

Instalar vía CLI

Abrimos en Visual Studio Code la terminal

Realizamos en primera instancia la instalación Global, esta se realiza una única vez, para que posteriormente podamos crear proyectos angulas desde cualquier parte del directorio.

npm install -g @angular/cli

Crear un espacio de trabajo y una aplicación inicial

Desarrolla aplicaciones en el contexto de un espacio de trabajo Angular . Para crear un nuevo espacio de trabajo y una aplicación de inicio inicial:

# ng new frontend

Responder las siguientes preguntas

Para ejecutar la aplicación debe:

Entrar a la carpeta
```
cd frontend
```
Ejecutamos el comando
```
ng serve -o
```

Vamos al navegador y copiamos la siguiente dirección:

http://localhost:4200 , indicando que el proyecto angular ya está funcionando

En Visual Studio code, apreciamos la estructura de archivos y carpetas que fueron creados automáticamente con el comando CLI ng new frontend en este caso.

Ingresamos a VS Code.

code .

Veremos la siguiente estructura creada por el CLI de Angular.

El código principal del proyecto se encuentra dentro de la carpeta src

Y el archivo inicial del proyecto es index.html

En el body solo se encuentra esta etiqueta <app-root></app-root> que es la representación de un componente.

Que es un componente en angular ?

Un componente en Angular es un elemento que está compuesto por:

Un archivo que será nuestro Template (app.component.html).
Un archivo de lógica, la cual es la que pondremos en un archivo .ts (como por ejemplo app.component.ts).
Un archivo para el CSS, donde incluiremos los estilos.

Esto quiere decir que tengo que identificar en la carpeta src\app, donde se encuentra el componente representado por <app-root></app-root>.

Según la gráfica anterior, existe un componente y un routes.

Si abrimos el archivo app.component.ts que contiene la lógica de los componentes observamos

Podemos concluir entonces, que el selector o etiqueta representa el componente app.component.ts

y este a su vez tiene vinculados

app.component.html

app.component.css

De tal manera que si queremos modificar la presentación de nuestro proyecto inicial

debemos cambiar el archivo app.component.html

Por tanto en el archivo app.component.html borramos y dejamos el siguiente codigo

<h1>Proyecto Principal de Site Almacen</h1>
<router-outlet></router-outlet>

Si nos dirigimos al navegador con la URL http://localhost:4200 nos muestra

Ahora abrimos el archivo app.component.css, como pueden observar se encuentra en blanco. esto quiere decir, que no existen estilos en este componente. pero podemos crear nuestro primer estilo.

h1{
    color: darkgoldenrod;
}

Si vamos al navegador nos muestra lo siguiente

Esto significa que dependiendo lo que queremos hacer si cambiar algo en nuestro componente sabemos a que archivo dirigirnos.

Cambiar el template >> app.component.html

Cambiar la logica >> app.component.ts

Cambiar los estilos >> app.component.css