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.
- Ejecute el
$ 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.
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!! 🥳
Top comments (0)