Mi primera aplicación en Angular 4


En esta entrada vamos a aprender los fundamentos básicos para crear nuestra primera aplicación en Angular 4.


Ya que en el post anterior vimos las novedades Angular 4 que presenta esta nueva versión sobre su antecesora Angular 2, ahora vamos a hacer lo que en otros frameworks es el típico «Hola mundo» pero con arquitectura Angular JS.

Preparativos.

  1. Instalamos NodeJS desde https://nodejs.org/.
  2. Abrimos línea de comandos con permisos de administrador e instalamos Angular-CLI
    npm install -g angular-cli
  3. Ahora creamos nuestro proyecto en el directorio que deseemos. Yo lo voy a llamar MyProject.
    ng new <Nombre del proyecto>
  4. Accedemos dentro del directorio del proyecto y comprobamos la versión de Angular JS.
    ng -v

  5. Como podéis apreciar, hemos instalado por defecto la versión 2 de Angular JS. Pero como nosotros queremos trabajar con la última versión de Angular vamos a actualizar las dependencias. Para ello volvemos a la línea de comandos y tecleamos lo siguiente.
    npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save
  6. Volvemos a comprobar la versión de Angular y es ahora cuando vemos que ya disponemos de Angular 4.


  7. Lanzamos la aplicación, al colocar el comando –o al final lo que conseguimos es que cuando termine de compilar se abra directamente en el navegador bajo el puerto 4200.
    ng serve --o

Resultado de Mi primera aplicación en Angular 4.

Podemos ver vía navegador el resultado de nuestra primera aplicación en Angular 4.

En la próxima entrada del blog veremos como hacer una aplicación algo más compleja metiendo mano al código.
Ah y recuerda!!!, si quieres estar al día acerca de la creación de nuevas entradas, no te olvides de suscribirte al blog.

[wysija_form id=»1″]

 

Versiones utilizadas, tiempo y dificultad de desarrollo:

Dificultad del ejercicio: Iniciación.
Tiempo de realización: 10 minutos.
Angular Framework version: 4.1.3
Node versión: 7.5.0
NPM versión: 4.6.1
Sistema operativo: Windows 7

Publicaciones relacionadas

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Responsable de los datos: Luis María Jordán Muñoz | Finalidad: Responder a la solicitud que me envíes y ofrecerte información | Legitimación: Tu consentimiento de forma expresa | Destinatario: Webempresa mi proveedor de hosting | Derechos: Tienes derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido, para más información, te dejo enlace a mi política de privacidad ... enlace

Ir arriba