Crea tu primera aplicación con Angular

Que es Angular

Angular es un framework desarrollado en TypeScript, de codigo abierto, mantenido por google y una plataforma de desarrollo para crear eficientes y sotisficadas single-page apps ( SPA), lanzado el 15 de septiembre de 2016, actualmente va por la versión 17.2.

Principales características de Angular

Velocidad y Rendimiento

• Generación de codigo
• Universal
• Division de codigo

Productividad

• Plantillas
• Angular CLI
• IDEs

Historia completa del desarrollo

• Testing
• Animación
• Accesibilidad

Nuestra primera aplicación con Angular

Requisitos

Paso 1 : identificar la versión de node.js que tenemos en el ordenador y confirmarla con la instalación de angular

node --version

Paso 2: Instalar la versión correcta de node.js para Angular

Si no tienes instalada una version de node.js, sigue las instrucciones para instalar node.js

Paso 3: Instalar la última versión de Angular

Con node.js instalado y npm instalado, el próximo paso es instalar Angular CLI que nos proporciona todo lo necesario para un desarrollo efectivo en angular

Desde la terminal escribimos

npm install -g @angular/cli

Paso 4 : Instalamos un IDE si no lo tenemos, por ejemplo Visual Studio Code , y podemos instalar el plugin Angular Languaje Service

Hello World con Angular

Una vez instalada la CLI de angular de manera global ya podemos empezar a crear nuestra primera aplicación en Angular, para ello abrimos una consola dentro de la carpeta donde deseamos crear la aplicación y escribimos el siguiente comando.

ng new my-first-project

entramos dentro de la carpeta del proyecto

cd my-first-project

y arrancamos el servidor

ng serve

Ahora abrimos un navegador y ponemos la ruta http://localhost:4200 para ver la nueva aplicación correr. Cuando usamos el ng serve para construir la aplicación localmente, este reconstruye y recarga la pagina cuando hacemos alguna modificación

Vamos a modificar la pagina de inicio para que aparezca el tipico hola mundo

En nuestro IDE :

1.- Abrimos my-first-app/src/index.html

2.- En index.html, reemplazamos el <title> con el código siguiente

<title> Homes </title> 

y guardamos los cambios

3.- lo siguiente es abrir my-first-app/src/app/app.componente.ts

4. en app.component.ts, en la definicicon @component, añadimos la linea template

template: '<h1>Hello World</h1>'

5.- en app.component.ts, en la definición de la clase AppComponent, reemplazamos la line title con el siguiente codigo

title = 'homes'

ahora guardamos los cambios

6.- nos aseguramos que tenemos el servidor en marcha, si no usamos el comando

ng serve 

7- Abrimos el navegador y ponemos la url http://localhost:4200 y comprobamos nuestra aplicación