Introducción a Angular

blog.png
Solucionex
13
Feb 19

Para empezar a trabajar con un entorno de Angular es necesario tener instalados previamente tanto NodeJs con versiones  8.x ó 10.x y el gestor de paquetes npm.

Para comprobar nuestra versión de node debemos hacer:

node -v

Para comprobar nuestra versión de npm, en caso de tenerlo ya instalado, debemos hacer:

npm -v

Una vez tenemos listo node y tenemos npm, podemos pasar a instalar el CLI de angular a través de npm:

npm install -g @angular/cli

Tras instalar el CLI de angular podemos comprobar que todo está instalado:

ng version

Obteniendo algo del tipo:

Angular CLI

Una vez tenemos todo listo pasaremos a crear nuestro primer proyecto Angular:

npm new myFirstAngularProject

Utilizaremos ng new para crear cualquier proyecto, acompañado del nombre del mismo.

Al ejecutar ésto nos preguntará qué tipo de hoja de estilo utilizaremos:

CSS STYLE

Una vez creado el proyecto, accederemos al directorio:

cd myFirstAngularProject

Y ejecutaremos:

ng serve -o

Con "ng serve" levantaremos el servidor y con "-o" haremos que se abra en una pestaña del navegador. Por defecto se levanta en "http://localhost:4200/" en caso de tener ése puerto ocupado podemos añadir --port y elegir el puerto que sea donde correrá nuestro angular.

Si todo va bien obtendremos algo de éste estilo:

 

Angular Works

 

Ahora pasaremos a ver la estructura creada en el proyecto para comenzar a trabajar sobre él.

Tendremos un esqueleto creado automáticamente por el CLI de angular con éste aspecto:

Esqueleto angular

Como podemos ver, tenemos una carpeta "app" donde se encuentran 5 ficheros que se refieren a nuestra app de angular, ésta estructura la seguiremos exactamente igual para la creación del cualquier componente:

  • Por un lado tenemos el .html, donde cargaremos las partes dinámicas o estáticas de la web.
  • El fichero .scss contendrá la hoja de estilos referentes a ésa vista
  • El fichero .ts es el typescript que controla el componente
  • Por último el fichero del módulo de cada componente, en él debemos añadir todos los módulos de los componentes que queramos utilizar.

Para cargar datos con angular cargaremos las variables en el html y por detrás en el typescript del componente inflaremos dichas variables, un ejemplo sencillo es el siguiente:

HTML angular

TS angular

De ésta manera se escribirá donde dice "title" el contenido de la variable que tenemos en el .ts

En el próximo tutorial relacionado con Angular aprenderemos a crear nuestros propios componentes y modificarlos para integrarlos en nuestras webs.