Решать задачиПодборка ответов на вопросы с собеседований по Angular
Что такое Angular?
Angular — это фреймворк от компании Google для создания продвинутых бесшовных (одностраничных) веб-приложений (SPA) на языках программирования TypeScript, JavaScript, Dart. Название читается как «Ангуляр» и переводится на русский как «угловой». Фреймворк назвали в честь угловых скобок, которыми обрамляют HTML-теги. У фреймворка открытый исходный код. Продукт распространяется бесплатно. Найти исходные файлы и дополнительную информацию можно в официальном репозитории фреймворка на GitHub.
В чём разница между Angular и AngularJS?
Angular, первоначально называвшийся Angular 2, является полной переработкой AngularJS. По мере развития и появления новых технологий, ограничения AngularJS стали вызывать проблемы. В частности, его критиковали за медлительность и ресурсоемкость, а также за то, что он не обеспечивает масштабируемость и гибкость, необходимые для разработки более сложных приложений. В качестве ответа на эти жалобы команда Google решила полностью переработать Angular и создать новую версию под названием Angular 2, которая в итоге стала называться просто Angular. В отличие от AngularJS, Angular построен на TypeScript. Поскольку это полноценный фреймворк, он предоставляет полный набор инструментов для создания и тестирования приложений. Angular может предложить: - TypeScript - Компоненты и директивы - CLI (инструмент командной строки) - Two-way binding (двусторонняя привязка данных) - Динамический роутинг - Поддержка разработки мобильных приложений - Производительность AngularJS vs Angular 2: ключевые различия
Что такое выражения?
Выражения в Angular - это синтаксис, который позволяет прокидывать значения JavaScript-переменных в шаблоны.
Например:
<span>Hello, {{name}}!</span>
Что такое шаблоны?
Шаблоны в Angular - это html-подобный синтаксис, позволяющий описывать разметку компонента, встраивая в неё данные состояния и подписываясь на события.
Старый синтаксис шаблонов:
trackByFunction(index, item) {
return item.id;
}
<div *ngFor="let item of items; index as idx; trackBy: trackByFunction">
Item #{{ idx }}: {{ item.name }}
</div>
Новый синтаксис шаблонов:
{#for item of items; track item.id; let idx = $index, e = $even}
Item #{{ idx }}: {{ item.name }}
{/for}
Angular получил новый синтаксис шаблонов
Что такое бутстрэппинг?
Бутстрэппинг в Angular - это процесс инициализации и запуска приложения Angular. Во время бутстрэппинга Angular создает корневой компонент приложения и связывает его с DOM-элементом на странице. Затем Angular загружает и компилирует компоненты, устанавливает связи между компонентами и их шаблонами, и запускает приложение.
В процессе бутстрэппинга Angular также устанавливает связь между компонентами и сервисами, провайдерами и другими зависимостями, которые могут быть необходимы для работы приложения.
Бутстрэппинг в Angular обычно выполняется в файле main.ts, где вызывается функция platformBrowserDynamic().bootstrapModule(AppModule), где AppModule - это модуль приложения, который содержит корневой компонент и другие компоненты, сервисы и зависимости.
Пример кода:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
В этом примере AppModule - это модуль приложения, который содержит корневой компонент и другие компоненты, сервисы и зависимости. Функция platformBrowserDynamic().bootstrapModule(AppModule) запускает процесс бутстрэппинга, и Angular начинает загружать и компилировать компоненты, устанавливать связи и запускать приложение.
Что такое AOT-компиляция?
AOT-компиляция (Ahead-of-Time компиляция) в Angular - это процесс преобразования кода Angular HTML и TypeScript в эффективный JavaScript-код во время этапа сборки перед запуском в браузере
Основное отличие AOT-компиляции от JIT-компиляции (Just-in-Time компиляции) заключается в том, что при AOT-компиляции код Angular преобразуется в JavaScript до запуска приложения, в то время как при JIT-компиляции преобразование происходит во время выполнения приложения в браузере.
Преимущества AOT-компиляции в Angular включают:
1. Улучшенную производительность: AOT-компиляция позволяет уменьшить размер и сложность кода, что приводит к более быстрой загрузке и выполнению приложения.
2. Более раннее обнаружение ошибок: AOT-компиляция позволяет обнаружить некоторые ошибки во время этапа сборки, что помогает предотвратить возможные проблемы во время выполнения приложения.
3. Улучшенную безопасность: AOT-компиляция позволяет обнаружить потенциальные уязвимости в коде на этапе сборки, что помогает улучшить безопасность приложения.
AOT-компиляция в Angular может быть выполнена с помощью Angular CLI добавлением флага --aot при выполнении команды сборки, например: ng build --aot .
Что такое модули в Angular?
Модули в Angular - это способ организации и структурирования приложения на Angular. Они позволяют разделить функциональность приложения на отдельные блоки, называемые модулями. Каждый модуль содержит компоненты, сервисы, директивы и другие ресурсы, связанные с определенной функциональностью приложения.
Модули в Angular предоставляют следующие преимущества:
Логическая организация: модули позволяют разделить функциональность приложения на логические блоки, что делает код более понятным и поддерживаемым.
Изоляция: каждый модуль имеет свою собственную область видимости, что позволяет изолировать компоненты и сервисы от других частей приложения.
Ленивая загрузка: модули могут быть загружены только по требованию, что улучшает производительность приложения и уменьшает время загрузки.
Переиспользование: модули могут быть повторно использованы в разных приложениях или в разных частях одного приложения.
NgModule - это декоратор, который используется для определения модуля в Angular. Он применяется к классу модуля и принимает объект конфигурации, который определяет компоненты, сервисы и другие ресурсы, связанные с модулем.
Пример использования декоратора NgModule:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
В приведенном примере AppModule является корневым модулем приложения. Он импортирует BrowserModule, который предоставляет функциональность для работы с браузером, и объявляет AppComponent в качестве компонента, который будет использоваться в модуле.
Архитектура приложения Angular. Используем NgModules
Подходы к управлению модулями в Angular (и не только)
Введение в модули Angular — корневой модуль (Root Module)
Что такое сервисы в Angular?
Сервисы в Angular - это классы, которые предоставляют функциональность и могут быть использованы в разных частях приложения. Они используются для разделения логики и общих функций между компонентами, директивами и другими классами Angular.
Сервисы в Angular обычно используются для выполнения следующих задач:
1. Получение данных с сервера или других источников данных.
2. Хранение и обработка данных, которые должны быть доступны в разных частях приложения.
3. Реализация общей функциональности, такой как аутентификация, логирование и обработка ошибок.
4. Взаимодействие с внешними библиотеками или сервисами.
Сервисы в Angular могут быть созданы с помощью ключевого слова @Injectable и зарегистрированы в модуле приложения или компоненте с помощью массива providers. Это позволяет Angular создавать и предоставлять экземпляр сервиса внедрения зависимостей (DI) при создании компонента или другого класса.
Пример регистрации сервиса в модуле Angular:
import { NgModule } from '@angular/core';
import { MyService } from './my.service';
@NgModule({
providers: [MyService]
})
export class AppModule { }
После регистрации сервиса в модуле, он может быть внедрен в компоненты или другие классы, используя DI. Например, в компоненте можно внедрить сервис следующим образом:
import { Component } from '@angular/core';
import { MyService } from './my.service';
@Component({
selector: 'app-my-component',
template: '...',
})
export class MyComponent {
constructor(private myService: MyService) { }
}
Важно отметить, что сервисы в Angular могут быть созданы в разных режимах жизненного цикла, таких как синглтон, когда создается только один экземпляр сервиса на всё приложение, или новый экземпляр сервиса для каждого компонента. Выбор режима жизненного цикла зависит от требований и особенностей приложения.
Как сервисы внедряются в приложение?
Два способа внедрения сервиса:
1. На уровне приложения
2. На уровне компонента (и всех его дочерних компонентов)
Внедрение сервиса на уровне приложения создает один единственный экземпляр этого сервиса. Это удобно когда нам нужно шарить данные между различными компонентами или модулями.
Внедрение сервиса на уровне компонента, создает новый экземпляр сервиса для каждого компонента в отдельности.
Чтобы начать использовать сервис, его нужно добавить в массив providers модуля, а затем инжектировать его в директиву, используя constructor. Чтобы инжектировать сервис в другой сервис, нужно использовать декоратор @Injectable.
@Injectable()
export class MessageService {
//injected service
constructor(private errorService: ErrorService) {}
}
Как работает внедрение зависимостей в Angular?
Angular - это платформа для разработки веб-приложений, которая позволяет создавать масштабируемые и эффективные приложения с использованием компонентной архитектуры. Внедрение зависимостей (Dependency Injection, DI) является одним из ключевых концепций в Angular.
Под внедрением зависимостей в Angular подразумевается механизм, который позволяет компонентам и сервисам получать необходимые им зависимости извне, вместо того, чтобы создавать их самостоятельно. Это позволяет создавать слабосвязанные компоненты и сервисы, что упрощает тестирование, повторное использование кода и обеспечивает более гибкую архитектуру приложения.
Когда компонент или сервис требует определенную зависимость, Angular автоматически создает экземпляр этой зависимости и предоставляет его внутри компонента или сервиса. Это позволяет избежать необходимости явного создания и управления зависимостями вручную.
Пример использования внедрения зависимостей в Angular:
import { Component, Injectable } from '@angular/core';
@Injectable()
export class DataService {
getData(): string {
return 'Some data';
}
}
@Component({
selector: 'app-example',
template: `
<h1>{{ data }}</h1>
`,
})
export class ExampleComponent {
constructor(private dataService: DataService) {}
ngOnInit() {
this.data = this.dataService.getData();
}
}
В приведенном примере DataService является сервисом, который предоставляет данные. Компонент ExampleComponent требует эту зависимость и получает ее через конструктор. Angular автоматически создает экземпляр DataService и предоставляет его внутри ExampleComponent.
Angular: полное руководство для «Внедрения зависимостей»
Внедрение зависимостей в Angular простыми словами
Angular 2 и внедрение зависимостей
Что такое компоненты?
Компоненты - это самый базовый элемент пользовательского интерфейса приложения Angular, который формирует дерево компонентов Angular. Компоненты являются подмножеством директив.
В отличие от директив, компоненты всегда имеют шаблон, и для каждого элемента в шаблоне может быть создан только один компонент.
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: ` <div>
<h1>{{title}}</h1>
<div>Learn Angular6 with examples</div>
</div> `,
})
export class AppComponent {
title: string = 'Welcome to Angular world';
}
Какие минимальные требования к компоненту?
import { Component } from "@angular/core";
@Component({
templateUrl: "./minimum.component.html", // or template: ''
})
export class MinimumComponent {}
Нужно учесть:
1. constructor не обязателен, он генерируется автоматически.
2. Селектор не обязателен, доступ к компоненту можно получить через роутер по названию класса.
3. Шаблон обязателен (сам шаблон или ссылка на отдельный файл).
Разница между умным и презентационным компонентом?
Умный компонент запрашивает данные у сервиса и знает, что это за данные и какой у них тип. Обрабатывает события, которые были посланы из презентационного компонента.
Презентационный компонент отображает данные, которые он получает через @Input из умного компонента, модифицирует их и возвращает умному компоненту через @Output. Не в курсе, откуда пришли эти данные. Любые события презентационного компонента эмитятся в умный компонент. При этом презентационный компонент не знает, кто получит эти события и кто будет их обрабатывать.
Пример:
Список пользователей - умный компонент, карточка пользователя - презентационный.
Преимущества:
1. Презентационные компоненты легко переиспользовать
2. Разделение ответственности (UI отдельно от логики)
3. Читаемость кода лучше
Что такое динамические компоненты?
Динамические компоненты в Angular позволяют создавать и добавлять компоненты в приложение во время выполнения. Они представляют собой способ генерации и управления компонентами динамически, без необходимости определения их статически в шаблоне.
Для создания динамических компонентов в Angular используются методы createComponent() и ComponentFactoryResolver.
Метод createComponent() позволяет создавать экземпляры компонентов, а ComponentFactoryResolver используется для получения фабрики компонента, которую можно использовать для создания экземпляров компонента.
Пример использования динамических компонентов в Angular:
import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
@Component({
template: `<div><ng-container #dynamicContent></ng-container></div>`,
})
export class AppComponent {
@ViewChild("dynamicContent", { read: ViewContainerRef })
public dynamicContainer: ViewContainerRef;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
createDynamicComponent() {
// Получение фабрики компонента
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
// Создание экземпляра компонента
const componentRef = this.dynamicContainer.createComponent(componentFactory);
}
}
В приведенном примере AppComponent содержит ViewContainerRef, который представляет контейнер для динамически создаваемых компонентов. Метод createDynamicComponent() использует ComponentFactoryResolver для получения фабрики компонента DynamicComponent, а затем создает экземпляр компонента с помощью createComponent().
Важно отметить, что динамические компоненты в Angular могут быть полезны при создании динамических макетов, модальных окон, компонентов, которые должны быть добавлены или удалены в зависимости от условий, и других сценариев, требующих гибкости и динамического управления компонентами.
Динамический Angular или манипулируй правильно
Создать динамический компонент теперь проще: изменения в Angular 13
Как происходит взаимодействие компонентов?
Типы взаимодействия:
1. Родитель/дочерний компонент с помощью декоратора @Input, декоратора @Output и EventEmitter
2. Взаимодействие через сервисы и Angular dependency injection
3. Взаимодействие через store (redux), который тоже использует Angular dependency injection
Обмен данными между компонентами Angular
Жизненный цикл компонента Angular
Жизненный цикл компонента в Angular - это последовательность событий и методов, которые происходят при создании, обновлении и уничтожении компонента.
Методы жизненного цикла компонента предоставляют разработчикам возможность выполнять определенные действия на разных этапах жизненного цикла компонента, таких как инициализация, обновление и уничтожение.
В Angular есть несколько методов жизненного цикла компонента, вот некоторых из них:
ngOnChanges: Этот метод вызывается, когда значения входных свойств компонента изменяются. Он принимает объект SimpleChanges, который содержит информацию о предыдущих и текущих значениях входных свойств..
ngOnInit: Этот метод вызывается после того, как Angular инициализирует компонент и устанавливает входные свойства. Он используется для выполнения инициализационных действий, таких как получение данных с сервера или настройка компонента.
ngDoCheck: Этот метод вызывается при каждом изменении в компоненте, включая изменения входных свойств, события и обнаружение изменений, которые Angular не может обнаружить самостоятельно. Он позволяет разработчикам выполнять дополнительные проверки и действия при изменении компонента.
ngAfterContentInit: Этот метод вызывается после того, как Angular вставляет внешний контент в представление компонента. Он используется для выполнения действий, которые требуют доступа к внешнему контенту, например, инициализация дочерних компонентов.
ngAfterContentChecked: Этот метод вызывается после каждой проверки внешнего контента компонента. Он используется для выполнения действий, которые требуют доступа к внешнему контенту и проверки его изменений.
ngAfterViewInit: Этот метод вызывается после инициализации представления компонента и его дочерних компонентов. Он используется для выполнения действий, которые требуют доступа к представлению компонента, например, инициализация сторонних библиотек или установка обработчиков событий.
ngAfterViewChecked: Этот метод вызывается после каждой проверки представления компонента и его дочерних компонентов. Он используется для выполнения действий, которые требуют доступа к представлению компонента и проверки его изменений.
ngOnDestroy: Этот метод вызывается перед уничтожением компонента. Он используется для выполнения действий, таких как отписка от подписок, очистка ресурсов или отмена запущенных процессов.
Пример использования методов жизненного цикла компонента:
import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({
selector: 'app-my-component',
template: `
<h1>{{ title }}</h1>
`
})
export class MyComponent implements OnInit, OnDestroy {
title: string;
ngOnInit() {
this.title = 'Hello, Angular!';
console.log('Component initialized');
}
ngOnDestroy() {
console.log('Component destroyed');
}
}
В приведенном выше примере компонент MyComponent реализует интерфейсы OnInit и OnDestroy, что позволяет использовать методы ngOnInit и ngOnDestroy. В методе ngOnInit устанавливается значение переменной title и выводится сообщение в консоль при инициализации компонента. В методе ngOnDestroy выводится сообщение в консоль перед уничтожением компонента.
Обратите внимание: При использовании методов жизненного цикла компонента в Angular, важно следить за правильным использованием и избегать выполнения длительных операций в методах, которые могут замедлить работу приложения.
Авторизуйтесь, чтобы просматривать следующий контентВ чём разница между constructor() и ngOnInit?
Авторизуйтесь, чтобы получить доступЧто такое директива?
Авторизуйтесь, чтобы получить доступВ чем разница между компонентом и директивой?
Авторизуйтесь, чтобы получить доступМожно ли использовать ngFor и ngIf на одном и том же элементе?
Авторизуйтесь, чтобы получить доступЧто такое Observable?
Авторизуйтесь, чтобы получить доступЧто такое Subject?
Авторизуйтесь, чтобы получить доступВ чем разница между Observable и Subject?
Авторизуйтесь, чтобы получить доступВ чем разница между Observable и Promise?
Авторизуйтесь, чтобы получить доступКак кэшировать данные из observable?
Авторизуйтесь, чтобы получить доступКак с помощью RxJS реализовать несколько последовательных запросов к API?
Авторизуйтесь, чтобы получить доступВ чем разница между switchMap, concatMap и mergeMap?
Авторизуйтесь, чтобы получить доступВ чем разница между scan() и reduce()?
Авторизуйтесь, чтобы получить доступВ чем разница между BehaviorSubject, ReplySubject и AsyncSubject?
Авторизуйтесь, чтобы получить доступЧто такое Observable высшего порядка?
Авторизуйтесь, чтобы получить доступВ чем разница между of и from?
Авторизуйтесь, чтобы получить доступЧто такое multicasting?
Авторизуйтесь, чтобы получить доступЧто такое поток в RxJS?
Авторизуйтесь, чтобы получить доступВ чем разница между combineLatest и forkJoin?
Авторизуйтесь, чтобы получить доступКак анимировать переход между двумя состояниями в Angular?
Авторизуйтесь, чтобы получить доступЧто такое состояние wildcard?
Авторизуйтесь, чтобы получить доступКогда нужно использовать ngrx/store?
Авторизуйтесь, чтобы получить доступЧто такое "race condition"?
Авторизуйтесь, чтобы получить доступЧто такое Shared модуль?
Авторизуйтесь, чтобы получить доступКак сделать двухстороннее связывание данных?
Авторизуйтесь, чтобы получить доступЧто такое View Encapsulation?
Авторизуйтесь, чтобы получить доступКак выбрать подходящий тип формы?
Авторизуйтесь, чтобы получить доступКак отправить форму?
Авторизуйтесь, чтобы получить доступВ чем разница между NgForm, FormGroup, и FormControl?
Авторизуйтесь, чтобы получить доступВ чем преимущество использования FormBuilder?
Авторизуйтесь, чтобы получить доступКак добавить валидацию к форме, сделанной с помощью FormBuilder?
Авторизуйтесь, чтобы получить доступВ чем разница между состояниями dirty, touched и pristine?
Авторизуйтесь, чтобы получить доступКак отобразить ошибки валидации в шаблоне?
Авторизуйтесь, чтобы получить доступКак кэшировать данные в Angular?
Авторизуйтесь, чтобы получить доступЗачем нужен NgModule?
Авторизуйтесь, чтобы получить доступКак используется свойство providedIn?
Авторизуйтесь, чтобы получить доступЧто бы вы поместили в shared модуль?
Авторизуйтесь, чтобы получить доступЧто бы вы не поместили в shared модуль?
Авторизуйтесь, чтобы получить доступВ какой модуль вы бы поместили сервис, использующийся по всему приложению?
Авторизуйтесь, чтобы получить доступКак улучшить производительность приложения?
Авторизуйтесь, чтобы получить доступЧто такое и как работает ChangeDetection?
Авторизуйтесь, чтобы получить доступЧто такое ChangeDetectionStrategy.onPush?
Авторизуйтесь, чтобы получить доступЧто такое отключение Change Detection?
Авторизуйтесь, чтобы получить доступЧто такое Local Change Detection?
Авторизуйтесь, чтобы получить доступЧто такое запуск вне зоны Angular?
Авторизуйтесь, чтобы получить доступКак работает trackBy для директивы *ngFor?
Авторизуйтесь, чтобы получить доступЧто такое Lazy Loading в Angular?
Авторизуйтесь, чтобы получить доступКакие есть стратегии предварительной загрузки?
Авторизуйтесь, чтобы получить доступЧто такое пайп в Angular?
Авторизуйтесь, чтобы получить доступЧто такое пайп async?
Авторизуйтесь, чтобы получить доступКак async pipe предотвращает утечку памяти?
Авторизуйтесь, чтобы получить доступВ чем разница между чистыми и нечистыми пайпами?
Авторизуйтесь, чтобы получить доступВ чем разница между RouterModule.forRoot() и RouterModule.forChild()?
Авторизуйтесь, чтобы получить доступКак работает loadChildren?
Авторизуйтесь, чтобы получить доступНужен ли отдельный Routing Module?
Авторизуйтесь, чтобы получить доступВ чем разница между ActivatedRoute и RouterState?
Авторизуйтесь, чтобы получить доступЗачем нужны guardes роутов?
Авторизуйтесь, чтобы получить доступЧто такое RouterOutlet?
Авторизуйтесь, чтобы получить доступЧто такое CanActivate, CanActivateChild, CanDeactivate и CanLoad?
Авторизуйтесь, чтобы получить доступВам может быть интересно
Топ тредов
: Добавить чекбокс, который отвечает за показ ранее тронутых задач (черновик)
: Предложите идею и получите спонсорский доступ на месяц
: Задача в JS под названием "Соревнование" содержит ошибку
