📚Angular Interview Questions Part 3

В этой статье мы рассмотрим хорошо составленный список вопросов для собеседования по Angular 2021 и ответы на них как для опытных, так и для новичков.

Почему в Angular приоритет отдается TypeScript, а не JavaScript?

TypeScript упрощает код JavaScript, делая его более легким для чтения и отладки. TypeScript предоставляет высокопродуктивные инструменты разработки для JavaScript IDE и практики, такие как статическая проверка. TypeScript делает код более легким для чтения и понимания. С TypeScript мы можем добиться огромного улучшения по сравнению с обычным JavaScript.

Есть еще много преимуществ TypeScript перед Javascript:

Согласованность
Производительность
Ремонтопригодность
Модульность
Раннее обнаружение ошибок

Что такое модуль Bootstrapping в Angular?

Bootstrapping в Angular — это функциональный компонент в основном модуле ng, который используется для запуска приложения Angular. По умолчанию бутстрапом является компонент Appcomponent.

Ниже приведен код по умолчанию для бутстрапинга ангулярного приложения в app.module.ts

@NgModule({
    declarations: [
        AppComponent,

    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
    ],
    providers: [],
    bootstrap: [AppComponent],
    schemas: []
})

В чем разница между чистыми и нечистыми трубами в Angular?

Чистая труба вызывается только тогда, когда Angular обнаруживает изменение значения или параметров, переданных в трубу.

Нечистый pipe вызывается при каждом цикле обнаружения изменений, независимо от того, изменяется ли значение или параметр(ы).

Ниже приведен пример трубы и ее декоратора для установки типа трубы

@Pipe({
 name: 'myCustomPipe', 
 pure: true    // true means this is a Pure Pipe and false means its and Impure Pipe (default is true)
})

export class MyCustomPipe {}

Что такое RxJS?

Полная форма RxJS — Reactive Extension for Javascript. Это библиотека javascript, использующая наблюдаемые объекты для работы с реактивным программированием, которое имеет дело с асинхронными вызовами данных, обратными вызовами и программами, основанными на событиях.

RxJS — это библиотека для реактивного программирования с использованием наблюдаемых, которая облегчает составление асинхронного или основанного на обратных вызовах кода. RxJS можно использовать с любыми другими библиотеками и фреймворками Javascript.

Что такое наблюдаемая функция?

Наблюдаемые — это просто функция, которая способна выдавать несколько значений с течением времени, синхронно или асинхронно. Вы также можете рассматривать Observables как ленивые коллекции множества значений.

Observables обеспечивают поддержку передачи сообщений между частями вашего приложения. Они часто используются в Angular и служат для обработки событий, асинхронного программирования и работы с несколькими значениями.

Мы можем подписаться на наблюдаемую и получать значения синхронно или асинхронно.

Ниже приведен пример создания Observable:

var observable = Rx.Observable.create((observer: any) =>{

   observer.next("This is an Observable");

})

observable.subscribe((data)=>{
   console.log(data);    // output - "This is an Observable"
});

Что такое наблюдатель?

Наблюдатели — это просто объекты с тремя обратными вызовами, по одному для каждого типа уведомлений, которые может передавать Observable.

Наблюдатель — это потребитель значений, доставляемых наблюдаемым. Наблюдатели — это просто набор обратных вызовов, по одному для каждого типа уведомления, доставляемого наблюдаемым: next, error и complete.

Ниже приведен пример наблюдателя и значений, получаемых после подписки на него:

const observer = {
 next: x => console.log('This is next value: ' + x),
 error: err => console.error('Observer got an error: ' + err),
};

observable.subscribe(observer);

//OR

observable.subscribe(observer => {
  observer.next(10);
  observer.error("something went wrong");  
});

Что такое элементы Angular?

Элементы Angular — это компоненты Angular, упакованные как пользовательские элементы (также называемые веб-компонентами), веб-стандарт для определения новых элементов HTML, не зависящих от фреймворка.

Пользовательский элемент расширяет HTML, позволяя вам определить тег, содержимое которого создается и управляется кодом JavaScript. Браузер поддерживает реестр CustomElementRegistry определенных пользовательских элементов, который отображает инстанцируемый класс JavaScript на тег HTML.

Живой пример элементов Angular :- Рабочий пример элементов Angular

Стандарт пользовательских элементов в настоящее время поддерживается такими браузерами, как Chrome, Opera и Safari. Для его использования доступны полифиллы Firefox и Edge. Функциональность Angular Elements доступна с помощью пакета @angular/elements.

Чтобы отслеживать все доступные пользовательские элементы, браузер ведет реестр, в котором каждый элемент должен быть сначала зарегистрирован. В этом реестре имя тега сопоставляется с классом JavaScript, который управляет поведением и выводом этого элемента.

Что такое Angular Universal или Angular SSR?

Angular Universal — это механизм, предоставляемый командой Angular, с помощью которого вы можете отображать ваше одностраничное ангулярное приложение на сервере вместо браузера. Типичными приложениями Angular являются одностраничные приложения (aka SPA), где рендеринг происходит в браузере. Этот процесс также можно назвать рендерингом на стороне клиента (CSR).

Angular Universal — это очень полезный и SEO-дружественный подход для современных веб-приложений.

Angular Universal предоставляет 2 варианта:

Рендеринг на стороне сервера: в этом методе запрашиваемая страница будет полностью отрисована на сервере и отправлена в браузер.
Предварительный рендеринг: В этом методе вы должны предоставить список маршрутов, которые вы хотите предварительно отрендерить, затем, используя команду предварительного рендеринга и указанные маршруты, он завершит сборку с полностью отрендеренными HTML-страницами.
Чтобы добавить Angular Universal в свой проект, используйте приведенную ниже команду:

ng add @nguniversal/express-engine

Что такое Service Workers в Angular?

Service Worker в Angular — это сценарий, который запускается в веб-браузере и управляет кэшированием приложения. Service Workers функционирует как сетевой прокси. Они перехватывают все исходящие HTTP-запросы, сделанные приложением, и могут выбирать, как на них отвечать.

Service Workers помогают повысить производительность приложения.

Чтобы добавить Service Workers в ваше приложение Angular, используйте приведенную ниже команду:

ng add @angular/pwa

Ознакомьтесь с этой статьей: В ней описаны все шаги по добавлению Service Worker в приложение Angular.

Что такое ленивая загрузка в Angular?

Ленивая загрузка — это техника в Angular, которая позволяет асинхронно загружать компоненты JavaScript при активации определенного маршрута. Она улучшает скорость загрузки приложения за счет разделения приложения на несколько пакетов. Когда пользователь перемещается по приложению, пучки загружаются по мере необходимости.

Вместо того чтобы загружать всю веб-страницу и выдавать ее пользователю за один раз, как при массовой загрузке, концепция ленивой загрузки помогает загрузить только необходимый раздел и отложить оставшийся до тех пор, пока он не понадобится пользователю.

Ниже приведен пример маршрута для модуля с ленивой загрузкой:

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'}
];

Что такое общий модуль в Angular?

Общие модули в Angular помогают вам писать более организованный код за меньшее время, помогая вам быть более продуктивными. Общие модули — это идеальное место для объявления компонентов, чтобы сделать их многократно используемыми. Вам не придется повторно импортировать одни и те же компоненты в каждом модуле — вы просто импортируете общий модуль.

Создание общих модулей позволяет упорядочить и рационализировать код. Вы можете поместить часто используемые директивы, трубы и компоненты в один модуль, а затем импортировать этот модуль везде, где он нужен в других частях вашего приложения.

Ниже приведен пример разделяемого модуля:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

import { SharedRoutingModule } from "./shared-routing.module";
import { SharedComponent } from "./components/shared/shared.component";

@NgModule({
 declarations: [SharedComponent],
 imports: [CommonModule, SharedRoutingModule],
 exports: [SharedComponent]
})

export class SharedModule {}

Что такое DOM Sanitizer в Angular?

Dom Sanitizer в Angular помогает предотвратить ошибки безопасности межсайтового скриптинга (XSS) путем санации значений для безопасного использования в различных контекстах DOM.

Ниже перечислены различные методы, предоставляемые Angular для санации и обеспечения того, чтобы любые пользовательские данные были соответствующим образом экранированы для данного контекста безопасности.

//default sanitize data
abstract sanitize(context: SecurityContext, value: string | SafeValue): string | null

//sanitize html
abstract bypassSecurityTrustHtml(value: string): SafeHtml

//sanitize css
abstract bypassSecurityTrustStyle(value: string): SafeStyle

//sanitize scripts
abstract bypassSecurityTrustScript(value: string): SafeScript

//sanitize url
abstract bypassSecurityTrustUrl(value: string): SafeUrl

//sanitize resource urls
abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl

Ознакомьтесь с другими статьями этой серии:

Часть 1 этой серии :- Вопросы для собеседования по Angular Часть 1

Часть 2 этой серии :- Вопросы для собеседования по Angular Часть 2

Часть 3 этой серии :- Вопросы для собеседования по Angular Часть 3