ismael.figueroa@pucv.cl http://www.inf.ucv.cl/~ifigueroa Introducción a Javascript Moderno Dr. Ismael Figueroa ismael.figueroa@pucv.cl http://www.inf.ucv.cl/~ifigueroa Oficina 3-23 IBC

Versión actual, moderna Conocida como “Angular 2” o “Angular 4” Basado en componentes, y por defecto se programa en Typescript Versión “legacy” Conocida como “Angular 1.x” Basado en controladores, scopes, y otros Por defecto se programa en ES5

¿Qué es? Es un framework de desarrollo para aplicaciones front-end http://angular.io Es un framework de desarrollo para aplicaciones front-end Sirve para aplicaciones web, de escritorio, y aplicaciones móviles nativas Se utiliza también como parte de otros frameworks, tales como Ionic Utiliza por defecto el lenguaje de programación Typescript

Primeros pasos > npm install -g @angular/cli Angular-CLI permite gestionar nuestras aplicaciones Angular: ng new: crea una nueva aplicación ng serve: levanta el servidor de desarrollo ng generate: crea un nuevo componente, clase, interfaz, etc.

App: Lista de Tareas > ng new todo-list > cd todo-list > ng serve --open Al ejecutar ng new todo-list: Se crea carpeta todo-list con esqueleto de aplicación. Se inicializa repositorio git Se instalan dependencias con npm Al ejecutar ng serve --open: Se inicia webpack para construir/observar recursos usando webpack Se sirve la aplicación en localhost:4200 Se abre el navegador web en dicha Url.

App: Lista de Tareas

App: Lista de Tareas e2e, protractor.conf.js: carpeta para los “end-to-end” tests, y archivo de configuración para su ejecución src, node_modules: código fuente de la aplicación, dependencias npm .angular-cli.json, .editorconfig: configuración de Angular-CLI, configuración para editores de texto karma.conf.js: configuración de test unitarios con Karma tsconfig.json, tslint.json: configuración para Typescript package.json, README.md: configuración de paquete npm, y descripción de la app .gitignore: archivo git para ignorar todo los recursos generados/compilados

App: Lista de Tareas assets: recursos estáticos a usar en la aplicación environments: para manejar configuraciones para distintos ambientes (e.g. desarrollo, producción) index.html: página/plantilla principal, donde se renderizará la aplicación main.ts: archivo que inicializa la aplicación polyfills.ts: código de apoyo para navegadores que no soportan completamente ES6 test.ts: código para ejecutar los tests styles.css: estilos CSS globales tsconfig.*, typings.ds.ts: más configuración de Typescript

En la práctica sólo nos interesa trabajar en la carpeta app, y en las carpetas de otros componentes. El resto del código/archivos es para apoyar las siguientes operaciones npm start: ejecuta ng serve para iniciar servidor npm build: construye una versión de producción/distribución de la app npm test: ejecuta los tests unitarios usando Karma npm lint: ejecuta un análisis sintáctico y de errores de programación npm e2e: ejecuta los test end-to-end

Lista Tareas: src/app Esta carpeta define el componente principal de la aplicación. Cada componente X tiene los siguientes archivos/elementos: X.component.css: define los estilos CSS que serán aplicados al renderizar el componente. Por defecto viene vacío. X.component.html: corresponde a la plantilla/template que se usará para renderizar el contenido del componente. Puede incluir directivas especiales de Angular, y código Typescript. Todas las referencias a valores o variables son relativas a la clase que define el componente. X.component.spec.ts: aquí se especifican los test-unitarios utilizando afirmaciones, postcondiciones, etc. Trae tests simples de ejemplo. X.component.ts: aquí se define la clase que representa este componente, sus variables, estado interno, métodos, etc. Todo este código se puede usar en la plantilla.

Lista Tareas: src/app/app.component.ts Configuración del componente: selector: el nombre del componente, se usa para crear elementos “HTML” templateUrl: donde está la plantilla HTML para renderizar styleUrls: arreglo de ubicaciones para archivos css a aplicar La clase AppComponent que representa el componente. La anotación @Component es un decorador aplicado a la clase AppComponent para marcarla como componente y darle la configuración necesaria

Agregando la clase Tarea Idéntico a ES6, pero: Se deben declarar los campos antes del constructor. Los campos pueden llevar anotaciones de tipo. id: number significa que id tiene tipo numérico. titulo: string significa que titulo tiene tipo string. Los parámetros del constructor no llevan anotaciones de tipo---podrían no ser números o strings---esto es chequeado dinámicamente. Si los parámetros sí tuvieran anotaciones, entonces se podría chequear estáticamente. Esto es un sistema de tipos gradual. > ng generate class Tarea

Agregando estado a App

Agregando estado a App Se incluye TS dentro de la plantilla encerrado entre {{ }} Excepto cuando es parte de directivas tales como ngFor

Directiva ngFor La directiva ngFor se usa para repetir un elemento de la plantilla de manera de crear/renderizar uno por cada elemento de una iteración. El asterisco * indica que ese elemento es la plantilla padre que se usará para renderizar los elementos de la iteración. El código asociado a ngFor introduce variables dentro del alcance de la plantilla, que pueden ser usadas para su renderizado. En nuestro caso se introduce la variable de iteración t. El arreglo tareas se puede acceder porque es un elemento de la clase AppComponent

Directiva ngFor - variables por defecto Al definir ngFor se pueden declarar variables que se basen en valores disponibles automáticamente: index: la posición del elemento en el arreglo first: booleano que es true sólo si el elemento es el primero en el arreglo last: booleano que es true sólo si el elemento es el último del arreglo even: booleano que es true sólo si el elemento está en posición par odd: booleano que es true sólo si el elemento está en posición impar Deben ser asociadas usando let dentro del valor de ngFor

Directivas Estructurales Las directivas estructurales son aquellas responsables de generar el layout HTML. Se usan para cambiar la estructura del DOM, típicamente mediante la manipulación, adición y remoción de elementos. Una directiva estructural aplica al elemento en la que se declara, y a todos sus descendientes. ngFor: repite un elemento/plantilla para cada variable de iteración ngIf: el elemento sólo se muestra si la condición es verdadera ngSwitch: similar al switch en Javascript, muestra sólo 1 opción entre distintas posibilidades Para ejemplificar esto agreguemos un estado a las tareas: Creada, En proceso, Completada

Directivas Estructurales El enum debe ser parte de la clase

Directivas Estructurales / ngIf Primero podemos usar ngIf para mostrar sólo las tareas que están terminadas… Peeero…. Un elemento sólo puede tener una directiva estructural

Directivas Estructurales / ngIf Primero podemos usar ngIf para mostrar sólo las tareas que están terminadas… Peeero…. Un elemento sólo puede tener una directiva estructural

Directivas Estructurales / ngSwitch Podemos usar ngSwitch para elegir distintos componentes para mostrar la tarea, según sea su estado... > ng generate component tarea-creada > ng generate component tarea-en-proceso > ng generate component tarea-terminada

Directivas Estructurales / ngSwitch Modifiquemos nuestras tareas, para que tengan distintos estados, y veamos cómo modificar cada componente (hay que modificar el constructor de Tarea también!!)

Decorador @Input Usando el decorador @Input indica que tarea es una propiedad de entrada que debe ser especificada al instanciar el componente

Decorador @Input Actualice los otros componentes para que rendericen las tareas con estilos diferentes!!

Directivas Estructurales / ngSwitch ¿Cómo le pasamos información a los sub-componentes, para que tengan acceso al objeto tarea que tienen que renderizar?

Formularios

Creando Formularios Angular provee dos tipos de formularios: Templated-based Forms: se basa en directivas, eventos, y binding bidireccional para hacer seguimiento sobre los valores y validez de los datos ingresados en los formularios… se basa en la sintaxis de templates, y es similar a cómo lo haríamos en HTML/JS normal. Reactive Forms: se trata de construir programáticamente, usando el API de formularios reactivos. Permite centralizar los campos, validaciones y detalles en una sola entidad de código. Hoy veremos el primer tipo de formularios