Tutorial 1: Instalando Angular CLI
Tags: angular, kikstart, beginners, espanol
Published: 2020-07-06 16:51:54

---
title: "Tutorial 1: Instalando Angular CLI"
description: "Esta serie contiene 4 tutoriales en donde aprendemos los primeros pasos para crear una app en angular, utilizamos las herramientas de `Kikstart UI` para crear un layout, configuramos las rutas y finalmente desplegamos nuestra app."
published: true
series: "Introducción a Kikstart UI"
cover_image: "https://dev-to-uploads.s3.amazonaws.com/i/c60ri1xnyuhzrqt7wm2i.png"
// canonical_url: ""
tags: angular, kikstart, beginner, espanol
---

Esta serie contiene 4 tutoriales en donde aprendemos los primeros pasos para crear una app en angular, utilizamos las herramientas de `Kikstart UI` para crear un layout, configuramos las rutas y finalmente desplegamos nuestra app.

## Requisitos

Asegúrate de tener instaladas las siguientes herramientas:

- Node.js y NPM, visite la [página de inicio](https://nodejs.org/en/) para obtener instrucciones de instalación.
    - Ejecute el `node -v` para verificar que tiene la versión 12 o superior.
    - Ejecute `npm -v` para verificar que tiene la versión 6 o superior.

```bash
$ node -v
v14.0.0
$  npm -v
6.14.4
```


#### Paso # 1
Instala `Angular CLI` para empezar el proyecto

1: Abre una terminal  e instala la última versión de `Angular CLI` con el siguiente comando:

```bash
npm install -g @angular/cli
```

> 📖 kikstartpedia
> 
> El comando anterior tiene `-g` esto significa
 que lo instalaste de manera global, adicionalmente puedes 
 averiguar que versión tienes de angular 
 con el comando: `ng version`.


#### Paso # 2
Crea una app utilizando angular, en mi ejemplo el nombre de mí app es `site`, tú puedes ponerle el nombre que quieras solo ten en cuenta que sea un nombre corto, claro y genérico 
porque este nombre  utilizaras mucho.

1: Busca la ruta de tu proyecto y digita el siguiente comando:

```bash
ng new site
```

2: Antes de generar tu app la terminal te preguntará si quieres utilizar rutas o (routing), te sale algo así:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3x3iq0b4o3wy1zm1fqec.png)

3: Respondes `si` digitando la letra `y` y enter.

4: Luego te pregunta por los estilos (styles),te ofrece varias alternativas. Yo elijo SCSS, lo seleccionas y das enter.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aul9l12snaf46ydfhon0.png)

> 📖 kikstartpedia
>
>Si quieres evitar realizar los últimos ítems del paso, puedes hacerlo todo en una sola línea como se muestra en el siguiente comando: `ng new site --routing --style scss`.


#### Paso # 3
Es momento de conocer como quedo tu app y para verlo en un navegador hacemos lo siguiente:

1: Vas a la ruta donde está tu proyecto y ejecutas el siguiente comando:

```bash
ng serve
```
Cuando está corriendo el sitio te  genera una dirección en el puerto 4200 como este [site]( http://localhost:4200/).

> KikstartDato
> Angular tambien te preguntara lo siguiente:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o88pkg068t62iut22aw9.png)


2: Busca la siguiente ruta `src/app/app.component.html`, borra todo el contenido y escribe "Hola kikstart".

## Resumen
En este tutorial hemos descargado angular para crear una app, luego hemos modificado uno de sus archivos, por último corrimos la app en un navegador para conocer el resultado.

Este es solo el comienzo para conocer la poderosa plataforma de `Kikstart UI`,continua el siguiente tutorial, conoce las herramientas que `Kikstart UI` tiene para ti.

El repositorio con este paso lo puedes encontrar [aquí](https://github.com/KikstartDev/introduccion-a-kikstart-ui/tree/tutorial-1).

Muchas gracias a [Laura Ciro](https://dev.to/ltciro) por revisar esta serie!! 🥳