Jesús Rodríguez
Escritor técnico
@Foxandxss
Foxandxss
Angular CLI
- Sin herramientas visibles
- Generadores
- Entornos para desarrollo y producción
- Muchas cosas más
Componentes
- Páginas o secciones de estas
- Típicos widgets
<user-details [user]="user"></user-details><ngb-datepicker [(ng-model)]="date"></ngb-datepicker>
<ngb-rating [(rate)]="currentRate"></ngb-rating>Componentes
Metadatos
@Component({
selector: 'osc-cmp',
template: `<div>Hola, {{place}}</div>`,
styles: '...',
animations: '...'
})Implementación
export class UserDetailComponent {
place = 'Opensouthcode';
}Directivas
Estructurales
<ng-template [ngIf]="isAdmin">
<form>
Administrator login form
...
</form>
</ng-template>¿Y esa sintaxis tan larga?
<form *ngIf="isAdmin">
Administrator login form
...
</form>Directivas
De atributo
<div>Your final score is: <span oscHighlight>10</span>¿Cómo se hace?
@Directive({
selector: '[oscHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'lightgreen';
}
}Servicios
Son clases normales y corrientes
@Injectable()
export class UserService {
constructor(private http: Http) { }
getUsers() { ... }
getUser(id: number) { ... }
}Módulos
Un registro de las diferentes partes de nuestra aplicación
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, FooComponent],
providers: [UserService],
exports: [FooComponent],
bootstrap: [AppComponent]
})
export class AppModule {}Router
const routes: Routes = [
{ path: '', redirectTo: '/languages', pathMatch: 'full' },
{ path: 'languages', component: LanguageListComponent },
{ path: 'languages/:id', component: LanguageDetailsComponent }
];Una lista de rutas
Y exportamos un módulo
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}Router
<a [routerLink]="language.id">{{Language.name}}</a>Para movernos a otra ruta
Para adquirir el parámetro
constructor(private activatedRoute: ActivatedRoute) {
this.langId = activatedRoute.snapshot.params['id'];
}<router-outlet></router-outlet>Y un lugar donde "cargar" las rutas
Pipes
Transforman nuestros datos
@Component({
selector: 'osc-foo',
template: '<div>{{text}}</div>'
})
export class FooComponent {
text = 'hello world';
}@Pipe({ name: 'capitalize'})
export class CapitalizePipe implements PipeTransform {
transform(value: string, all: boolean) {
if (all) {
return value.split(' ').map(word => {
return word[0].toUpperCase() + word.substring(1);
}).join(' ');
} else {
return value[0].toUpperCase() + value.substring(1);
}
}
}Pipes
¿Cómo se usa?
<div>{{text | capitalize}}</div>
<div>{{text | capitalize: true}}</div>Algunos pipes incluidos
<div>{{money | currency}}</div>
<div>{{today | date}}</div>
<div>{{obj | json }}</div>HTTP
Basado en Observables
let req = http.get(...)
.map(res => {
// Hacer algo con el resultado
});
req.filter(res => {
// Filtrar resultado
})
.subscribe(res => {
// Subscribirse al resultado
});GRACIAS
opensouthcode-angular
By Jesus Rodriguez
opensouthcode-angular
"Introduccion a Angular", Opensouthcode 2017
