Angular 2

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

sudo apt-get install -y nodejs
sudo apt-get update && sudo apt-get -y upgrade
sudo npm install -g angular-cli

Pantilla basica para empezar con Angular 2

git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install
npm start

npm install -g @angular/cli Instalacin global de angular2 y su componente CLI para crear
proyectos.
sudo npm install -g angular-cli

ng new my-app Creacin de un proyecto llamado my-app.

cd my-app Acceso al directorio de la aplicacin.
ng serve open u (-o) Arranque del servidor, con -open o con -o abrimos el navegador.
./src/app/app.component.ts En esta ruta encontramos el primer componente creado por CLI
llamado app.component.ts.
src/app/app.component.css En esta ruta encontramos el fichero de estilo que podemos
manipular para dar estilo a nuestro componente.

Un proyecto CLI de angular es la base para experimentos rpidos y soluciones empresariales.

El primer archivo que debe observar es README.md. Tiene un poco de informacin bsica sobre el uso de los
comandos de la CLI. Siempre que quiera saber ms sobre cmo funciona la CLI de angular, asegrese de
visitar el repositorio angular CLI y Wiki .
Algunos de los archivos generados podran ser desconocidos.

La carpeta src
Su aplicacin vive en la carpeta src. Todos los componentes, plantillas, estilos, imgenes y cualquier otra cosa
que necesite la aplicaciones angular, van aqu. Cualquier archivo fuera de esta carpeta estn destinados a
apoyar la construccin de su aplicacin.

npm start Este comando ejecuta el compilador de transcripcin en "modo

de reloj", se volver a compilar automticamente cuando hayan
cambios en el cdigo. El comando start inicia al mismo tiempo la
aplicacin en un navegador y la actualiza el cuando el cdigo
cambia.
tsc watch Compila un proyecto typeScript de angular2 convirtindolo en .js

npm install Si estamos dentro de un directorio con los archivos bsicos de

Angular, este comando instala un carpeta las dependencias del
frameword. cd miProjecto\npm install
 Estructura de
carpetas & Ficheros
Angular es un marco para construir aplicaciones clientes HTML y JavaScript o un lenguaje TypeScript que
compila a javaScript.

El marco consta de varias bibliotecas, algunas de ellas bsicas y otras opcionales.

Componentes mdulos o NgModules Las aplicaciones Angular son modulare y tienen su propio sistema de
modularidad llamados mdulos angular o NgModules.

Cada aplicacin Angular tiene al menos una clase modular angular denominado AppModule.

Un mdulo angular ya sea un mdulo raz o una funcin, es una clase con un NgModule decorador.

Los decoradores son funciones que modifican clases de JavaScript. Angular tiene muchos decoradores que
adjuntar metadatos a las clases para que sepa lo que significan esas clases y cmo deben funcionar.

NgModule Es una funcin del tipo decorador que toma un nico objeto metadatos cuyas propiedades describe
el mdulo. Las propiedades ms importantes son:
declarations - Una clases de vista que pertenecen a este mdulo. Angular tiene tres tipos de clases de vista:
components , directives y pipes.
Exports - Subconjunto de declaraciones que deben ser visibles y utilizables en las plantillas de componentes
de otros mdulos.
Imports - Otros mdulos cuyas clases exportadas sean necesarias para las plantillas de componentes
declaradas en este mdulo.
Providers - creadores de los servicios que este mdulo contribuye a la coleccin global de servicios; Se
vuelven accesibles en todas las partes de la aplicacin.
Bootstrap - la vista principal de la aplicacin, llamado el componente raz , que aloja todos los otros puntos de
vista de la aplicacin. Slo el mdulo raz debe establecer esta propiedad bootstrap.

Al iniciar una aplicacin, todo nace desde un archivo main.ts, que se encontrara en la ruta ./scr, y que dentro
de l, llamar a un modulo app.module.ts que se encuentra en la ruta ./scr/app, y que a su vez, dentro de l
llamaremos al modulo inicial de la aplicacin importndolo (import { AppTimer } from './app.timer';),
dentro del decorador @NgModule, en las declaraciones, aadimos el mdulo (@NgModule({ declarations:
[ AppTimer ]), y en el apartado proveedores, volvemos a aadir el mdulo (providers: [], ap:
[AppComponent] bootstrap: [AppTimer]).

Mdulos Angular vs Mdulos JavaScript

En Angular, una clase decorada con @NgModule es una caracterstica fundamental de Angular.
En JavaScript, tambien tienen su propio sistema de mdulos para administrar colecciones de objetos, es
completamente diferente y no esta relacionado con el sistema de modular de Angular.
En JavaScript cada archivo es un mdulo y todos los objetos definidos en el archivo pertenece a ese mdulo. El
mdulo declara que algunos objetos son pblicos marcndolos con la palabra reservada export. Otra forma es
declarar importaciones para acceder a objetos publicados en otros mdulos.

Librerias Angular
El vehculo de Angular son una coleccin de mdulos JavaScript. Se puede pensar como mdulos de una
biblioteca.

Cada nombre de la bilioteca de angular comienza con el prefijo @angular.

Se instalan con el paquete npm, se importa con la declaracin de import de JavaScript.
ejemplo -
import { Component } from '@angular/core';

Tambin se puede importar mdulos de la biblioteca de angular, utilizando sentencias de importacin de

JavaScript.
ejemplo -
import { BrowserModule } from '@angular/platform-browser';

Para acceder al material de javascript, agrguelo en los @NgModule metadatos importelos como este.
imports: [ BrowserModule ],

De esta manera, est utilizando los sistemas de mdulos Angular y JavaScript juntos .

Es fcil confundir los dos sistemas porque comparten un vocabulario comn de "importaciones" y
"exportaciones". La confusin cede a la claridad con el tiempo y la experiencia.

Componentes
Un componente controla un parche de pantalla llamado vista. Por ejemplo, las siguientes vistas son
controladas por componentes:
La raz de la aplicacin con los enlaces de navegacin.
La lista de hroes.
El editor del hroe.

Define la lgica de la aplicacin de un componente, lo que hace para soportar la vista, dentro de una clase. La
clase interacta con la vista a travs de una API de propiedades y mtodos.

Por ejemplo, HeroListComponent (Src / app / hero-list.component.ts (class)) tiene una propiedad heroes
que devuelve una matriz de hroes que adquiere de un servicio. HeroListComponent Tambin tiene un
selectHero() mtodo que establece una selectedHeropropiedad cuando el usuario hace clic para elegir un
hroe de esa lista.

export class HeroListComponent implements OnInit {

heroes: Hero[];
selectedHero: Hero;

constructor(private service: HeroService) { }

ngOnInit() {
this.heroes = this.service.getHeroes();
}
 selectHero(hero: Hero) { this.selectedHero = hero; }
}

Angular crea, actualiza y destruye componentes a medida que el usuario se mueve a travs de la
aplicacin. Su aplicacin puede actuar en cada momento segn ciclo de vida a travs de estos ganchos
opcionales del ciclo de vida , como ngOnInit() declarado anteriormente.

Plantillas
Se define como la visin de un componente con su compaero de plantilla . Una plantilla es una forma de
HTML que indica a Angular cmo renderizar el componente.

Una plantilla se ve como HTML normal, a excepcin de algunas diferencias. Aqu hay una plantilla para nuestro
HeroListComponent:

Src / app / hero-list.component.html

<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
<li *ngFor="let hero of heroes" (click)="selectHero(hero)">
{{hero.name}}
</li>
</ul>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

Aunque esta plantilla utiliza elementos HTML tpicos como <h2>y <p>, tambin tiene algunas diferencias.
Cdigo como *ngFor, {{hero.name}}, (click), [hero], y <hero-detail> utiliza angular de sintaxis de la plantilla
.

En la ltima lnea de la plantilla, la etiqueta <hero-detail> es un elemento personalizado que representa un

nuevo componente, HeroDetailComponent.

El HeroDetailComponent es un componente diferente al HeroListComponent que has estado revisando. El

cdigo de HeroDetailComponent (no mostrado) presenta hechos sobre un hroe particular, el hroe que el
usuario selecciona de la lista presentada por el HeroListComponent. El HeroDetailComponent es un hijo de la
HeroListComponent.

import { Component, Input } from '@angular/core';

import { Hero } from './hero';

@Component({
selector: 'hero-detail',
template: `
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div>
<label>id: </label>{{hero.id}}
</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</div>
</div>
`
})
export class HeroDetailComponent {
 @Input() hero: Hero;
}

Observe cmo <hero-detail> descansa cmodamente entre elementos HTML nativos. Los componentes
personalizados se combinan perfectamente con HTML nativo en los mismos diseos.

Metadatos
Los metadatos le indican a Angular cmo procesar una clase.

Mirando hacia atrs en el cdigo de HeroListComponent, se puede ver que es slo una clase. No hay evidencia
de un marco "Angular".

De hecho, HeroListComponent realmente es slo una clase . No es un componente hasta que se lo digas a
Angular .

Al decir angular que HeroListComponent es un componente, adjunta los metadatos a la clase.

En typeScript se adjuntar los metadatos mediante el uso de un decorador . Aqu hay algunos metadatos para
HeroListComponent:

src/app/hero-list.component.ts (metadata)

@Component({
selector: 'hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

Aqu est el @Component decorador, que identifica la clase inmediatamente debajo de ella como una clase
de componente.

El @Component decorador toma un objeto de configuracin requerido con la informacin Angular que
necesita para crear y presentar el componente y su vista.

Aqu estn algunos de las opciones ms tiles de los @Component de configuracin:

selector: Selector CSS que le dice a angular como crear e insertar una instancia de este componente donde
encuentra una etiqueta <hero-list> en la matriz HTML. Por ejemplo, si el HTML de una aplicacin contiene
<hero-list></hero-list>, Angular inserta una instancia de la vista HeroListComponent entre esas etiquetas.

templateUrl: Direccin del mdulo-relativo de plantilla HTML de este componente, se muestra ms arriba .

providers: Matriz de proveedores de inyeccin de dependencia para los servicios que requiere el
componente. Esta es una forma de decirle a Angular que el constructor del componente requiere una
HeroService para que pueda obtener la lista de hroes para mostrar.

Los @Component metadatos de la columna indican a Angular dnde obtener los bloques de construccin
principales que especifique para el componente.

La plantilla, los metadatos y el componente describen conjuntamente una vista.

Aplique otros decoradores de metadatos de una manera similar para guiar el comportamiento de Angular.
@Injectable, @Input Y @Output son algunos de los decoradores ms populares.

La arquitectura que hay que llevar, es que debes agregar metadatos a tu cdigo para que Angular sepa qu
hacer.
El Enlace de Datos
Sin un marco, usted sera responsable de empujar los valores de datos en los controles HTML y convertir las
respuestas de los usuarios en acciones y actualizaciones de valor. Escribir tal lgica push / pull a mano es
tedioso, propenso a errores, y una pesadilla para leer como cualquier programador jQuery experimentado
puede dar f.

Soportes Angular enlace de datos , un mecanismo para coordinar partes

de una plantilla con partes de un componente. Agregue un marcado de
enlace a la plantilla HTML para decirle a Angular cmo conectar ambos
lados.

Como muestra el diagrama, existen cuatro formas de sintaxis de

vinculacin de datos. Cada forma tiene una direccin - hacia el DOM,
desde el DOM, o en ambas direcciones.

El ejemplo de la plantilla HeroListComponent tiene tres formas:

Src / app / hero-list.component.html (vinculante)

<li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero"></hero-detail>
<li (click)="selectHero(hero)"></li>

La interpolacin {{hero.name}} muestra el valor de propiedad del componente hero.name dentro del <li>
elemento.

La [hero] propiedad vinculante pasa el valor de selectedHero desde el padre HeroListComponent a la

heropropiedad del nio HeroDetailComponent.

El evento (click) llama al componente selectHero del mtodo cuando el usuario hace clic en el nombre de un
hroe.

Dos vas de enlace de datos es una cuarta forma importante que combina la propiedad y suceso de unin en
una sola notacin, utilizando la directiva ngModel. Aqu hay un ejemplo de la plantilla HeroDetailComponent:

<input [(ngModel)]="hero.name">

En enlaces de dos vas, un valor de propiedad de datos fluye al cuadro de entrada desde el componente como
con enlace de propiedad. Los cambios del usuario tambin fluyen de nuevo al componente, restableciendo la
propiedad al valor ms reciente, como con el enlace de evento.

Angular procesa todos los enlaces de datos una vez por ciclo de eventos JavaScript, desde la raz del rbol de
componentes de la aplicacin a travs de todos los componentes secundarios.
El enlace de datos juega un papel importante en la comunicacin entre una plantilla y su componente.
El enlace de datos tambin es importante para la comunicacin entre los componentes padre e hijo.
Directivas
Las plantillas angular son dinmicas . Cuando Angular las transforma, transforma el DOM de acuerdo con las
instrucciones dadas por las directivas .

Una directiva es una clase con un @Directive decorador. Un componente es una directiva-con-una-
plantilla; un @Component decorador es en realidad un @Directive decorador ampliado con
caractersticas orientadas plantilla.

Mientras que un componente es tcnicamente una directiva , los componentes son tan distintivos y
centrales para las aplicaciones angular que esta descripcin arquitectnica separa los componentes de las
directivas.
Otros tipos existen de instrucciones: estructurales y de atributos de directivas.

Tienden a aparecer dentro de una etiqueta de elemento como lo hacen los atributos, a veces por su nombre
pero ms a menudo como destino de una asignacin o vinculacin.

Las directivas estructurales alteran el diseo aadiendo, eliminando y reempla zando elementos en el
DOM.

La plantilla de ejemplo utiliza dos incorporados en las directivas estructurales:

src/app/hero-list.component.html (structural)

<li *ngFor="let hero of heroes"></li>

<hero-detail *ngIf="selectedHero"></hero-detail>

*ngFor - Le dice a Angular que borre una <li>por cada hroe en la heroeslista.
*ngIf - Incluye el HeroDetailcomponente slo si existe un hroe seleccionado.

Las directivas de atributo alteran la apariencia o el comportamiento de un elemento existente. En plantillas se

ven como atributos HTML normales, de ah el nombre.

La directiva ngModel, que implementa la vinculacin bidireccional de datos, es un ejemplo de una directiva de
atributo. NgModel modifica el comportamiento de un elemento existente (normalmente un <input>)
estableciendo su propiedad valor de la pantalla y responder a los cambios hechos.

<input [(ngModel)]="hero.name">

Angular tiene unas pocas directivas ms que, o bien alteran la estructura de disposicin (por ejemplo,
ngSwitch ) o modifican aspectos de elementos y componentes de DOM (por ejemplo, ngStyle y ngClass ).

Por supuesto, tambin puede escribir sus propias directivas. Componentes como HeroListComponent son un
tipo de directiva personalizada.
Servicios
El servicio es una categora amplia que abarca cualquier valor, funcin o funciones que su aplicacin necesita.
Casi cualquier cosa puede ser un servicio. Un servicio es tpicamente una clase con un propsito estrecho y
bien definido. Debe hacer algo especfico y hacerlo bien. Ejemplos:

Servicio de registro
Servicio de datos
Bus de mensajes
Calculo de impuestos
Configuracin de la aplicacin

No hay nada en concreto en angular sobre los servicios. Angular no tiene definicin de servicio. No existe una
clase base de servicio ni un lugar para registrar un servicio.

Sin embargo, los servicios son fundamentales para cualquier aplicacin Angular. Los componentes son
grandes consumidores de servicios.

A continuacin se muestra un ejemplo de una clase de servicio que se registra en la consola del navegador:
Src / app / logger.service.ts (class)

export class Logger {

log(msg: any) { console.log(msg); }
error(msg: any) { console.error(msg); }
warn(msg: any) { console.warn(msg); }
}

Aqu hay una HeroService que usa un promise (Calculos asincronos) para buscar hroes. El HeroService
depende del Logger servicio y otro BackendService que maneja el trabajo de comunicacin del servidor.

Src / app / hero.service.ts (class)

export class HeroService {

private heroes: Hero[] = [];

constructor(
private backend: BackendService,
private logger: Logger) { }

getHeroes() {
this.backend.getAll(Hero).then( (heroes: Hero[]) => {
this.logger.log(`Fetched ${heroes.length} heroes.`);
this.heroes.push(...heroes); // fill cache
});
return this.heroes;
}
}

Los servicios estn en todas partes.

Las clases de componentes deben ser ajustadas. No obtienen datos del servidor, validan la entrada del usuario
o registran directamente en la consola. Delegan estas tareas en los servicios.

El trabajo de un componente es permitir la experiencia del usuario y nada ms. Media entre la vista
(representada por la plantilla) y la lgica de la aplicacin (que a menudo incluye alguna nocin de un modelo ).
Un buen componente presenta propiedades y mtodos para la unin de datos. Delega todo lo que no es trivial a
los servicios.
Angular no hace cumplir estos principios. No se quejar si escribe un "fregadero de cocina" como componente
con 3000 lneas.

Angular le ayuda a seguir estos principios hacindolo fcil factorizar su lgica de aplicacin en servicios y
poner esos servicios a disposicin de los componentes a travs de la inyeccin de dependencia .

Inyeccin de dependencias
La inyeccin de dependencia es una manera de suministrar una nueva instancia de una clase con las
dependencias completamente formados que requiere. La mayora de las dependencias son servicios. Angular
utiliza la inyeccin de dependencia para proporcionar a los nuevos componentes los servicios que necesitan.

Angular puede decir qu servicios necesita un componente mirando los tipos de sus parmetros de
constructor. Por ejemplo, el constructor de HeroListComponenta HeroService:

Src / app / hero-list.component.ts (constructor)

constructor(private service: HeroService) { }

Cuando Angular crea un componente, primero solicita un inyector para los servicios que requiere el
componente.

Un inyector mantiene un contenedor de instancias de servicio que ha creado previamente. Si una instancia de
servicio solicitada no est en el contenedor, el inyector hace uno y lo aade al contenedor antes de devolver el
servicio a Angular. Cuando todos los servicios solicitados han sido resueltos y devueltos, Angular puede llamar
al constructor del componente con esos servicios como argumentos. Esta es la inyeccin de dependencia .

El proceso de inyeccin de HeroService se parece un poco a esto:

Si el inyector no tiene una HeroService, cmo sabe cmo hacer una?

En resumen, debe haber registrado previamente un proveedor de la HeroService con el inyector. Un proveedor
es algo que puede crear o devolver un servicio, normalmente la clase de servicio en s.

Puede registrar proveedores en mdulos o en componentes.

En general, agregue proveedores al mdulo raz para que la misma instancia de un servicio est disponible en
todas partes.

Src / app / app.module.ts (proveedores de mdulos)

providers: [
BackendService,
HeroService,
 Logger
],