Angular

A partir de la versión 2 AngularJS pasó a llamarse Angular a secas. Si tu cursada utiliza Angular 1 deberías ir a la página específica de AngularJS 1. La versión actual de Angular es la 6 (ya no tiene el sufijo JS).

Instalación del entorno

Es necesario que instales las siguientes herramientas, en este orden:

  1. Si estás en entorno Windows te recomendamos instalarte Git Bash
  2. Seguimos con NodeJS, preferentemente la última versión.
  3. Luego NPM (Node Package Manager), con el que vamos a hacer los builds de nuestras aplicaciones.
  4. El Angular CLI (Command line interface) se instala con npm:
  1. El editor de texto que vamos a soportar en la cursada es Visual Studio Code (hay una versión portable si estás en una máquina sin privilegios de administrador).
    1. Otra opción es utilizar Web Storm (IntelliJ), si tienen una cuenta de la facultad pueden solicitar una licencia educativa. Solo que como no vamos a aprovechar todas las herramientas de este IDE poderoso quizás convenga ir por el Visual Studio Code.
  2. Los plugins del Visual Studio Code que te recomendamos al 2018 son:
    1. TypeScript Hero: herramientas generales para programar en Typescript
    2. Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout: autocompletado de templates de Angular
    3. Angular Files: permite generar desde el menú de visual studio code componentes, pipes, servicios, etc.
    4. y como chiche extra: VSCode simpler Icons with Angular para tener íconos diferentes (hay que seguir los pasos de instalación de la página del plugin)

Aprendiendo Typescript

Typescript es el lenguaje de programación base para Angular. Tranquilo, es muy similar a los lenguajes orientados a objetos en los que ya trabajaste. Para iniciarte o para hacer consultas te dejamos estos links:

Crear un proyecto Angular desde cero

En la consola Git Bash o bien desde una terminal de Linux hacemos

Correr los tests de un proyecto

Para ejecutar los tests de un proyecto, te posicionás en el directorio raíz y ejecutás desde la consola

Secuencia didáctica

El contenido se desarrolla a partir de una estructura didáctica de ejemplos, cuyo orden recomendado es el siguiente:

  • Conversor: aquí aprenderás sobre cómo crear una aplicación desde cero con Angular CLI, el mecanismo de binding entre vista y modelo dentro de un formulario template, las validaciones, las transformaciones de datos (pipes built-in) y el testeo unitario. Para la vista se utiliza el framework Bootstrap Twitter.
  • Componentes reutilizables: en este ejemplo se muestra cómo crear componentes reutilizables que tienen su propio estado, en particular
    • un componente que muestra un usuario dentro de una tabla HTML de usuarios
    • un componente contador que muestra un número y permite que el usuario sume o reste ese valor de a uno
    • Para la vista se utiliza el framework Material Design.
  • Apuestas de una ruleta: combos combinados para apostar a pleno o docena, manejo de validaciones de un formulario.
  • Búsqueda de libros: a partir de aquí vemos los services de Angular como objetos encargados de conocer un origen de datos y recolectar información. En principio el servicio es solamente local. El ejemplo cuenta también la definición de pipes custom para filtrar una búsqueda en forma local + el testeo unitario de un componente utilizando un stub del servicio de Angular. Para la vista se utiliza el framework Material Design for Bootstrap, que de aquí en adelante será nuestro estándar.
  • Tareas Routing: muestra un ejemplo de aplicación Master/Detail, donde se genera un Alta-Modificación de Tareas pendientes, y se introduce el framework de routing de Angular que permite definir la navegación de componentes
  • Tareas:
  • Streaming - series y películas: componentes visuales reutilizables para agregar diferentes colecciones de una serie o película, uno para actores y otro para calificaciones de la película. También la serie y la película comparten un componente padre donde cargan la información compartida, solo se define una vez.