Capacitación formadores Generación de

capacidades en el Ecosistema Digital de

Bogotá

Formación especializada TI
 Angular
Framework Front-end
Crear un proyecto en angular
Para crear una aplicación en Angular se utiliza la terminal de línea de comandos
angular CLI que ya habíamos instalado. Esta nos brinda comandos enfocados a
la creación de aplicaciones en Angular, generadores de código y comandos para
ejecutar el proyectos o pruebas. Para crear una aplicación vamos usar el
siguiente comando.

ng new my-app

Donde my-app será el nombre de nuestro proyecto

Estructura de archivos
Luego de ejecutar este comando se creara una carpeta con el nombre del
proyecto y esta contendrá los archivos necesarios para ejecutar una aplicación
de angular. Para la creación del proyecto angular CLI se apoya en npm para
descargar los paquetes necesarios.
Carpeta src
En tu aplicación vive en la carpeta src.
Todos los componentes de angular,
plantillas, estilos, imágenes y cualquier
otra cosa que necesite su aplicación
van aquí. Cualquier archivo fuera de
esta carpeta está destinado a ayudar a
construir su aplicación.
Archivo Propósito
app/app.component. Define el AppComponent junto con una plantilla HTML, hoja de estilo CSS y una
{ts,html,css,spec.ts} prueba unitaria. Es el componente raíz de lo que se convertirá en un árbol de
componentes anidados a medida que la aplicación evoluciona.
app/app.module.ts Define AppModule, el módulo raíz que le dice a Angular cómo armar la aplicación. En
este momento declara solo el AppComponent. Pronto habrá más componentes para
declarar.
assets/* Una carpeta donde puedes poner imágenes y todo lo demás para copiar al por mayor
cuando construyes tu aplicación.
environments/* Esta carpeta contiene un archivo para cada uno de sus entornos de destino, cada
uno exportando variables de configuración simples para usar en su aplicación. Los
archivos se reemplazan sobre la marcha cuando construyes tu aplicación. Puede
utilizar un punto final de API diferente para el desarrollo que para la producción o
quizás diferentes tokens de análisis. Incluso podría usar algunos servicios falsos. De
cualquier forma, la CLI lo tiene cubierto.
browserslist Un archivo de configuración para compartir navegadores de destino entre diferentes
herramientas de front-end.
favicon.ico Todos los sitios quieren verse bien en la barra de marcadores. Comience con su
propio ícono angular.
index.html La página HTML principal que se sirve cuando alguien visita su sitio. La mayoría
de las veces, nunca necesitarás editarlo. La CLI agrega automáticamente
todos js y css archivos cuando la construcción de su aplicación por lo que no
será necesario añadir ningún <script>o <link>etiquetas aquí manualmente.
karma.conf.js Configuración de prueba unitaria para el corrector de prueba Karma , que se
usa cuando se ejecuta ng test.
main.ts El principal punto de entrada para tu aplicación. Compila la aplicación con
el compilador JIT y arranca el módulo raíz de la aplicación ( AppModule) para
que se ejecute en el navegador. También puede usar el compilador AOT sin
cambiar ningún código agregando el --aotindicador a los comandos ng buildy ng
serve.
polyfills.ts Los diferentes navegadores tienen diferentes niveles de compatibilidad
con los estándares web. Los polyfills ayudan a normalizar esas
diferencias. Debería estar bastante seguro con core-jsy zone.js, pero
asegúrese de consultar la guía de soporte del navegador para obtener
más información.

styles.css Tus estilos globales van aquí. La mayoría de las veces querrá tener
estilos locales en sus componentes para facilitar el mantenimiento, pero
los estilos que afectan a toda su aplicación deben estar en un lugar
central.

test.ts Este es el principal punto de entrada para las pruebas de su

unidad. Tiene una configuración personalizada que puede ser
desconocida, pero no es algo que deba editar.

tsconfig.{app|spec}.json Configuración del compilador de TypeScript para la aplicación Angular

( tsconfig.app.json) y para las pruebas unitarias ( tsconfig.spec.json).

tslint.json Configuración de destello adicional para TSLint junto con Codelyzer ,

utilizado durante la ejecución ng lint. Linting ayuda a mantener un estilo
de código consistente.
Desplegar servidor
Ahora que tenemos creado nuestro proyecto podemos comprobar que todo esta
funcionando bien. Para esto podemos ejecutar el comando ng serve --open el
cual despliega un servidor local con nuestra aplicación.
Componentes
Los componentes son el bloque de construcción más básico de un interfaz de
usuario en una aplicación Angular. Una aplicación Angular es un árbol de
componentes. Los componentes de Angular son un sub-conjunto de directivas. A
diferencia de las directivas, los componentes siempre tienen una plantilla y solo
un componente puede ser instanciado por un elemento en una plantilla.

El app.component es el componente principal desde donde se ramifican los

componentes que vamos a desarrollar. Este es se llama desde el archivo
index.html de una aplicación en angular.
Componentes-Estructura
Por cada componente de angular que usemos necesitamos generalmente cuatro
archivos:

● .css (Vista-Estilos del componente)

● .html (Vista-Maqueta del componente)
● .ts (Controlador-”Modelo”-Lógica del componente)
● .spec.ts (Pruebas)
Decoradores
No es más que una declaración de cómo será(metadatos) un componente y las diversas
piezas de las que consiste.

Básicamente es una implementación de un patrón de diseño de software que en sí sirve

para extender una función mediante otra función, pero sin tocar aquella original, que se
está extendiendo. El decorador recibe una función como argumento (aquella que se quiere
decorar) y devuelve esa función con alguna funcionalidad adicional.

Las funciones decoradoras comienzan por una "@" y a continuación tienen un nombre. Ese
nombre es el de aquello que queramos decorar, que ya tiene que existir previamente.
Podríamos decorar una función, una propiedad de una clase, una clase, etc.
Como crear componentes
Como se menciono anteriormente las aplicaciones de angular se basa en dividir
nuestra app en componentes, para facilitar el desarrollo y no tener que generar
manualmente la estructura de un componente, podemos usar angular CLI.

ng generate component [nombre del componete]

Definición de un componente
Recordemos que la estructura de un componente consta de varias partes que
pueden hacer alusión al MVC, la vista la podemos manejar en un archivo externo
referenciado en el decorador @Component o también podemos declararla en la
propiedad template en vez de templateUrl usando comillas invertidas(``).

La lógica se define en una clase, donde podemos definir métodos y el binding lo

hacemos por medio de interpolación a través de los dobles corchetes({{}}).
Como llamar componentes
Para construir nuestro árbol de componentes la idea es ir llamando
componentes dentro de otros y lo más importante llevarlos al app.component ya
que es la raíz de nuestro árbol.

Para esto basta con agregar el selector de nuestros componentes definido en el

decorador @Component dentro del app.component.html como si fuera una
etiqueta.
Directivas
Una directiva se representa como un atributo en una etiqueta HTML, este
atributo está dotando al elemento del DOM que la contiene de un
comportamiento, ése comportamiento lo definimos nosotros y se puede utilizar
en todos los elementos que queramos.
Directivas estructurales
Estas directivas, que se diferencian fácilmente al ser precedidas por un
asterisco, alteran el layout añadiendo, eliminando o reemplazando elementos en
el DOM.
Veamos un par de ejemplos de directivas estructurales:

● ngIf: si la condición se cumple, su elemento se inserta en el DOM, en caso

contrario, se elimina del DOM. (equivale al ng-if de AngularJS)
● ngFor: repite su elemento en el DOM una vez por cada item que hay en el
iterador que se le pasa, siguiendo una sintaxis de ES6. (equivale al ng-for de
AngularJS)
Directivas Atributo
Las directivas atributo alteran la apariencia o el comportamiento de un elemento
existente en el DOM y su apariencia es igual a la de atributos HTML.

Veamos las directivas atributo más típicas:

● ngModel: Implementa un mecanismo de binding bi-direccional. El ejemplo

típico es con el elemento HTML <input>, donde asigna la propiedad value a
mostrar y además responde a eventos de modificación
● ngClass: Esta directiva permite añadir/eliminar varias clases a un elemento
de forma simultánea y dinámica.
Directiva ngIf
Esta directiva nos permite realizar una validación lógica para que se ejecute un bloque de HTML, lo
vamos a usar por ejemplo para ocultar elementos de nuestro sitio web.

Para usarla debemos incluirla como un atributo de HTML anteponiendo un asterisco y usando
camelCase iniciando en minúscula, luego ponemos un igual y entre comillas va a ir el código en
typeScript que queremos validar.
Directiva ngIf asociado a un evento (click)
Ahora para que nuestra aplicación sea un poco más dinámica agreguemos un evento click a un botón
para cambiar el estado de una variable y hacer que se muestre o no un párrafo con ngIf.

Para agregar un evento click en angular se debe usar la siguiente sintaxis (click)=“código typeScript”.
Directiva ngIf-else
Ahora veamos como podemos agregar un else a nuestra validación. Para esto en nuestra directiva ngIf,
luego de la condición agregamos un punto y coma (;) y agregamos la palabra reservada else a
continuación debe existir una variable que referencia para dar otro comportamiento. Por ejemplo para
mostrar otro elemento podemos usar esta variable de referencia dentro de una directiva llamada ng-
template donde podemos pasar como atributo esta variable.
Directiva ng-for
Esta directiva nos permite recorrer elementos de nuestros componentes como arrays.
Para esto usamos la directiva ngFor dentro del elemento HTML que queremos iterar y
dentro creamos una variable referencia que vamos a interpolar para mostrar el dato.
Directiva ng-class
Esta directiva nos permite agregar o quitar clases a elementos HTML desde
angular. Para usarla debemos agregar entre llaves ([ ]) la directiva ngClass luego
un igual y entre comillas una variable de typeScript.
Directiva ng-class y enventos (click)
Al igual que hicimos con el ngIf, con ngClass también podemos accionar esta
directiva por medio de un evento, como por ejemplo, el click.
Rutas
En las single page application, vemos que podemos cambiar el contenido de la pagina dinámicamente
pero también en muchas ocasiones la ruta del navegador también cambia. De esta manera el usuario
tiene la sensación de que ya esta en otro contenido de la pagina. Además este es un buen modo de
organizar nuestra aplicación. Hacer el enrutamiento con Angular es bastante sencillo.

Primero creemos algunos componentes adicionales.

Rutas-definir contenido de los componentes
Ahora vamos a definir los contenidos de estos componentes que acabamos de
generar, podemos por ejemplo agregar un titulo en la cabecera y un mensaje en
el pie de pagina.
Rutas- Router Module
Para poder definir las rutas con las que queremos trabajar y que estas nos lleven
a los componentes que creamos en primer lugar vamos a importar el modulo de
router en app.module.ts. Este modulo esta contenido de manera estándar en
Angular.
Rutas- definir rutas Router Module
Ahora vamos a definir las rutas dentro del mismo archivo de app.module.ts, para esto creamos una
constante llamada routes del tipo Routes y esta contiene un arreglo de objetos con dos propiedades, la
ruta y el componente.

Ahora dentro de la propiedad imports del decorador @NgModule vamos a agregar la siguiente
configuración:
Ruta por defecto
Dentro de las rutas podemos especificar que si una ruta esta vacía nos lleve a
determinado componente por ejemplo al componente de inicio. Para redirigir a la
pagina de inicio cuando no se encuetre una ruta podemos definir un path con el
método redirect.
Router-outlet
Ahora vamos a agregar una nueva directiva que tenemos disponible que es
Router-Outlet por medio de la cual se van a ir cargando nuestros componentes
dependiendo del path que este en la barra de dirección de nuestro navegador. Lo
correcto es agregar esta directiva en nuestro app.component.html
Enlaces
Ahora para que se cumpla el objetivo de Angular de no tener que recargar las
paginas vamos a agregar los enlaces en una barra de navegación. Para esto no
vamos a usar anclas con href ya que esto sobre carga la pagina, así que
usaremos una directiva de router llamada Link.