Tutorial 1: Instalando Angular CLI

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

$ 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:

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:

ng new site

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

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.

📖 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:

ng serve

Cuando está corriendo el sitio te genera una dirección en el puerto 4200 como este site.

KikstartDato
Angular tambien te preguntara lo siguiente:

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

Muchas gracias a Laura Ciro por revisar esta serie!! 🥳