Angular 面接の質問と回答

質問 16. What is metadata?

Metadata is used to decorate a class so that it can configure the expected behavior of the class. The metadata is represented by decorators

1. Class decorators, e.g. @Component and @NgModule

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

   @Component({

     selector: 'my-component',

     template: '<div>Class decorator</div>',

   })

   export class MyComponent {

     constructor() {

     console.log('Hey I am a component!');

     }

   }

   @NgModule({

     imports: [],

     declarations: [],

   })

   export class MyModule {

     constructor() {

     console.log('Hey I am a module!');

     }

   }

2. Property decorators Used for properties inside classes, e.g. @Input and @Output

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

   @Component({

     selector: 'my-component',

     template: '<div>Property decorator</div>'

   })

   export class MyComponent {

     @Input() title: string;

   }

3. Method decorators Used for methods inside classes, e.g. @HostListener

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

    @Component({

     selector: 'my-component',

     template: '<div>Method decorator</div>'

   })

   export class MyComponent {

     @HostListener('click', ['$event'])

     onHostClick(event: Event) {

     // clicked, `event` available

     }

   }

4. Parameter decorators Used for parameters inside class constructors, e.g. @Inject, Optional

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

   import { MyService } from './my-service';

   @Component({

     selector: 'my-component',

     template: '<div>Parameter decorator</div>'

   })

   export class MyComponent {

     constructor(@Inject(MyService) myService) {

     console.log(myService);

   // MyService

     }

   }

質問 17. What is angular CLI?

Angular CLI(Command Line Interface) is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules. You need to install using below npm command,

Below are the list of few commands, which will come handy while creating angular projects

1. Creating New Project: ng new

2. Generating Components, Directives & Services: ng generate/g The different types of commands would be,

   • ng generate class my-new-class: add a class to your application
   • ng generate component my-new-component: add a component to your application
   • ng generate directive my-new-directive: add a directive to your application
   • ng generate enum my-new-enum: add an enum to your application
   • ng generate module my-new-module: add a module to your application
   • ng generate pipe my-new-pipe: add a pipe to your application
   • ng generate service my-new-service: add a service to your application

3. Running the Project: ng serve

質問 18. What is the difference between constructor and ngOnInit in Angular?

The Constructor is a default method of the class that is executed when the class is instantiated and ensures proper initialisation of fields in the class and its subclasses. Angular, or better Dependency Injector (DI), analyses the constructor parameters and when it creates a new instance by calling new MyClass() it tries to find providers that match the types of the constructor parameters, resolves them and passes them to the constructor.
ngOnInit is a life cycle hook called by Angular to indicate that Angular is done creating the component.
Mostly we use ngOnInit for all the initialization/declaration and avoid stuff to work in the constructor. The constructor should only be used to initialize class members but shouldn't do actual "work". So you should use constructor() to setup Dependency Injection and not much else. ngOnInit() is better place to "start" - it's where/when components' bindings are resolved.

質問 19. What is a service?

A service is used when a common functionality needs to be provided to various modules. Services allow for greater separation of concerns for your application and better modularity by allowing you to extract common functionality out of components.

Let's create a repoService which can be used across components,

The above service uses Http service as a dependency.

質問 20. What is dependency injection in Angular?

Dependency injection (DI), is an important application design pattern in which a class asks for dependencies from external sources rather than creating them itself. Angular comes with its own dependency injection framework for resolving dependencies( services or objects that a class needs to perform its function).So you can have your services depend on other services throughout your application.