Capacitación formadores Generación de

capacidades en el Ecosistema Digital de

Bogotá

Formación especializada TI
 Angular
Framework Front-end
Angular
Angular (comúnmente llamado "Angular 2+" o "Angular 2"), es un framework para
aplicaciones web desarrollado en TypeScript, de código abierto, mantenido por
Google, que se utiliza para crear y mantener aplicaciones web de una sola
página. Su objetivo es aumentar las aplicaciones basadas en navegador con
capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el
desarrollo y las pruebas sean más fáciles.

Angular es la evolución de AngularJS aunque incompatible con su predecesor.

Características
● Velocidad y rendimiento

○ Generación de código: Angular convierte tus plantillas en código altamente optimizado para
las máquinas virtuales de JavaScript de hoy en día, ofreciéndote todas las ventajas del código
escrito a mano con la productividad de un framework.

○ Universal: Ejecuta la primera vista de tu aplicación en node.js, .NET, PHP, y otros servidores
para renderizado de forma casi instantánea obteniendo solo HTML y CSS. También abre
posibilidades para la optimización del SEO del sitio.

○ División del código: Las aplicaciones de Angular se cargan rápidamente gracias al nuevo
enrutador de componentes. Éste ofrece una división automática de códigos para que los
usuarios sólo carguen el código necesario para procesar la vista que solicitan.
Características
● Productividad

○ Plantillas: Permite crear rápidamente vistas de interfaz de usuario con una sintaxis de
plantilla simple y potente.

○ Angular CLI: Las herramientas de línea de comandos permiten empezar a desarrollar

rápidamente, añadir componentes y realizar test, así como previsualizar de forma instantánea
la aplicación.

○ IDEs: Obtén sugerencias de código inteligente, detección de errores y otros comentarios en la

mayoría de los editores populares e IDEs.
Características
● Historia completa del desarrollo

○ Testing: Utiliza Karma para realizar pruebas unitarias, y Protractor para realizar pruebas end-
to-end de forma rápida y estable.

○ Animación: Permite crear animaciones complejas y de alto rendimiento con muy poco código
a través de la intuitiva API de Angular.

○ Accesibilidad: Posee características para crear aplicaciones accesibles con los componentes
disponibles para ARIA.
Single-page application
Un single-page application (SPA), o aplicación de página única es una aplicación web o es
un sitio web que cabe en una sola página con el propósito de dar una experiencia más
fluida a los usuarios como una aplicación de escritorio. En un SPA todos los códigos de
HTML, JavaScript, y CSS se carga de una vez1​ o los recursos necesarios se cargan
dinámicamente como lo requiera la página y se van agregando, normalmente como
respuesta de las acciones del usuario. La página no tiene que cargar otra vez en ningún
punto del proceso tampoco se transfiere a otra página, aunque las tecnologías modernas
(como el pushState() API del HTML5) pueden permitir la navegabilidad en páginas lógicas
dentro de la aplicación. La interacción con las aplicaciones de página única pueden
involucrar comunicaciones dinámicas con el servidor web que está detrás.
Instalación
Para desarrollar aplicaciones en Angular necesitamos además de un navegador
web y un editor de código, las siguientes aplicaciones.

https://nodejs.org/es/ (Lo usaremos para apoyarnos en NPM un gestor de

paquetes)
https://www.typescriptlang.org/ (podemos instalarlo desde NPM)
https://cli.angular.io/ (También desde NPM, lo usaremos como generador de
código)
https://angular.io/ (Gracias a Angular CLI ya podemos iniciar proyectos de
Angular)
TypeScript
TypeScript es un lenguaje de programación de código abierto desarrollado por
Microsoft, el cual cuenta con herramientas de programación orientada a objetos,
muy favorable si se tienen proyectos grandes. Anders Hejlsberg, arquitecto
principal del desarrollo del lenguaje de programación C#, es el principal
participante en el desarrollo de este lenguaje.
TypeScript
TypeScript convierte su código en Javascript común. Es llamado también
Superset de Javascript, lo que significa que si el navegador está basado en
Javascript, este nunca llegará a saber que el código original fue realizado con
TypeScript y ejecutará el Javascript como lenguaje original.
¿Qué es un superset?
Se trata de un lenguaje escrito sobre otro lenguaje. En este caso Typescript es
eso, un lenguaje basado en el original, ofreciéndonos grandes beneficios como el
descrito anteriormente, aunque existen otros beneficios. Por ejemplo, mientras
otros superset de JavaScript nos alejan del código original, Typescript, por el
contrario, es muy similar a Javascript.
Sintaxis TypeScript
TypeScript extiende la sintaxis de JavaScript, por tanto cualquier código
JavaScript existente debería funcionar sin problemas. Está pensado para
grandes proyectos, los cuales a través de un compilador de TypeScript se
traduce a código JavaScript original. Permite además trabajar sin problemas con
famosas librerías y frameworks de JavaScript como jQuery, MongoDB, Node.js, y
D3.js, Angular por ejemplo está realizado con TypeScript.
Sintaxis TypeScript
Tiene una sintaxis intuitiva, los navegadores no convertirán TypeScript a
Javascript si no que TypeScript cuenta con un Transpiler que convierte el código
TypeScript a JavaScript y puedes elegir si usar ES5 ó ES6 recordando que la
versión actual que soportan todos los navegadores es ES5.
Tipos de variables y datos
En TypeScript las variables se declaran igual que en Javascript, pero se especifica que tipo de dato es,
por ejemplo :

Dato de tipo string

var name: string = 'Tu nombre';
name = 'Otro nombre';

Dato de tipo number

var age: number = 29;
age = 0xf00d; // Es hexadecimal y es correcto

Dato de tipo boolean

var havePets: boolean = true;
havePets = false;
Tipos de variables y datos
Las variables tienen la palabra reservada var pero el tipo de dato que se va a utilizar ó estará asignado a
la variable y se denota como a continuación nombreVariable: tipoDato, a estos tipos de dato se les
denomina datos primitivos, y son de tipo:

String
Number
boolean

Existe la palabra reservada const que es una nueva forma de declarar variables (introducida en ES6),
que es similar a var pero tiene un scope bloqueado ya que su valor no se puede modificar, en caso de
que se asigna un valor causaría un error. De igual manera var también puede usarse como let, de ahora
en adelante la usaremos así como mejor práctica.

let name: string = `Juan`;

let age: number = 26;
Arreglos
let arrayNumber: number[ ] = [1, 2, 3];
let arrayString: string[ ] = ['1', '2', '3'];

Ó bien de la siguiente manera

let arrayNumber: Array<number> = [1, 2, 3];

let arrayString: Array<string> = ['1', '2', '3'];

string y number

let arrayMixed: any[] = [2, '5', 3];

Any
Es posible que necesitemos describir el tipo de variables que no conocemos
cuando escribimos una aplicación. Estos valores pueden provenir de contenido
dinámico, por ejemplo, del usuario o de una biblioteca de terceros. En estos
casos, queremos optar por no ver el tipo de verificación y dejar que los valores
pasen por verificaciones en tiempo de compilación. Para hacerlo, los
etiquetamos con el tipo any:

let notSure: any = 4;

notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
Como compilar TypeScript a JavaScript
Para compilar archivos se puede hacer uso de la consola que se instala con TypeScript por
medio del comando tsc y el nombre del archivo .ts

Como resultado nos generara un archivo con el mismo nombre pero con extensión .js y el
respectivo código en JavScript.

Podemos apoyarnos en un whatch (-w) para no estar compilando cada vez que
cambiamos algo. Y crear un archivo de configuración con –init para compilar varios
archivos.

Cuando empecemos a trabajar con Angular el realizará este trabajo por nosotros.
Clases y Constructores
En TypeScript podemos definir clases como definimos en otros lenguajes según
la POO. Esta clase puede tener propiedades, métodos y un constructor por
ejemplo.
Importar y Exportar clases
Como buena practica de desarrollo cada clase de TypeScript que generemos debe ir en un archivo
diferente, pero poderlas utilizar en otros archivos debemos exportarlas y para esto existen varios
modos. Angular se apoya en la librería system. Para que comprobemos como funciona agreguemos
una referencia en nuestro index y apliquemos una sencilla configuración.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.4/system.js"></script>

Importar y Exportar clases
Adicional en nuestro tsconfig.json vamos a especificar a system como nuestro
generador de módulos.
Importar y Exportar clases
Gracias a esto ahora podemos realizar exportaciones de nuestras clases y
llamarlas en un único archivo principal para que se comuniquen. Es así como se
organizan las aplicaciones de Angular como veremos en otras sesiones.