Creando nuestra primera app en Angular JS

Angular JS es un framework para crear aplicaciones web utilizando componentes que pueden ser reutilizables, escritos en javascript y typescript, creado por el equipo de Angular y Google.

En este articulo vamos a ver como crear un proyecto o aplicacion en Angular utilizando los comandos de Angular y al final vamos a ver como generar los archivos angular para produccion.

Instalar Angular

Para instalar Angular primero tenemos que tener instalado NodeJS y el NPM (Node Package Manager) , si ya lo tenemos instalado ahora procedemos a instalar angular con el siguiente comando.

npm install -g @angular/cli

Con eso ya tenemos instalado el cliente de angular, ahora para crear nuestra primera aplicacion usamos el siguiente comando.

ng new app1

El comando “ng new {nombre_proyecto}” lleva como parametro el nombre del proyecto, en este caso el proyecto que vamos a crear un proyecto llamado “app1”, esto nos creara una carpeta con este nombre donde se crearan los archivos del proyecto.

En la carpeta del proyecto “app1” se van a crear varias carpetas y archivos, algunos archivos con extension .ts .css .html.

Por el momento nos vamos a centrar en las carpetas:

• node_modules
• src/app/

En la carpeta “node_modules” estan todas las dependencias y librerias requeridas y las que incluyamos en nuestro proyecto.

En la carpeta “src/app” van a estar los archivos propios del proyectos o los modulos que vallamos creando.

De la carpeta “src/app” vamos a poner atencion en los archivos:

• app.component.html
• app.component.ts

El archivo app.component.html contiene el contenido html de nuestro modulo.

El archivo app.component.ts contiene el contenido javascript o typescript de nuestro modulo.

Correr el Proyecto

Al momento de crear el proyecto que creamos por primera vez en Angular este viene con una pagina y contenido por default, este contenido lo vamos a modificar en el siguiente articulo.

Por el momento solo con tener en cuenta los archivos que vamos a modificar son los que mencione en el apartado anterior.

Para ejecutar el proyecto vamos a meternos en la carpeta de nuestro proyecto.

cd app1

Y despues vamos a ejecutar el comando:

np serve --open

Y se va a ejecutar en el navegador en el puerto 4200 o algo parecido se va a abrir el navegador automaticamente.

Generar archivos de produccion

Para generar los archivos de produccion para poner el proyecto en un servidor Apache debemos usar el siguiente comando.

ng build

Esto va a generar los archivos de produccion para nuestro proyecto en la carpeta “app1/dist“

Y esto lo copiamos a nuestra carpeta htdocs o /var/www/html de apache, esto lo veremos mas adelante.

Con esto terminamos este ejemplo espero les haya servido.