Angular Flashcards
What is the class that Angular provides to make http requests?
HttpClient
Which is the packaga that contains the class HttpClient?
@angular/common/http
Which is the interface over HttpClient relies?
XMLHttpRequest
What are the basic building blocks of Angular?
Angular components
What are Angular NgModules?
NgModules contain Angular Components. They collect related code into functional sets. An application always has at least a root module.
They define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data
Components
They can be injected into components as dependencies, making your code modular, reusable, and efficient.
Service Providers
What are services?
They are for data or logic that isn’t associated with a specific view, and that you want to share across components.
What is injection decorator for?
The decorator provides the metadata that allows other providers to be injected as dependencies into your class. A service class definition is immediately preceded by the @Injectable() decorator.
what is Dependency injection (DI) for?
Dependency injection (DI) lets you keep your component classes lean and efficient. They don’t fetch data from the server, validate user input, or log directly to the console; they delegate such tasks to services.
Que es un decorador?
Un decorador agrega metadata a un componente, como por ejemplo la plantilla que debe quedar asociada.
List some Angular decorators
@Component()
@Directive()
@Pipe()
@Injectable()
@NgModule()
List the forms of Angular Binding
Interpolation
Property binding
Event binding
Attribute binding
Class and style binding
Two-way data binding with ngModel
Cómo se inicia un proyecto Angular?
npm install -g @angular/cli
ng new <my-app></my-app>
Cómo se ejecuta un proyecto Angular?
Navegar hasta la carpeta de la aplicación
ejecutar: “ng serve - - open”
Que signfica el prefijo ng en las directivas Angular?
ng funciona cómo apreviatura para Angular, mas que quedo desde el punto de vista de la pronunciación. También pudo haber sido pensado como ng = new generation.
Que elementos se configuran al usar “ng new”?
Angular routing
Style format como CSS, SCSS, SASS o LESS
Que es un Angular View?
Está definida por un componente y su plantilla.
Donde estan ubicados los modulos?
En la carpeta node_modules
Comando para compilar para producción
ng build
Comando para ejecutar con pruebas
ng test
Que significa PWA?
Progressive web application
Que es Angular Material?
Es una biblioteca de componentes preconstruidos para trabajar interfaces de usuario con Angular.
Cómo se agrega Angular Material a un proyecto?
ng add @angular/material
Que elementos adicionales componentes proporciona Angular Material?
Temas, tipografias y animaciones.
Cómo agregar archivos con variables de entorno en anuglar?
$ ng generate environments
De un ejemplo de template expressions
<h3>Current customer: {{ currentCustomer }}</h3>
<img [src]=”urlImagen + ‘?t=’ + timeStamp”>
De un ejemplo de template statements
<button type=”button” (click)=”deleteHero()”>Delete hero</button>
Cómo se agrega un componente usando angular CLI?
ng generate component xyz
Cómo se configuran las rutas en Angular?
- $ ng generate component <mi-componente></mi-componente>
- Se deben agregar los nuevos componentes al elemento declarations en el archivo app.module.ts
- Se deben agregar los paths al array de rutas en el archivo app-routing.module.ts
Cuales son los tres tipos de directivas?
Attribute Directives
- Component
- Structural Directives
- Attribute Directives
Mencione dos directivas estructurales comunes
*ngIf, *ngFor
De un ejemplo de el uso de la directiva *ngIf
@Component({
selector: ‘app-notification’,
template:
<div *ngIf = ‘showNotif’>
Show Notification
</div>
})
export class AppNotificationComponent {
showNotif = true;
}
En que año sale Angular 2?
2016
De un ejemplo de el uso de una directiva de atributo
import { Directive, ElementRef } from ‘@angular/core’;
@Directive({
selector: ‘[appHighlight]’
})
export class HighlightDirective {
constructor(private el: ElementRef) {
this.el.nativeElement.style.backgroundColor = ‘yellow’;
}
}
/*****/
<p>This is invalid</p>
¿Cómo se crea un servicio?
ng generate service hero
Why services?
Components shouldn’t fetch or save data directly and they certainly shouldn’t knowingly present fake data. They should focus on presenting data and delegate data access to a service.
What is @input() decorator for?
It is for passing properties from parent to childs.
Show an example of @input() decorator use
import { Component, Input } from ‘@angular/core’;
export class ItemDetailComponent {
@Input() item = ‘’;
}
/* From parent */
<app-item-detail [item]=”currentItem”></app-item-detail>
How can we watch for changes on an @input() property?
We can watch them through OnChanges lifecycle hook.
What is @OutPut() decorator for?
The @Output() decorator in a child component or directive lets data flow from the child to the parent.
To raise an event, an @Output() must have the type of EventEmitter
How can we specify a template variable?
In the template, you use the hash symbol, #, to declare a template variable
Give an example of template variable use
<input #phone placeholder=”phone number” />
Mention some testing frameworks that could be used with Angular.
Jest, developed by FaceBook
Mocha, developed by T. J. Holowaychuk, ExpressJS Developer
Jasmin, BDD framework, developed by Pivotal Labs
