Lenguaje de programación?

Wikipedia: Angular (comúnmente llamado Angular 2+ o Angular 2) es un framework (frontend) 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.

Angular.io: Angular es un framework y plataforma de diseño para crear aplicaciones eficientes y sofisticadas
de una sola página o SPA(single-page apps).
 Framework

Es un conjunto de practicas de conceptos y de

criterios a seguir estandarizados. (reglas que se
Es un entorno de trabajo.
deben cumplir), estas reglas nos obligan a
utilizar buenas practicas para nuestro código.

Proporcionan una serie de herramientas clases

Facilita el trabajo en equipo ya que obliga a
y funciones ya desarrolladas listas para su uso,
todos los participantes del proyecto a seguir un
generalmente aquellas que son común a la
estándar, esto hace el código mas fácil de
mayoría de los proyectos. Ejemplo: Login de
comprender.
usuario con email y contraseña.
 Aplicaciones de una
página (single-page apps)

 Single Page Application es una

aplicación web de una sola pagina, es
decir, la interacción de la aplicación es
en una pagina. En una SPA el HTML,
JavaScript, CSS se carga una sola vez.
 Todos los días es probable que
interactuemos con aplicaciones SPA,
como por ejemplo YouTube, Netflix,
Gmail, etc.
 Es un sitio web que recarga y muestra su contenido en
respuesta a acciones propias de la navegación (enviar un
formulario, clickar en un enlace, acceder a una sección
Single Page
interna…) sin tener que realizar peticiones al servidor para
volver a cargar más código HTML. Las aplicaciones web Application
básicas lo hacían por completo, AJAX lo intentaba resolver
parcialmente y ahora SPA intenta reducirlo al mínimo SPA
necesario.
  Lo mejor de ambos mundos
 Sin viajes ida-vuelta al servidor

Diez claves  Reduce los tiempos de respuesta

 Reduce el consumo de ancho de banda
fundamentales  Actualizaciones automáticas y distribuidas

de una SPA  Informa de su estado a la persona usuaria

 Routing eficaz
 Cross-Platform
 Flexibilidad y rendimiento
 Facilidad para desconexión — conexión
Facilidad
para
desconexión
JavaScript (JS) es un lenguaje ligero e
interpretado, orientado a objetos con
funciones de primera clase, más conocido como el
lenguaje de script para páginas web, pero también
usado en muchos entornos sin navegador, tales
como node.js, Apache CouchDB y Adobe Acrobat.
JavaScript
Es un lenguaje script multi-paradigma,
basado en prototipos, dinámico, soporta estilos de
programación funcional, orientada a objetos e
imperativa.
TypeScript es un lenguaje de progración libre y
de código abierto desarrollado y mantenido por
Microsoft.
Es un superconjunto de JavaScript, que
esencialmente añade tipos estáticos y objetos
basados en clases
TypeScript extiende la sintaxis de JavaScript, por
TypeScritp
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 traducen
a código JavaScript original.
  Angular es un framework javascript escrito
¿Qué es en Typescript de código abierto desarrollado y
soportado por Google para crear aplicaciones web de
Angular? tipo Single-page application (SPA).
  Uno de los puntos por los que Angular ha perdido un poco de
atractivo para las empresas es porque planifican unos cambios
de versión con frencuencia y en ocasiones, para poder utilizar
la última versión, hay que corregir errores de incompatibilidad
entre ellas. En general, lanzan una nueva release cada 6 meses.
 Es importante hacer una aclaración: AngularJS
Versiones de y Angular no son exactamente lo mismo.
Angular  El primero hace referencia a la primera versión del Framework y
el segundo a las versiones 2.0 o superiores.
 Esta distinción se debe a la gran cantidad de diferencias que
existen entre uno y otro, y por tanto no son retrocompatibles. En
el momento de escribir este artículo, existen dos últimas
versiones:

 8.2.11 : Esta es la versión más estable.

 9.0.0 : Versión beta.
Historia de creación
Versiones
  El patrón de arquitectura software que se utiliza en la creación
de aplicaciones con este framework es el Modelo-Vista-
Controlador (MVC).

Arquitectura
de Angular
  Módulos
Un módulo o NgModule es el elemento básico que proporciona un
contexto de compilación para los componentes, es decir, es el
elemento que asocia los componentes de la aplicación con sus
servicios.
 Todas las aplicaciones generadas con Angular deben contar con un
módulo raíz el cual se suele llamar por convención AppModule .

Elementos de  Este módulo provee de los elementos necesarios para arrancar la

Angular aplicación.
 Una buena práctica para tener un código más organizado y escalable,
es repartir la carga de la aplicación en distintos módulos, quedándose
así el módulo principal (AppModule) justo con lo necesario para
arrancar la aplicación y dependiendo de la ruta a la que se acceda,
cargar un módulo u otro, utilizando así el lazy loading (que consiste
en cargar solo los módulos que sean necesarios), mejorando así el
rendimiento.
  Componentes

 En estos elementos se definen los datos y la lógica de

Elementos de ellos. Es importante crear componentes con una
filosofía Web Components para poder reutilizar
Angular componentes en distintas partes de la aplicación.
 Los componentes están vinculados a la template
donde se muestran los datos.
  Ejemplo podemos tener un módulo 'Clientes' con tres componentes
que resuelven distintas partes visuales de la aplicación

Elementos de
Angular
  Servicios
 Los servicios se encargan de guardar y consultar los datos, y se
pueden reutilizar para compartir información entre clases que no

Elementos de se conocen entre sí.

Angular  Todas los servicios deben importar el decorador @Injectable de

Angular para permitir que tus servicios sean inyectados en
componentes como dependencias import { Injectable } from
'@angular/core';
  Template
 Es una mezcla de HTML con algunas etiquetas específicas de
Angular. Para crear una directiva en un template se añaden
unas llaves en el HTML {{ }} y dentro de ellas pueden
añadirse lógica de programación y/o hacer un data binding
(representar los datos de los componentes).

Elementos de  Existen dos tipos de data-binding :

Angular  Event binding : Eventos en la interacción del usuario

actualizando la data del componente que está conectado.
 Property binding : Data de nuestro componente a mostrar
en el HTML.
  Soportado por Google

5 Ventajas
  Arquitectura basada en componentes que proporciona una
mayor calidad de código.
 La arquitectura basada en componentes es una de las cosas que
marca la diferencia entre AngularJS y su sucesor.
Ventajas  Los componentes pueden considerarse pequeños elementos de la
interfaz de usuario, como una sección de la aplicación.
 Si bien cada componente está encapsulado con su funcionalidad,
existe una estricta jerarquía de componentes en Angular
  TypeScript:
 Mejores herramientas
 Código más limpio y mayor escalabilidad

Ventajas
  El código es consistente ya que fomenta buenas practicas a la
hora del desarrollo
 Fácil el mantenimiento de aplicaciones por el uso de

Ventajas TypeScript
 Gran soporte de herramientas. Hay muchos editores de código,
IDEs, Linters (revisores de código y de buenas prácticas de
programación) que pueden usarse con Angular.
  Comunidad Dividida

Desventajas
Desventajas

 La migración de sistemas heredados de AngularJS a Angular

requiere tiempo
  Angular es detallado y complejo
 La queja más frecuente que escucha de la comunidad de
desarrollo angular es la verbosidad del instrumento.
 Este problema no ha cambiado desde AngularJS.
 La forma en que se gestionan los componentes es demasiado
complicada.
 Por ejemplo, puede necesitar hasta cinco archivos para un solo
Desventajas componente en Angular, tiene que inyectar dependencias y
declarar las interfaces del ciclo de vida del componente.
 Otros puntos de preocupación son las bibliotecas de terceros
específicas de Angular y su sintaxis.
 En consecuencia, gran parte del tiempo de desarrollo en Angular
se dedica a hacer cosas repetitivas.
  Curva de aprendizaje
 Si incorporas nuevos desarrolladores familiarizados con JavaScript
para aprender y usar Angular nuevos, serán desafiados en
comparación con la incorporación similar de React o Vue.
 La variedad de temas y aspectos que se cubrirán es grande: módulos,
inyección de dependencia que mencionamos anteriormente,
componentes, servicios, plantillas, etc.
 Otra barrera es RxJS, una biblioteca de programación reactiva para
Desventajas programación asincrónica. Aprenderlo, al menos en el nivel básico,
es obligatorio para usar Angular.
 Los ingenieros se quejan de mensajes de error que son demasiado
crípticos para captarlos sin una investigación adicional seguida de
manipulaciones de prueba y error.
 TypeScript, Si bien TypeScript mejora la capacidad de
mantenimiento del código, tener que aprenderlo no hace que la curva
sea más suave.
  La documentación de CLI carece de detalles
 Algunos ingenieros expresan preocupación con el
estado actual de la documentación de CLI.

 Si bien la línea de comandos es muy útil y amada por

Desventajas los desarrolladores de Angular, no encontrará
suficiente información en su documentación oficial
sobre GitHub y pasará un tiempo explorando hilos en
GitHub para obtener respuestas.
  React

Competencias  Desarrollado por Facebook, se lanzó inicialmente en 2013.

 Facebook usa React ampliamente en sus productos (Facebook, Instagram y
WhatsApp).
 La versión estable actual en 16.8,6, lanzada en marzo 2019.

 Vue
 También conocido como Vue.js, se lanzó inicialmente en 2014
 Fue desarrollado por el ex empleado de Google Evan You en 2014.
 En los últimos dos años, Vue ha visto un cambio sustancial en la popularidad, a
pesar de que no cuenta con el respaldo de una gran empresa.
 La versión estable actual es 2.6,11, lanzada en diciembre de 2019.
 Vue , planea pasar a TypeScript .
Competencias
Hecho en Angular  www.madewithangular.com
 EVENT LOCATION

ngIndia Delhi, India

ReactiveConf Prague, Czech Republic

NG Rome MMXIX Rome, Italy

AngularConnect London, UK

NG-DE Berlin, Germany

ng-japan Tokyo, Japan

Comunidades o
ngVikings Copenhagen, Denmark

ng-conf Salt Lake City, Utah

Grupos de ng-India

ngAtlanta
Gurgaon, India

Atlanta, Georgia

Soporte AngularConnect

ReactiveConf
London, United Kingdom

Prague, Czech Republic

AngularMix Orlando, Florida

Angular Conf Australia Melbourne, Australia

ng-japan Tokyo, Japan

WeAreDevelopers Vienna, Austria

ng-conf Salt Lake City, Utah

ngVikings Helsinki, Finland

ngAtlanta
 https://github.com/Angular2Latinoamerica/portal

Comunidades o
https://www.facebook.com/angularcostarica/
Grupos de
Soporte
https://www.facebook.com/Angular.co
  TypeScript es un superconjunto de JavaScript que compila a
JavaScript.
 Ventajas
 Facilita el desarrollo de aplicaciones complejas.
 Agrega la posibilidad de definir tipos (string, number, boolean
etc.) a las variables que creamos. Con esta característica nos

TypeScript permite identificar problemas en nuestras aplicaciones en tiempo

de compilación. Esta característica ayuda que nuestro programa
sea más legible.
El origen del nombre de este lenguaje "TypeScript" es por la
posibilidad de definir tipos (Type) a las variables.
 Definición de sintaxis más claras en la declaración de clases y sus
propiedades.
 Definición de herencia de clases e implementación de interfaces.
 Definición propiedades privadas, protegidas y públicas.
 Captura de errores cuando se compila el programa en TypeScript.
  Los lenguajes con tipado estático permiten detectar errores de
asignación en tiempo de desarrollo.
 Por ejemplo si tenemos la definición de una variable 'number' y
luego queremos asignarle un 'string' la herramienta de
desarrollo la puede detectar (también si lo compilamos nos
detecta un error)

Tipado estático  JavaScript es un lenguaje de programación que usa un tipado

dinámico, luego la comprobación de tipificación se realiza
durante su ejecución en vez de durante la compilación.
  let edad: number = 23;
 let altura: number = 1.92;
 Si inicializamos la variable inmediatamente podemos dejar que
TypeScript infiera el tipo de dato, es decir es lo mismo que
escribir:
 let edad = 23;
 let altura = 1.92;

Tipado estático  string

 Permite almacenar una cadena de caracteres:
 let estudios:string = 'primarios';
 Podemos almacenar entre las comillas cualquier caracter.
 boolean
 Podemos almacenar el valor true o false:
 let activo: boolean = true;
  Arreglos con elementos del mismo tipo
 Podemos almacenar un conjunto de elementos del mismo tipo
mediante vectores o arreglos:
 let vector: number[] = [1, 4, 2];
 vector.push(33);
 for(let elemento of vector)
 console.log(elemento);
Tipado estático  Indicamos luego del tipo de dato los corchetes abiertos y
cerrados:
 let vector: number[]
 Si queremos definir e inicializar algunas componentes del
arreglo luego la sintaxis es:
 let vector: number[] = [1, 4, 2];
Clases
  class Persona {
 protected nombre:string;
 protected edad:number;
 constructor(nombre:string, edad:number) {
 this.nombre = nombre;
 this.edad = edad;
 }
Herencia 
 imprimir() {
 console.log(`Nombre: ${this.nombre}`);
 console.log(`Edad: ${this.edad}`);
 }
 }
 class Persona {
protected nombre:string;
protected edad:number;
constructor(nombre:string, edad:number) {
this.nombre = nombre;
this.edad = edad;

Herencia }

imprimir() {
console.log(`Nombre: ${this.nombre}`);
console.log(`Edad: ${this.edad}`);
}
}
 class Empleado extends Persona {
private sueldo:number;
constructor(nombre:string, edad:number, sueldo:number) {
super(nombre, edad);
this.sueldo = sueldo;
}

Herencia imprimir() {
super.imprimir();
console.log(`Sueldo: ${this.sueldo}`);
}
 const persona1=new Persona('Juan', 44);
persona1.imprimir();

const empleado1=new Empleado('Ana', 22, 7000);

empleado1.imprimir();
empleado1.pagaImpuestos();

Herencia pagaImpuestos() {
if (this.sueldo>5000)
console.log(`${this.nombre} debe pagar impuestos`);
else
console.log(`${this.nombre} no debe pagar impuestos`);
}
}
Instalar Angular https://nodejs.org/en/

https://code.visualstudio.com/download
Instalar Angular
Instalar Angular
CLI Npm install –g @angular/cli
Creación de un Para crear un proyecto utilizamos Angular CLI

Proyecto Ng new proyectoprueba

Prueba
Gracias