Skip to content

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

<!-- -->
- 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

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