linkedin-skill-assessments-quizzes

Angolare

D1. Qual è lo scopo del decoratore ViewChild in questa classe di componenti?

@Component({
    ...
    template: '<p #bio></p>'
})
export class UserDetailsComponent {
    @ViewChild('bio') bio;
}

DigitalOcean - viewchild-access-component

D2. Quale metodo viene utilizzato per collegare un FormControl a un elemento di input DOM nativo in moduli reattivi?

Angular.io - Gruppi di moduli reattivi

D3. Qual è la differenza tra il paramMap E la queryParamMap sul ActivatedRoute classe?

StackOverflow

D4. In base al seguente utilizzo della pipe asincrona e supponendo che il campo della classe users sia un Observable, quante sottoscrizioni agli utenti Observable vengono effettuate?

<h2>Names</h2>
<div *ngFor="let user of users | async"></div>
<h2>Ages</h2>
<div *ngFor="let user of users | async"></div>
<h2>Genders</h2>
<div *ngFor="let user of users | async"></div>

UltimateCourses

D5. Come è possibile utilizzare HttpClient per inviare una richiesta POST a un endpoint da una funzione addOrder in questo OrderService?

export class OrderService {
  constructor(private httpClient: HttpClient) {}

  addOrder(order: Order) {
    // Missing line
  }
}

Angular.io - Invio di dati al server

D6. A cosa serve il metodo RouterModule.forRoot?

O ‘ REILLY

D7. Su quali elementi DOM corrisponderà questo selettore di metadati dei componenti?

@Component({
    selector: 'app-user-card',
    . . .
})

Angular.io - Metadati dei componenti

D8. Qual è la sintassi del modello corretta per l’utilizzo della direttiva strutturale ngFor incorporata per eseguire il rendering di un elenco di productNames?

<ul>
  <li [ngFor]="let productName of productNames"></li>
</ul>
<ul>
  <li ngFor="let productName of productNames"></li>
</ul>
<ul>
  <li *ngFor="let productName of productNames"></li>
</ul>
<ul>
  <? for productName in productNames { ?>
  <li></li>
  <? } ?>
</ul>

Angular.io - Direttive strutturali

D9. Quali sono le proprietà dei metadati del decoratore a due componenti utilizzate per impostare gli stili CSS per un componente?

Angular.io - Stili dei componenti

D10. Con la classe di componenti seguente, quale sintassi del modello verrà utilizzata nel modello per visualizzare il valore del campo della classe title?

@Component({
  selector: 'app-title-card',
  template: '',
})
class TitleCardComponent {
  title = 'User Data';
}

Angular.io - Interpolazione di stringhe o Interpolazione di testo

D11. Qual è lo scopo del metodo valueChanges in un oggetto FormControl?

Angular.io - Visualizzazione di un valore di controllo from

D12. Quale direttiva viene utilizzata per collegare un <a> tag al routing?

Angular.io - RouterLink

D13. A cosa serve il decoratore Output in questa classe di componenti?

@Component({
    selector: 'app-shopping-cart',
    . . .
})
export class ShoppingCartComponent {
    @Output() itemTotalChanged = new EventEmitter();
}

Angular.io - Invio di dati al componente padre

D14. Qual è la differenza tra questi due esempi di markup per la gestione condizionale della visualizzazione?

<div *ngIf="isVisible">Active</div>
<div [hidden]="!isVisible">Active</div>

StackOverflow

D15. Come è possibile disabilitare il pulsante di invio quando il modulo presenta errori in questo esempio di moduli basati su modelli?

<form #userForm="ngForm">
  <input type="text" ngModel name="firstName" required />
  <input type="text" ngModel name="lastName" required />
  <button (click)="submit(userForm.value)">Save</button>
</form>
<button (click)="submit(userForm.value)" disable="userForm.invalid">Save</button>
<button (click)="submit(userForm.value)" [disabled]="userForm.invalid">Save</button>
<button (click)="submit(userForm.value)" [ngForm.disabled]="userForm.valid">Save</button>
<button (click)="submit(userForm.value)" *ngIf="userForm.valid">Save</button>

Angular.io - Invia il modulo con ngSubmit

D16. Si desidera vedere quali file verrebbero generati creando un nuovo componente della scheda contatto. Quale comando useresti?

Angular.io - ng genera opzioni

D17. In base al componente seguente, quale sintassi del modello verrà utilizzata per associare il campo titleText di TitleCardComponent alla proprietà title dell’elemento h1?

@Component({
  selector: 'app-title-card',
  template: '<h1 title="User Data"> </h1>',
})
export class TitleCardComponent {
  titleText = 'User Data';
}

Angular.io - Interpolazione delle stringhe

D18. Cosa sono gli hook angolari per il ciclo di vita?

Angular.io - Ganci per il ciclo di vita

D19. Scegli la descrizione migliore per questo codice di sintassi del modello:

<span>Boss:  </span>

StackOverflow

D20. Come si configura una definizione di route per un oggetto UserDetailComponent che supporta il percorso URL user/23 (dove 23 rappresenta l’ID dell’utente richiesto)?

CodeCraft - Percorsi parametrizzati

D21. Cosa stanno facendo i decoratori HostListener e il decoratore HostBinding in questa direttiva?

@Directive({
  selector: '[appCallout]',
})
export class CalloutDirective {
  @HostBinding('style.font-weight') fontWeight = 'normal';

  @HostListener('mouseenter')
  onMouseEnter() {
    this.fontWeight = 'bold';
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.fontWeight = 'normal';
  }
}

DigitalOcean

D22. Quale sintassi del modello angolare è possibile utilizzare in questo campo modulo basato su modello per accedere al valore del campo e verificare la convalida all’interno del markup del modello?

<input type="text" ngModel name="firstName" required minlength="4" />
<span *ngIf="">Invalid field data</span>

Angular.io -Mostra e nascondi errore di convalida

Medio

D23. Qual è il tipo di valore che verrà archiviato nella variabile di riferimento del modello headerText in questo markup?

<h1 #headerText>User List</h1>

Pluralsight - Variabile di riferimento del modello

D24. Qual è la differenza, se presente, della logica di codice risultante basata su queste due configurazioni del provider?

[{ provide: FormattedLogger, useClass: Logger }][{ provide: FormattedLogger, useExisting: Logger }];

Angular.io - Provider di dipendenze

TektutorialHub

D25. Qual è lo scopo della proprietà data (vista nell’esempio seguente) in una configurazione di route?

  {
      path: 'customers',
      component: CustomerListComponent,
      data: { accountSection: true }
  }

TektutorialsHub

StackOverflow

D26. Come funziona il built-in ngIf direttiva strutturale modificare il DOM renderizzato in base a questa sintassi del modello?

@Component({
  selector: 'app-product',
  template: '<div *ngIf="product"></div>',
})
export class ProductComponent {
  @Input() product;
}

Riferimento (angular.io)

D27. Che cosa fa questo codice?

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

Angular.io - Il NgModule di base

D28. Quale scelta descrive meglio ciò che il risolvere in questa configurazione di route?

{
   path: ':id',
   component: UserComponent,
   resolve: {
     user: UserResolverService
   }
}

angular.io

D29. Qual è lo scopo del decoratore ContentChildren in questa classe di componenti?

@Component({
 . . .
 template: '<ng-content></ng-content›'
})
export class TabsListComponent {
 @ContentChildren(TabComponent) tabs;
}

betterprogramming.pub

D30. Affinché Angular possa elaborare i componenti in un’applicazione, dove devono essere registrati i tipi di componenti?

angular.io

D31. Qual è lo scopo del fixture.detectChanges() chiamare in questo unit test?

TestBed.configureTestingModule({
  declarations: [UserCardComponent],
});
let fixture = TestBed.createComponent(UserCardComponent);

fixture.detectChanges();

expect(fixture.nativeElement.querySelector('h1').textContent).toContain(
  fixture.componentInstance.title,
);

angular.io

D32. Che aspetto avrà il segmento url in base alla seguente chiamata al Router.navigate quando goToUser viene passato il valore 15?

export class ToolsComponent {
  constructor(private router: Router) {}
  goToUser(id: number) {
    this.router.navigate(['user', id]);
  }
}

angular.io

D33. Quando un servizio viene fornito per root e viene anche aggiunto alla configurazione del provider per un modulo lazy-loaded, quale istanza di tale servizio fornisce l’iniettore ai costruttori nel modulo lazy-loaded?

D34. Cosa sta facendo il decoratore HostBinding in questa direttiva?

@Directive({
  selector: ' [appHighlight] ',
})
export class HighlightDirective {
  @HostBinding('class.highlighted') highlight = true;
}

StackOverflow

D35. Nei moduli reattivi, quale tipo di classe di modulo Angular viene utilizzato sul DOM nativo <form> elemento per cablarlo?

D36. Supponendo che il nome utente FormControl sia stato configurato con un validatore minLength, come è possibile impostare una visualizzazione degli errori nel seguente markup dei moduli reattivi per il campo nome utente?

<form [formGroup]="form"
  <input type="text" formControlName= "username"
  ...
</form>
  <span *ngIf="username.minLength.invalid"
      Username length is not valid
  </span>
<input type="text" formControlName="username" [showMinLength]="true"
  <span *ngIf="form.get('username').getError('minLength') as minLengthError">
    Username must be at least  characters.
  </span>
  <input type="text" formControlName="username" #userName="ngModer">
  <span *ngIf="userName.errors.minlength"
    Username must be at least  characters.
  </span>

Codice

D37. In che modo la modalità di incapsulamento della vista emulata gestisce i CSS per un componente?

Angular.io

D38. Con la seguente configurazione di TestBed, cosa è possibile utilizzare per accedere al DOM renderizzato per UserCardComponent?

TestBed.configureTestingModule({
  declarations: [UserCardComponent],
});
let fixture = TestBed.createComponent(UserCardComponent);

StackOverflow

Angular.io

D39. Dati questi due componenti, cosa verrà renderizzato al DOM in base all’utilizzo del markup?

@Component({
 selector: 'app-card',
 template: '<h1>Data Card</h1><ng-content></ng-content>'
})
export class CardComponent { }

@Component({
 selector: 'app-bio',
 template: '<ng-content></ng-content>.
})
export class BioComponent { }

// markup usage:
<app-card><app-bio>Been around for four years.</app-bio></app-card>
 <app-card>
  <h1>Data Card</hl>
  <app-bio>
   Been around for four years.
  </app-bio>
 </app-card>
<h1>Data Card</h1>
 <app-bio>
  Been around for four years.
 </app-bio>
<app-card>
  <h1>Data Card</hl>
  <ng-content></ng-content>
  <app-bio>
   Been around for four years.
   <ng-content></ng-content>
  </app-bio>
</app-card>
<app-card>
  <h1>Data Card</hl>
</app-card>

D40. Dato il componente app-title-card nel codice seguente, quale DOM eseguirà il rendering del componente app-user-card?

@Component({
   selector: 'app-user-card',
   template: '<app-title-card></app-title-card><p>Jenny Smith</p>'
})

@Component({
   selector: 'app-title-card',
   template: '<h1>User Data</hl>'
})

// usage of user card component in parent component html
<app-user-card></app-user-card>
<app-user-card>
  <app-title-card>
    <h1>User Data</h1>
  </app-title-card>
  <p>Jenny Smith</p>
</app-user-card>
<h1>User Data</h1>
<p>Jenny Smith<p>
<app-user-card>
  <app-title-card></app-title-card>
</app-user-card>
<div app-user-card>
  <h1 app-title-card>User Data</h1>
  <p>Jenny Smith</p>
</div>

D41. Scegli il codice corrispondente per la registrazione del provider personalizzato che il decoratore @Inject () sta cercando:

constructor(@Inject('Logger') private logger) { }
providers: [Logger];
providers: [{ provide: 'Logger', useClass: Logger }];
@Injectable({
    providedln: 'root'
})
providers: [{ provide: 'Logger' }];

StackOverflow

TektutorialHub

Angular.io - Dependency Injection In Azione

D42. Quale scelta descrive meglio il seguente utilizzo del metodo HttpClient.get nel metodo della classe getsettings?

export class SettingsService {
    constructor(private httpClient: HttpClient) { }
    ...

getSettings()
{
    return this.httpClient.get<Settings>(this.settingsUrl)
        .pipe(
            retry(3)
        );
}}

learnrxjs.io

dev.to

D43. Quando un servizio richiede un’installazione per inizializzare lo stato predefinito tramite un metodo, come è possibile assicurarsi che tale metodo venga richiamato prima che il servizio venga iniettato ovunque?

D44. Quale affermazione descrive meglio questo utilizzo del TestBed?

const spy = jasmine.createSpyObj('DataService', ['getUsersFromApi']);
TestBed.configureTestingModule({
  providers: [UserService, { provide: DataService, useValue: spy }],
});
const userService = TestBed.get(UserService);

D45. Qual è la differenza principale tra un componente e una direttiva?

StackOverflow

D46. Cosa si potrebbe aggiungere a questa classe di direttiva per consentire di impostare la lunghezza del troncato durante l’utilizzo della direttiva nel markup?

  @Directive({
      selector: '[appTruncate]'
  })
  export class TruncateDirective {
      . . .
  }

  // example of desired usage:
  <p [appTruncate]="10">Some very long text here</p>

Angular.io

StackOverflow

D47. Come è possibile passare i parametri di query a questo HttpClient.get richiesta?

export class OrderService {
  constructor(private httpClient: HttpClient) {}

  getOrdersByYear(year: number): Observable<Order[]> {
    return this.httpClient.get<Order[]>(this.ordersUrl);
  }
}
const options = { params: new HttpParams().set('year', year) };
return this.httpClient.get<Order[]>(this.ordersUrl, options);
getOrdersByYear(year: number): Observable<Order[]> {
    return this.httpClient.addParam('year', year).get<Order[]>(this.ordersUrl, year);
}

StackOverflow

TektutorialHub

D48. Supponendo il DataService è stato registrato nei provider per l’applicazione, quale risposta descrive meglio cosa succede in base al costruttore di questo componente?

    @Component({
        ...
    })
    export class OrderHistoryComponent {
        constructor(private dataService: DataService) {}
        ...
    }

StackOverflow

Angular.io - Iniezione di dipendenze

D49. Completare questo markup utilizzando il comando ngIf direttiva per implementare un altro caso che visualizzerà il testo “L’utente non è attivo”:

<div *ngIf="userIsActive; else inactive">
  Currently active!
</div>
<div #inactive>User is not active.</div>
<div *ngIf="inactive">
  User is not active.
</div>
<ng-template #else="inactive">
  <div>User is not active.</div>
</ng-template>
<ng-template #inactive>
  <div>User is not active.</div>
</ng-template>

Angular.io

D50. Qual è la sintassi corretta per una definizione di route per caricare pigramente un modulo di feature?

  {
      path: 'users',
      lazy: './users/users.module#UsersModule'
  }
{
    path: 'users',
    loadChildren: () => import('./users/users.module').then(m => m.UserModule)
}
{
    path: 'users',
    loadChildren: './users/users.module#UsersModule'
}
{
    path: 'users',
    module: UsersModule
}

Angular.io - Moduli di caricamento pigro

D51. Descrivere come viene impostata e configurata la convalida in questo esempio di moduli reattivi:

export class UserFormControl implements OnInit {
    ...
    ngOnInit() {
        this.form = this.formBuilder.group({
            username: this.formBuilder.control('',
                [Validators.required, Validators.minLength(5), this.unique]),
        )};
    }
    unique(control: FormControl) {
        return control.value !== 'admin' ? null: {notUnique: true};
    }
}

Angular.io - Convalida del modulo

Angular University Blog

D52. Cosa fa il decoratore iniettabile in questa classe di servizio?

@Injectable({
    providedIn: 'root'
)}
export class DataService { }

Angular.io

D53. Descrivi l’utilizzo di questo codice

export interface AppSettings {
  title: string;
  version: number;
}
export const APP_SETTINGS = new InjectionToken<AppSettings>('app.settings');

D54. Per l’esempio di moduli basati su modello seguente, quale argomento può essere passato al metodo di invio nell’evento click per inviare i dati per il modulo?

<form #form="ngForm">
  <input type="text" ngModel="firstName" />
  <input type="text" ngModel="lastName" />
  <button (click)="submit()">Save</button>
</form>

D55. Qual è lo scopo della configurazione della proprietà prelodingStrategy in questo codice router?

RouterModule.forRoot(
  ...{
    preloadingStrategy: PreloadAllModules,
  },
);

D56. Qual è un modo alternativo per scrivere questo markup per associare il valore del campo della classe userName al h1 proprietà element title?

<h1 [title]="userName">Current user is </h1>

D57. Cos’è il async pipe facendo in questo esempio?

@Component({
  selector: 'app-users',
  template: '<div *ngFor="let user of users | async"></div>',
})
export class UsersComponent implements OnInit {
  users;
  constructor(private httpClient: HttpClient) {}
  ngOnInit(): void {
    this.users = this.httpClient.get<{ name: string }>('users');
  }
}

D58. Come utilizzeresti questa direttiva nel markup in base al suo valore di selezione

@Directive({
	selector: '[appTruncate]'
})
export class TruncateDirective{
	. . .
}

D59. Quale hook del ciclo di vita può essere utilizzato su un componente per monitorare tutte le modifiche ai valori @Input su quel componente?

Come rilevare quando un valore @Input() cambia in Angular?

D60. Quale sarebbe un esempio di utilizzo della sintassi del modello di questa pipe personalizzata?

@Pipe({ name: 'truncate' })
export class TruncatePipe implements PipeTransform {
	transform(value: string, maxLength: number, showEllipsis: boolean){
		const newValue = maxLength ? value.substr(0, maxLength): value;
		return showEllipsis ? '${newValue}...` : newValue;
	}
}

[ricontrolla le risposte]

D61. Quale comando Angular CLI verrà eseguito per generare un oggetto UsersComponent e aggiungerlo a SharedModule (nel file shared.module.ts nell’applicazione)?

[ricontrolla le risposte]

D62. Come è possibile riscrivere questo markup in modo che il contenitore div non sia necessario nel rendering DOM finale

<div *ngIf="location">
	<h1></h1>
	<p></p>
</div>
<div *ngIf="location">
	<h1></h1>
	<p></p>

<ng-template *ngIf="location">
	<h1></h1>
	<p></p>
</ng-template>
<div *ngIf="location" [display]=" ' hidden' ">
	<h1></h1>
	<p></p>
</div>
<ng-container *ngIf="location">
	<h1></h1>
	<p></p>
</ng-container>

[ricontrolla le risposte]

D63. Descrivi l’utilizzo di questo codice:

export interface AppSettings {
  title: string;
  version: number;
}

[ricontrolla le risposte]

D64. Quali utilità Angular, se presenti, sono necessarie per eseguire lo unit test di un servizio senza dipendenze del costruttore?

Unit test angolari - ricontrollare le risposte

D65. Qual è la differenza tra canActivate e le protezioni del percorso CanLoad?

CanActivate vs Canload CanActivate impedisce l’accesso sui percorsi, CanLoad impedisce il caricamento lento.

D66. A cosa serve la proprietà outlet in questo oggetto definizione router?

{
	path: 'document',
	component: DocumentComponent,
	outlet: 'document-box'
}

Uscita angolare - ricontrolla la risposta