Usuario:ManuelRomero/angular


 * Instalar angular cli
 * Cuidar versiones de node y de npm
 * Yo acutalicé


 * Ahora verificamos versiones


 * Crear un wordspace e inicializar la aplicación
 * Durante la creación del nuevo proyecto, me salen una serie de errores al final, relacionados con pemisos del tipo
 * Busco en stackoverflow y soluciono


 * Vuelvo a crear el proyecto y todo correcto


 * Abriendo el servidor
 * Entramos en el directorio del nuevo proyecto
 * Levantamos un servidor web que lleva el proyecto incoporado, lo levanta bajo el puerto 4200


 * Al crear el nuevo proyecto se crea un directorio con una gran estructura de carpetas y ficheros


 * Dentro de ella tenemos un directorio app que es dónde están los principales componentes de la aplicación

wrench Component: my-component.component.ts art Styles: my-component.component.css iphone Template: my-component.component.html clipboard Tests: my-component.component.specs.ts
 * La forma de construir una apliación Angular es con componentes
 * El componente base es AppComponent e importará al resto de componentes con injecciones de dependencias.(MRM ???)
 * Se divide este AppComponent en 4 ficheros
 * ts TypeScript tendría la parte de la lógica
 * html La plantilla o Vista
 * css Fichero de estilo

Tecnologías usadas en Angular
Es la lógica, escrito en Typescript un lenguaje muy parecdio a js con particularidades propias como el tipado El fichero .ts es transpilado a .js https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html Node es un entorno que implementa las acciones en el servidor Dos ejemplos importantes son los de asincronía (Observable, Promise, etc.) y especialmente servicios e inyección de dependencias. https://angular.io/guide/architecture-services
 * Typescript
 * Por ejemplo si tenemos un fichero index.ts
 * Node.js
 * Patrones de diseño

Creando un compomente nuevo

 * Dentro de app habrá creado una carpeta heroes con 4 ficheros (spect.ts y ts, html y css)
 * A la hora de implementar el controlador o ts
 * Vemos el código que se ha generado

{{MRM_Actividad|Title=Contenido| importamos el Component del núcleo de angular Especifica propiedades de metadatos
 * import { Component, onInit} from '@angular/core'
 * #Component
 * 1) selector
 * 2) templateURL
 * 3) styleUF

Creo un módulo
export class
 * Juego con el ts para dar comportamiento, html para visualizarlo (de ese componente)
 * css para estilos (de ese componente, que es como si fuera una página web independiente que luego
 * El tema de test lo veremos más adelante
 * incorporaremos como parte de nuestro proyecto un nuevo componente llamado heroes
 * Se agrega de forma automática el módulo en el fichero app.component.ts añadiendo lo siguiente
 * También se añade el nombre del módulo o componente en la sección de declaracione s
 * En el componente especificamos la forma en el que lo vamos a referencias

doble binding
Two-way binding [(ngModel)]=propiedad
 * Unión o enlazado doble
 * La variable o propiedad en el modelo actualiza el valor en la vista y el valor de la vista actualiza la variable o propiedad.

Formularios

 * Angular tiene dos formas de gestionar los formularios:
 * 1) Reactive forms formularios reactivos, son robustos y escalables
 * 2) Template-driven Formularios basados en plantillas: Mas sencillos de utilizar, pero menos reusables y robustos.
 * Template-diven

TypeScript
Los elementos declarados con typesacirp tienen un alcance local, y se ejecutan en el ámbito en el que han sido declarados. para usarlos fuera de ese scope, debemos exportarlo con ''export' https://www.typescriptlang.org/docs/handbook/modules.html#export
 * export
 * Declarar una clase


 * Declarar un objeto

cliclo de vida de los componentes gestionados por Angular

 * Angular gestiona el ciclo de vida de un componente. Durante este proceso se van a invocar a determinados interfaces que implementando podemos aportar código en ese momento.
 * ngOnInit =>
 * Se invoca después de crear el componente u objeto y asignar las propiedades.
 * Poner aquí la lógica de inicialización en lugar del método construct.

Pipes
https://angular.io/api/core/PipeTransform https://angular.io/guide/pipes
 * Es un modo de mostrar (formato) un determinado valor transformándolo. por ejemplo mostrar todo en mayúsculas, un determinado formato de fehca, decimales, monedas, ....

Introducing Angular pipes, a way to write display-value transformations that you can declare in your HTML. The ngOnInit is a lifecycle hook. Angular calls ngOnInit shortly after creating a component. It's a good place to put initialization logic.

Always export the component class so you can import it elsewhere ... like in the AppModule.