David Fernando Zuluaga A
@David_fza
@dafer154
zuluaaristi@gmail.com
AngularJS comenzó a ser desarrollado en 2009 por Miško Hevery originalmente era un servicio de almacenamiento online de archivos JSONdonde el cobro dependía del peso en megabytes de cada archivo. Luego de este Angular sufrió una transformación drástica ya que este no era pensado en componentes.
Angular 2 | -- (2014 ) |
---|---|
Angular 4 | -- ( 2015 ) |
Angular 5 | -- ( 2016 ) |
Angular 6 | -- (2017 ) |
Angular 7 | -- ( 2018 ) |
1) VS code -- https://code.visualstudio.com/
2) Atom -- https://atom.io/
3) Sublime Text -- https://www.sublimetext.com/
4) WebStorm -- https://www.jetbrains.com/webstorm/
NodeJS v. 4.x o superior node -V
NPM v 3.x.x o superior npm -V
npm i -g npm
npm i -g angular-cli
https://cli.angular.io
Comandos
Component | ng g component <nombre> |
Directive | ng g directive <nombre> |
Pipe | ng g pipe <nombre> |
Service | ng g service <nombre> |
Class | ng g class <nombre> |
Interface | ng g interface <nombre> |
enum | ng g enum <nombre> |
Module | ng g module <nombre> |
Un módulo o NgModule declara un contexto de compilación para un conjunto de componentes. Un NgModule puede asociar sus componentes con código relacionado, como servicios, para formar unidades funcionales.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Clases que controlan el comportamiento, interacción con el usuario. Cada componente define una clase que contiene data y lógica, y está vinculada a nuestro template HTML.
@Component({
selector: 'app-hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
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; }
}
sirve para asignar un valor a una propiedad de un elemento de un template. Generalmente se trata de un valor obtenido a través de una propiedad del componente, de modo que si el estado del componente cambia, también cambie la propiedad del elemento asignada en el template.
export class UserComponent {
@input() name: string;
@input() lastName: string
}
<my-user [name]="Jessica" [lastName]="Alba">
</my-user>
La sentencia a ejecutar como respuesta a un evento se conoce con el nombre de "statement" en la documentación de Angular. Un statement es la declaración del comportamiento que debe realizarse al dispararse un evento.
<button (click)="procesarEvento($event)">Transmito el objeto evento</button
En el anterior ejemplo, al invocar al método procesarEvento() se le está enviando un $event, que contiene información sobre el evento click que se realizó.
Eventos que se disparan durante la inicializacion y cierre de un componente
<h2>Products</h2>
<div *ngFor="let product of products">
<h3>
{{ product.name }}
</h3>
</div>
@Component({
selector: 'app-hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}
Los metadatos son atributos (datos) que indican como procesar cada clase
Hay tres modos de enlazar datos al DOM:
<li>{{hero.name}} </li>
<hero-detail> [hero] = "selectedHero" </Hero-detail>
<li (Click) = "selectHero(hero)"> </li>
<input [(ngModel)] = "hero.name">
Permiten extender el comportamiento de los componentes Angular. son responsables para la capa del HTML
//Condicional if en HTML
<div *ngIf="hero" class="name">{{hero.name}}</div>
//Ciclo FOR
<ul>
<li *ngFor="let hero of heroes">{{hero.name}}</li>
</ul>
//Condional Switch
<div [ngSwitch]="hero?.emotion">
<app-happy-hero *ngSwitchCase="'happy'" [hero]="hero"></app-happy-hero>
<app-sad-hero *ngSwitchCase="'sad'" [hero]="hero"></app-sad-hero>
<app-confused-hero *ngSwitchCase="'confused'" [hero]="hero"></app-confused-hero>
<app-unknown-hero *ngSwitchDefault [hero]="hero"></app-unknown-hero>
</div>
Su propósito es contener lógica de negocio, clases para acceso a datos o utilidades de infraestructura. Estas clases son perfectamente instanciables desde cualquier otro fichero que las importe.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class CalculatorService {
constructor() {}
public fromKilometersToMiles = kilometers => kilometers * 0.62137;
}
export class ConverterComponent implements OnInit {
public kilometers = 0;
public miles: number;
constructor(private calculatorService: CalculatorService) {}
public ngOnInit() {
this.convert();
}
public convert() {
this.miles = this.calculatorService.fromKilometersToMiles(this.kilometers);
}
}
import { Component } from '@angular/core';
@Component({
selector: 'app-hero-birthday',
template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
birthday = new Date(1988, 3, 15); // April 15, 1988
}
es un cliente con los métodos REST habituales (a continuación), que está basado en Observables. Básicamente es lo que vas a utilizar para hacer llamadas a una API REST y obtener resultados de la misma.
get(url: string, options: {...}): Observable<any>
delete(url: string, options: {...}): Observable<any>
patch(url: string, body: any|null, options: {...}): Observable<any>
post(url: string, body: any|null, options: {...}): Observable<any>
put(url: string, body: any|null, options: {...}): Observable<any>
head(url: string, options: {...}): Observable<any>
options(url: string, options: {...}): Observable<any>
jsonp<T>(url: string, callbackParam: string): Observable<T>
request(first: string|HttpRequest<any>, url?: string, options: {...}): Observable<any>
El nuevo servicio HttpClient te devuelve directamente el body de la respuesta, parseado como JSON. Esta aproximación simplifica el código en la mayoría casos.
//new Angular HttpClient service
http.get('/api/items')
.subscribe(data => { // data is already a JSON object
console.log(data['someProperty']);
});
Para usarlo tenemos que:
El Router en Angular permite habilitar el sistema de navegación en nuestra App. permite que podamos mostrar ciertos componentes dependiendo de la url que estamos utilizando. Adicionalmente, podremos enviar información a través de la url
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="imagen.jpg">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a routerLink="/dashboard">Dashboard</a></h2>
</li>
<li>
<h2><a routerLink="/view/1">View 1</a></h2>
</li>
</ul>
<router-outlet></router-outlet>
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-view1',
templateUrl: './view1.component.html',
styleUrls: ['./view1.component.scss']
})
export class View1Component implements OnInit {
protected id: number;
constructor(
private route: ActivatedRoute
) { }
ngOnInit() {
this.route.params.subscribe( params => this.id = params.id );
}
}