Angular 2 - Hola mundo

Hay varias formas de comenzar con su primera aplicación Angular JS.

Una forma es hacer todo desde cero, que es la forma más difícil y no la preferida. Debido a las muchas dependencias, resulta difícil obtener esta configuración.
Otra forma es utilizar el inicio rápido en Angular Github. Contiene el código necesario para comenzar. Esto es normalmente lo que optan todos los desarrolladores y esto es lo que mostraremos para la aplicación Hello World.
La última forma es usar Angular CLI. Discutiremos esto en detalle en un capítulo separado.

Los siguientes son los pasos para poner en marcha una aplicación de muestra a través de github.

Step 1 - Ir a la URL de github - https://github.com/angular/quickstart

Step 2- Vaya a su símbolo del sistema, cree un directorio de proyecto. Puede ser un directorio vacío. En nuestro ejemplo, hemos creado un directorio llamado Proyecto.

Step 3- A continuación, en el símbolo del sistema, vaya a este directorio y emita el siguiente comando para clonar el repositorio de github en su sistema local. Puede hacer esto emitiendo el siguiente comando:

git clone https://github.com/angular/quickstart Demo

Esto creará una aplicación de muestra de Angular JS en su máquina local.

Step 4 - Abra el código en código de Visual Studio.

Step 5 - Vaya al símbolo del sistema y en la carpeta de su proyecto nuevamente y emita el siguiente comando:

npm install

Esto instalará todos los paquetes necesarios que se requieren para que funcione la aplicación Angular JS.

Una vez hecho esto, debería ver una estructura de árbol con todas las dependencias instaladas.

Step 6- Vaya a la carpeta Demo → src → app → app.component.ts. Encuentra las siguientes líneas de código:

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

Y reemplace la palabra clave Angular con World como se muestra a continuación:

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'World'; }

Hay otros archivos que se crean como parte de la creación del proyecto para la aplicación Angular 2. Por el momento, no necesita preocuparse por los otros archivos de código porque todos están incluidos como parte de su aplicación Angular 2 y no es necesario cambiarlos para la aplicación Hello World.

Discutiremos estos archivos en los capítulos siguientes en detalle.

Note - Visual Studio Code compilará automáticamente todos sus archivos y creará archivos JavaScript para todos sus archivos mecanografiados.

Step 7- Ahora vaya a su símbolo del sistema y emita el comando npm start. Esto hará que el administrador de paquetes de Node inicie un servidor web ligero e inicie su aplicación Angular.

La aplicación Angular JS ahora se iniciará en el navegador y verá "Hello World" en el navegador como se muestra en la siguiente captura de pantalla.

Despliegue

Este tema se centra en la implementación de la aplicación Hola mundo anterior. Dado que se trata de una aplicación Angular JS, se puede implementar en cualquier plataforma. Tu desarrollo puede estar en cualquier plataforma.

En este caso, estará en Windows usando código de Visual Studio. Ahora veamos dos opciones de implementación.

Implementación en servidores NGNIX en Windows

Tenga en cuenta que puede usar cualquier servidor web en cualquier plataforma para alojar aplicaciones Angular JS. En este caso, tomaremos el ejemplo de NGNIX, que es un servidor web popular.

Step 1 - Descargue el servidor web NGNIX desde la siguiente URL http://nginx.org/en/download.html

Step 2- Después de extraer el archivo zip descargado, ejecute el componente exe nginx que hará que el servidor web se ejecute en segundo plano. Luego podrá ir a la página de inicio en la URL -http://localhost

Step 3 - Vaya a la carpeta del proyecto Angular JS en el explorador de Windows.

Step 4 - Copie la carpeta Project → Demo → node-modules.

Step 5 - Copie todo el contenido de la carpeta Proyecto → Demo → src.

Step 6 - Copie todo el contenido en la carpeta nginx / html.

Ahora ve a la URL - http://localhost, verá la aplicación Hola mundo como se muestra en la siguiente captura de pantalla.

Configuración en Ubuntu

Ahora veamos cómo alojar la misma aplicación Hello World en un servidor Ubuntu.

Step 1 - Emita los siguientes comandos en su servidor Ubuntu para instalar nginx.

apt-get update

El comando anterior garantizará que todos los paquetes del sistema estén actualizados.

Una vez hecho esto, el sistema debería estar actualizado.

Step 2 - Ahora, instale GIT en el servidor de Ubuntu emitiendo el siguiente comando.

sudo apt-get install git

Una vez hecho esto, GIT se instalará en el sistema.

Step 3 - Para comprobar el git versión, emita el siguiente comando.

sudo git –version

Step 4 - Instalar npmque es el administrador de paquetes de nodos en Ubuntu. Para hacer esto, emita el siguiente comando.

sudo apt-get install npm

Una vez hecho, npm se instalará en el sistema.

Step 5 - Para comprobar el npm versión, emita el siguiente comando.

sudo npm -version

Step 6 - A continuación, instale nodejs. Esto se puede hacer mediante el siguiente comando.

sudo npm install nodejs

Step 7 - Para ver la versión de Node.js, simplemente ejecute el siguiente comando.

sudo nodejs –version

Step 8 - Cree una carpeta de proyecto y descargue el proyecto de inicio de github usando el siguiente comando de git.

git clone https://github.com/angular/quickstart Demo

Esto descargará todos los archivos en el sistema local.

Puede navegar por la carpeta para ver que los archivos se han descargado correctamente desde github.

Step 9 - A continuación, emita el siguiente comando para npm.

npm install

Esto instalará todos los paquetes necesarios que se requieren para que la aplicación Angular JS funcione.

Una vez hecho esto, verá todas las dependencias instaladas en el sistema.

Step 10- Vaya a la carpeta Demo → src → app → app.component.ts. Utilice el editor de vim si es necesario. Encuentra las siguientes líneas de código:

import { Component } from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<h1>Hello {{name}}</h1>'; 
}) 
export class AppComponent { name = 'Angular'; }

Y reemplace la palabra clave Angular con World como se muestra en el siguiente código.

import { Component } from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<h1>Hello {{name}}</h1>'; 
}) 
export class AppComponent { name = 'World'; }

Hay otros archivos que se crean como parte de la creación del proyecto para la aplicación Angular 2. Por el momento, no necesita preocuparse por los otros archivos de código porque están incluidos como parte de su aplicación Angular 2 y no es necesario cambiarlos para la aplicación Hello World.

Discutiremos estos archivos en los capítulos siguientes en detalle.

Step 11- A continuación, instale el servidor lite que se puede utilizar para ejecutar la aplicación Angular 2. Puede hacer esto emitiendo el siguiente comando:

sudo npm install –save-dev lite-server

Una vez hecho esto, verá el estado de finalización. No necesita preocuparse por las advertencias.

Step 12- Cree un enlace simbólico a la carpeta del nodo mediante el siguiente comando. Esto ayuda a garantizar que el administrador de paquetes de nodos pueda ubicar la instalación de nodejs.

sudo ln -s /usr/bin/nodejs /usr/bin/node

Step 13- Ahora es el momento de iniciar la aplicación Angular 2 a través del comando npm start. Esto primero compilará los archivos y luego iniciará la aplicación Angular en el servidor lite que se instaló en el paso anterior.

Emita el siguiente comando:

sudo npm start

Una vez hecho esto, se le presentará la URL.

Si va a la URL, ahora verá la aplicación Angular 2 cargando el navegador.

Implementación de nginx en Ubuntu

Note- Puede utilizar cualquier servidor web en cualquier plataforma para alojar aplicaciones Angular JS. En este caso, tomaremos el ejemplo de NGNIX, que es un servidor web popular.

Step 1 - Emita el siguiente comando en su servidor Ubuntu para instalar nginx como servidor web.

sudo apt-get update

Este comando asegurará que todos los paquetes del sistema estén actualizados.

Una vez hecho esto, el sistema debería estar actualizado.

Step 2 - Ahora emita el siguiente comando para instalar nginx.

apt-get install nginx

Una vez hecho esto, nginx se ejecutará en segundo plano.

Step 3 - Ejecute el siguiente comando para confirmar que el nginx los servicios están funcionando.

ps –ef | grep nginx

Ahora, de forma predeterminada, los archivos para nginx se almacenan en la carpeta / var / www / html. Por lo tanto, otorgue los permisos necesarios para copiar sus archivos Hello World en esta ubicación.

Step 4 - Emita el siguiente comando.

sudo chmod 777 /var/www/html

Step 5 - Copie los archivos usando cualquier método para copiar los archivos del proyecto a la carpeta / var / www / html.

Ahora, si navega hasta la URL ... http://192.168.1.200/index.html encontrará la aplicación Hello world Angular JS.

↰ Previous page Next page ↱