Instalación de Angular

¡Enhorabuena! Estamos muy felices por encontrarnos en este espacio de

aprendizaje que nos permite descubrir nuevos conceptos y herramientas
enfocadas para el desarrollo de soluciones eficientes que proporcionen excelentes
experiencias de usuario, haciendo uso de Angular. Comenzaremos por realizar la
instalación del framework y de las herramientas que se requieren para su
ejecución.

Con la finalidad de realizar la instalación de Angular, es necesario hacer la

instalación de Nodejs, el cual se puede descargar desde la
página: https://nodejs.org/. Te recomendamos descargar e instalar la versión
sugerida por la mayoría de los usuarios.

Luego de descargar y ejecutar el instalador, debemos seleccionar la ruta donde se

realizará la instalación, como se muestra en la siguiente imagen:

Seguidamente, es necesario indicar cuáles opciones queremos instalar, te

recomendamos dejar las indicadas por defecto en el asistente.
Es indispensable instalar, al menos, los componentes Node.js denominados
runtime y npm package manager. Seguidamente, continuamos con la instalación
del producto.

Una vez que de ha culminado la instalación de Nodejs, podemos abrir una consola
de comandos para ejecutar el comando node -v, y de esta forma identificamos
cuál es la versión instalada. Al obtener la respuesta de la versión estamos
verificando que Nodejs fue instalado correctamente, esto lo observamos en la
siguiente figura:
Para continuar con la verificación de la correcta instalación de Nodejs, podemos
escribir el comando npm -v en la consola de comando. Si el sistema muestra la
versión de npm entonces significa que estamos validando que también se instaló
correctamente, observemos el ejemplo en la imagen que presentamos a
continuación:

En este punto, procedemos a realizar la instalación de Angular. Así estaremos en

capacidad de usar del ambiente de desarrollo que nos ofrece este poderoso
framework. Para ello ejecutamos el comando npm install -g @angular/cli en una
consola de comandos. Este comando realiza la instalación de las librerías de
 Angular y de un cliente de comandos que nos permite crear y ejecutar
aplicaciones Angular, como lo podemos observar en la siguiente figura:

Con la finalidad de verificar la correcta instalación del framework Angular y su

cliente de comandos, podemos ejecutar el comando ng, lo cual apreciamos en
esta imagen:

A fin de crear una nueva aplicación Angular, con la plantilla y las opciones por
defecto que proporciona el cliente de comando del framework, podemos utilizar el
comando ng new --defaults ejercicio, el cual crea una carpeta denominada
 ejercicio con todos los elementos de la aplicación Angular. Este paso lo
observamos en la siguiente figura:

Una vez realizado el procedimiento anterior, hemos logrado configurar nuestro

ambiente de desarrollo de Angular y, a partir de este momento, está disponible
para ser utilizado a lo largo de este recorrido de aprendizaje. Te recordamos que
cuentas con tutores en línea, quienes están a tu disposición si se te presenta
alguna duda con respecto a este tópico, ellos estarán muy complacidos por
atenderte. ¡Hasta pronto!

Entorno de desarrollo con Angular

¡Hola! Te damos una cordial bienvenida a esta sesión donde seguiremos
configurando un ambiente adecuado para el desarrollo de aplicaciones Web
haciendo uso de Angular. Con la finalidad de realizar el desarrollo de las
aplicaciones en Angular podemos hacer uso de un Entorno Integrado de
Desarrollo (IDE), que nos ofrece ayudas mientras estamos codificando nuestras
soluciones; tales como, autocompletar código, identificación de errores, entre
otras. En nuestro caso, proponemos hacer uso del IDE Visual Code Studio, el cual
se puede descargar de la página: https://code.visualstudio.com

Visual Code es una herramienta que tiene un entorno de desarrollo para múltiples
lenguajes de programación y, entre estos, ofrece el lenguaje de programación
JavaScript. Adicionalmente, Visual Code tiene una serie de extensiones o, más
comúnmente conocidas como plugins que se pueden utilizar para trabajar con
Angular.
A fin de comenzar la instalación de Visual Code, lo descargamos e iniciamos su
ejecución. En este punto, el sistema nos muestra la pantalla de bienvenida al
instalador, y nos pregunta si aceptamos el acuerdo de uso y licencia de Microsoft
Visual Studio Code, como podemos observar en la siguiente figura:

Durante la instalación, el sistema nos pregunta en qué directorio queremos instalar

el IDE. En este punto, te sugerimos dejar la ubicación por defecto, aún cuando
tenemos la opción de cambiarla, veamos lo que proponemos en la siguiente figura:
Adicionalmente, el sistema nos pregunta qué nombre le vamos a colocar en el
menú de programas. Aquí te recomendamos dejar el nombre que ofrece por
defecto.

Luego, el sistema nos solicita seleccionar algunas opciones para definir cuál va a
ser el comportamiento de la aplicación. Nuevamente, te recomendamos conservar
chequeado o seleccionado la opción Agregar a PATH; esto es permite que se
pueda ejecutar desde cualquier directorio de la máquina:
El proceso anterior es bastante rápido, así se hace la instalación de los
componentes y, por último, indica que culminó con éxito.

En Visual Studio Code tenemos que hacer la instalación de los pluggings

necesarios para que nos facilite el desarrollo de las aplicaciones. Te
recomendamos la instalación del , el cual permite agregar automáticamente
etiquetas HTML, autocompleta la escritura de lo que estamos incorporando y
realiza el cierre de las etiquetas mientras se va escribiendo el código. En la figura
observamos cómo acceder a esta extensión:
Además, con la finalidad que Visual Code nos proporcione una mayor ayuda en el
desarrollo de aplicaciones Angular, podemos instalar la extensión Angular
Snippets. Observa la selección de esta extensión en la figura siguiente:
Adicionalmente, para hacer depuración de los programas Angular podemos
instalar la extensión denominada Debbuger for Chrome desde el navegador de
Google Chrome. En la figura observamos que podemos acceder a esta extensión
de manera similar a las anteriores:
Una vez realizado el procedimiento anterior, hemos logrado instalar un entorno
integrado de desarrollo que te facilitará la creación de tus soluciones en Angular a
través de este recorrido de aprendizaje. Te recordamos que tienes a tu disposición
tutores en línea, a quienes puedes consultar si se te presenta alguna duda con
respecto a este tópico. ¡Nos vemos pronto!

Módulo inicial de las aplicaciones en

Angular
¡Enhorabuena! Estamos muy contentos de encontrarnos de nuevo en este
interesante recorrido de aprendizaje donde tenemos la oportunidad de continuar
descubriendo los conceptos fundamentales para el desarrollo de soluciones con
Angular. Las aplicaciones desarrolladas con este framework utilizan un módulo
inicial que permite hacer la carga inicial de la aplicación y el despliegue de la
misma en el navegador.

Módulo app.module.ts

Este módulo es un NgModule que describe cómo encajan las partes de la

aplicación. En resumen, toda aplicación Angular tiene, al menos, este módulo raíz
que arranca para iniciar la aplicación. Por convención, suele denominarse
AppModule.

Cuando se utiliza el cliente de comandos de Angular para generar una aplicación,

éste crea el módulo inicial de la aplicación predeterminado que vemos adelante.
Observamos la importación de un módulo y componente, así como una serie de
elementos que explicamos en lo que sigue.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent ],
imports: [ BrowserModule ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
@decoradores

Para hacer las invocaciones a las clases y pasarle la información de definición y

parámetros, utilizamos los decoradores o decorators por su nombre en inglés. Se
trata de una función que modifica una definición de clase o de una propiedad. Los
decorators, también denominados anotaciones, corresponden a una función en
lenguaje JavaScript y TypeScript añade soporte para estos decoradores.

Angular utiliza a los decorators para que adicionen metadatos a clases o

propiedades; de esta forma, la aplicación sepa qué significan esas clases o
propiedades y cómo deberían funcionar en la aplicación.

El decorator @NModule identifica al AppModule como una clase NgModule. Esta clase
toma un objeto de metadatos que le dice a Angular cómo compilar e iniciar la
aplicación.

Este objeto de metadatos tiene cuatro arreglos que son:

 declarations
 imports
 providers
 bootstrap
El arreglo declarations[], permite indicar cuáles son los componentes que se
estarán cargando desde este módulo. En nuestro siguiente ejemplo declaramos un
único componente para esta aplicación, el componente AppComponent. Cada vez
que creamos componentes para nuestra aplicación podemos agregarlos al
arreglo declarations[] con la finalidad de que estén disponibles para su uso en la
aplicación. Adicionalmente, para hacer uso de los componentes debemos importar
los archivos que los contienen.

declarations: [
AppComponent
],
El arreglo imports[] contiene los nombres de los módulos que se deben importar y
utilizar para la ejecución de la aplicación. En este caso, se
importa BrowserModule para tener servicios específicos del navegador, como la
representación de DOM, el saneamiento y la ubicación.

imports: [
BrowserModule
],
El arreglo providers[] permite indicarle a la aplicación cuáles son los proveedores
de servicios que se deben utilizar. Un provider es una instrucción dirigida al
sistema que establece cómo obtener un valor para una dependencia. La mayoría
de las veces, estas dependencias son servicios que se crean para la aplicación.

providers: [],
El arreglo bootstrap[] tiene el componente raíz que Angular crea e inserta en la
página web del host (index.html), para de esta manera iniciar la aplicación. La
aplicación se inicia mediante el módulo que se indica en la matriz bootstrap, para
que ejecute el proceso de arranque que crea los componentes indicados en la
matriz de bootstrap[] e inserta cada uno en el DOM del navegador.

bootstrap: [AppComponent]
Aunque se puede colocar más de un árbol de componentes en una aplicación, la
mayoría de las aplicaciones tienen solo un árbol que arranca en un único
componente raíz. Este componente raíz se suele denominar AppComponent y se
encuentra en la matriz de programa de arranque del módulo raíz, como lo
observamos de nuevo en nuestro código completo que estamos mostrando como
ejemplo:

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [ AppComponent ],
imports: [ BrowserModule ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Hasta este punto hemos visto un ejemplo de un módulo inicial creado por defecto
por el cliente de comandos de Angular, con lo visto aquí ya estás conociendo las
herramientas de base para iniciar tus desarrollos utilizando este framework.

¡Muy bien! Esperamos que hayas disfrutado este interesante contenido y te

animes a seguir profundizando en tu formación acerca de Angular

¡Hasta la próxima!