devel/Cобеседование по Angular. 100 вопросов.md

Нажмите ★, если вам нравится проект. Ваш вклад сердечно ♡ приветствуется.

Если вам интересно мое резюме: https://github.com/DEBAGanov


## 1. `Каковы различия между декоратором Angular и аннотацией?`

Декораторы и аннотации в Angular имеют различные функции и синтаксис.

Декораторы в Angular используются для добавления метаданных к классам, методам, свойствам и параметрам. Они представляют собой специальные функции, которые применяются к элементам кода с помощью символа @. Декораторы позволяют определить различные аспекты поведения и конфигурации элементов Angular, таких как компоненты, сервисы, директивы и т. д. Некоторые из наиболее часто используемых декораторов в Angular включают @Component, @Directive, @Injectable и @Input.

Аннотации в Angular, с другой стороны, являются способом добавления дополнительной информации к типам данных в TypeScript. Аннотации используются для определения типов параметров функций, свойств классов и других элементов кода. Они представляют собой специальные комментарии, которые начинаются с символа @. Аннотации в Angular используются вместе с декораторами для определения типов данных и метаданных элементов Angular.

Таким образом, различия между декораторами и аннотациями в Angular заключаются в их функциональности и синтаксисе. Декораторы используются для добавления метаданных к элементам Angular, в то время как аннотации используются для определения типов данных в TypeScript.

## 2. `Что такое AOT-компиляция в Angular (Ahead-of-Time компиляция)?`

AOT-компиляция (Ahead-of-Time компиляция) в Angular - это процесс преобразования кода Angular HTML и TypeScript в эффективный JavaScript-код во время этапа сборки перед запуском в браузере

Основное отличие AOT-компиляции от JIT-компиляции (Just-in-Time компиляции) заключается в том, что при AOT-компиляции код Angular преобразуется в JavaScript до запуска приложения, в то время как при JIT-компиляции преобразование происходит во время выполнения приложения в браузере.

Преимущества AOT-компиляции в Angular включают:

+ Улучшенную производительность: AOT-компиляция позволяет уменьшить размер и сложность кода, что приводит к более быстрой загрузке и выполнению приложения.
+ Более раннее обнаружение ошибок: AOT-компиляция позволяет обнаружить некоторые ошибки во время этапа сборки, что помогает предотвратить возможные проблемы во время выполнения приложения.
+ Улучшенную безопасность: AOT-компиляция позволяет обнаружить потенциальные уязвимости в коде на этапе сборки, что помогает улучшить безопасность приложения.
+ AOT-компиляция в Angular может быть выполнена с помощью Angular CLI, добавив флаг --aot при выполнении команды сборки, например: ng build --aot .

## 3. `Что такое динамические компоненты?`

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

Для создания динамических компонентов в Angular используются методы createComponent() и ComponentFactoryResolver. Метод createComponent() позволяет создавать экземпляры компонентов, а ComponentFactoryResolver используется для получения фабрики компонента, которую можно использовать для создания экземпляров компонента.

Пример использования динамических компонентов в Angular:
```javascript
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 могут быть полезны при создании динамических макетов, модальных окон, компонентов, которые должны быть добавлены или удалены в зависимости от условий, и других сценариев, требующих гибкости и динамического управления компонентами.




## 4. `Что такое модули в Angular?`

Модули в Angular - это способ организации и структурирования приложения на Angular. Модули позволяют разделить функциональность приложения на отдельные блоки, называемые модулями. Каждый модуль содержит компоненты, сервисы, директивы и другие ресурсы, связанные с определенной функциональностью приложения.

Модули в Angular предоставляют следующие преимущества:

Логическая организация: Модули позволяют разделить функциональность приложения на логические блоки, что делает код более понятным и поддерживаемым.
Изоляция: Каждый модуль имеет свою собственную область видимости, что позволяет изолировать компоненты и сервисы от других частей приложения.
Ленивая загрузка: Модули могут быть загружены только по требованию, что улучшает производительность приложения и уменьшает время загрузки.
Переиспользование: Модули могут быть повторно использованы в разных приложениях или в разных частях одного приложения.

NgModule - это декоратор, который используется для определения модуля в Angular. Он применяется к классу модуля и принимает объект конфигурации, который определяет компоненты, сервисы и другие ресурсы, связанные с модулем.

Пример использования декоратора NgModule:
```javascript
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 в качестве компонента, который будет использоваться в модуле.

## 5. `Что такое сервисы в Angular?`

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

Сервисы в Angular обычно используются для выполнения следующих задач:

Получение данных с сервера или других источников данных.
Хранение и обработка данных, которые должны быть доступны в разных частях приложения.
Реализация общей функциональности, такой как аутентификация, логирование и обработка ошибок.
Взаимодействие с внешними библиотеками или сервисами.
Сервисы в Angular могут быть созданы с помощью ключевого слова @Injectable и зарегистрированы в модуле приложения или компоненте с помощью массива providers. Это позволяет Angular создавать и предоставлять экземпляр сервиса внедрения зависимостей (DI) при создании компонента или другого класса.

Пример регистрации сервиса в модуле Angular:
```javascript
import { NgModule } from '@angular/core';
import { MyService } from './my.service';

@NgModule({
  providers: [MyService]
})
export class AppModule { }
```

После регистрации сервиса в модуле, он может быть внедрен в компоненты или другие классы, используя DI. Например, в компоненте можно внедрить сервис следующим образом:
```javascript
import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-my-component',
  template: '...',
})
export class MyComponent {
  constructor(private myService: MyService) { }
}
```

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


## 6. `Что такое жизненный цикл компонента в Angular?`

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

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

+ ngOnChanges: Этот метод вызывается, когда значения входных свойств компонента изменяются. Он принимает объект SimpleChanges, который содержит информацию о предыдущих и текущих значениях входных свойств..
+ ngOnInit: Этот метод вызывается после того, как Angular инициализирует компонент и устанавливает входные свойства. Он используется для выполнения инициализационных действий, таких как получение данных с сервера или настройка компонента..
+ ngDoCheck: Этот метод вызывается при каждом изменении в компоненте, включая изменения входных свойств, события и обнаружение изменений, которые Angular не может обнаружить самостоятельно. Он позволяет разработчикам выполнять дополнительные проверки и действия при изменении компонента..
+ ngAfterContentInit: Этот метод вызывается после того, как Angular вставляет внешний контент в представление компонента. Он используется для выполнения действий, которые требуют доступа к внешнему контенту, например, инициализация дочерних компонентов..
+ ngAfterContentChecked: Этот метод вызывается после каждой проверки внешнего контента компонента. Он используется для выполнения действий, которые требуют доступа к внешнему контенту и проверки его изменений..
+ ngAfterViewInit: Этот метод вызывается после инициализации представления компонента и его дочерних компонентов. Он используется для выполнения действий, которые требуют доступа к представлению компонента, например, инициализация сторонних библиотек или установка обработчиков событий..
+ ngAfterViewChecked: Этот метод вызывается после каждой проверки представления компонента и его дочерних компонентов. Он используется для выполнения действий, которые требуют доступа к представлению компонента и проверки его изменений..
+ ngOnDestroy: Этот метод вызывается перед уничтожением компонента. Он используется для выполнения действий, таких как отписка от подписок, очистка ресурсов или отмена запущенных процессов..

Пример использования методов жизненного цикла компонента в Angular:
```javascript
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, важно следить за правильным использованием и избегать выполнения длительных операций в методах, которые могут замедлить работу приложения.


## 8. `Чем наблюдаемые отличаются от обещаний?`

В Angular, наблюдаемые (observables) и обещания (promises) являются двумя разными концепциями для работы с асинхронными операциями. Вот некоторые основные различия между ними:

Наблюдаемые (observables):

+ Наблюдаемые представляют собой поток данных, который может иметь несколько значений, передаваемых по мере их поступления.
+ Они поддерживают операторы, такие как map, filter, reduce и другие, которые позволяют манипулировать данными в потоке.
+ Наблюдаемые могут быть отменены или отписаны с помощью метода unsubscribe.
+ Они широко используются в Angular для работы с асинхронными операциями, такими как HTTP-запросы или события пользовательского интерфейса.

Обещания (promises):

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


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

## 9. `Что такое бутстрэппинг?`

Бутстрэппинг в Angular - это процесс инициализации и запуска приложения Angular. Во время бутстрэппинга Angular создает корневой компонент приложения и связывает его с DOM-элементом на странице. Затем Angular загружает и компилирует компоненты, устанавливает связи между компонентами и их шаблонами, и запускает приложение.

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

Бутстрэппинг в Angular обычно выполняется в файле main.ts, где вызывается функция platformBrowserDynamic().bootstrapModule(AppModule), где AppModule - это модуль приложения, который содержит корневой компонент и другие компоненты, сервисы и зависимости.

Пример кода:
```javascript
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 начинает загружать и компилировать компоненты, устанавливать связи и запускать приложение.

## 10. `Что вы подразумеваете под внедрением зависимостей?`

Angular - это платформа для разработки веб-приложений, которая позволяет создавать масштабируемые и эффективные приложения с использованием компонентной архитектуры. Внедрение зависимостей (Dependency Injection, DI) является одним из ключевых концепций в Angular.

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

Когда компонент или сервис требует определенную зависимость, Angular автоматически создает экземпляр этой зависимости и предоставляет его внутри компонента или сервиса. Это позволяет избежать необходимости явного создания и управления зависимостями вручную.

Пример использования внедрения зависимостей в Angular:
```javascript
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.


## 11. `Описать аутентификацию и авторизацию Angular.`

Аутентификация и авторизация являются важными аспектами разработки веб-приложений. В Angular есть несколько подходов к реализации аутентификации и авторизации, включая использование JSON Web Tokens (JWT) и HttpInterceptor.

Аутентификация с использованием JSON Web Tokens (JWT): JSON Web Tokens (JWT) - это открытый стандарт (RFC 7519), который определяет компактный и самодостаточный формат для представления информации об аутентификации в виде JSON-объекта. В Angular вы можете использовать JWT для аутентификации пользователей.

Для реализации аутентификации с использованием JWT в Angular, вам потребуется:

Создать серверную часть, которая будет генерировать и проверять JWT-токены.
Реализовать механизм хранения токена на клиентской стороне (например, в localStorage или sessionStorage).
Создать сервис аутентификации в Angular, который будет отправлять запросы на сервер для аутентификации и получения токена, а также сохранять и проверять токен на клиентской стороне.
Авторизация с использованием HttpInterceptor: HttpInterceptor - это механизм в Angular, который позволяет перехватывать и изменять HTTP-запросы и ответы. Вы можете использовать HttpInterceptor для авторизации запросов, добавляя заголовки авторизации или проверяя токены доступа.

Для реализации авторизации с использованием HttpInterceptor в Angular, вам потребуется:

+ Создать класс, реализующий интерфейс HttpInterceptor.
+ В классе HttpInterceptor реализовать методы для перехвата и изменения HTTP-запросов и ответов.
+ Зарегистрировать HttpInterceptor в провайдере приложения, чтобы он был доступен для использования во всем приложении.

Примеры кода:

+ Аутентификация с использованием JWT:
```javascript
// Сервис аутентификации
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class AuthService {
  constructor(private http: HttpClient) {}

  login(username: string, password: string) {
    return this.http.post('/api/auth/login', { username, password });
  }
}

// Компонент для входа пользователя
import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-login',
  template: `
    <form (ngSubmit)="login()">
      <input type="text" [(ngModel)]="username" name="username" placeholder="Username">
      <input type="password" [(ngModel)]="password" name="password" placeholder="Password">
      <button type="submit">Login</button>
    </form>
  `,
})
export class LoginComponent {
  username: string;
  password: string;

  constructor(private authService: AuthService) {}

  login() {
    this.authService.login(this.username, this.password).subscribe(
      (response) => {
        // Сохранение токена на клиентской стороне
        localStorage.setItem('token', response.token);
      },
      (error) => {
        console.error('Ошибка аутентификации:', error);
      }
    );
  }
}

```


+ Авторизация с использованием HttpInterceptor:
```javascript
// HttpInterceptor
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Получение токена из localStorage
    const token = localStorage.getItem('token');

    // Добавление заголовка авторизации
    if (token) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
    }

    return next.handle(request);
  }
}

// Регистрация HttpInterceptor в провайдере приложения
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  imports: [HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ]
})
export class CoreModule {}
```

Обратите внимание: Это только примеры кода для демонстрации основных концепций аутентификации и авторизации в Angular. Реальная реализация может варьироваться в зависимости от требований вашего приложения.

## 12. `Что такое процесс цикла дайджеста в Angular?`

В Angular процесс цикла дайджеста (digest cycle) является ключевым механизмом для обновления данных и обновления представления. Во время цикла дайджеста Angular проверяет все связанные скоупы (scopes) и выполняет проверку изменений в данных. Если происходят изменения, Angular обновляет представление, чтобы отразить эти изменения.

Процесс цикла дайджеста в Angular состоит из следующих шагов:

+ Запуск цикла дайджеста: Цикл дайджеста запускается в ответ на событие, такое как пользовательское действие или изменение данных.
+ Проверка изменений: Angular проверяет все скоупы (scopes) и их модели данных на наличие изменений. Он сравнивает текущие значения с предыдущими значениями и определяет, какие из них изменились.
+ Применение изменений: Если Angular обнаруживает изменения в данных, он обновляет представление, чтобы отразить эти изменения. Это может включать обновление текста, добавление или удаление элементов DOM и другие изменения в пользовательском интерфейсе.
+ Проверка изменений вложенных скоупов: Angular также проверяет изменения во всех вложенных скоупах и их моделях данных.
+ Повторение цикла дайджеста: Цикл дайджеста повторяется до тех пор, пока не будет достигнуто состояние стабильности, то есть пока не будет обнаружено никаких изменений в данных или представлении.

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

## 13. `Что такое Angular Router?`

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

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

Чтобы использовать Angular Router, необходимо импортировать соответствующие модули и классы. Например, для определения маршрутов и настройки маршрутизации в Angular, вы можете использовать классы Routes и RouterModule из модуля @angular/router.

Пример использования Angular Router для определения маршрутов выглядит следующим образом:
```javascript
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
```

В этом примере мы определяем три маршрута: 'home', 'about' и 'contact', и связываем каждый маршрут с соответствующим компонентом.

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


## 14. `Что такое REST?`
REST API в Angular - это способ взаимодействия с сервером, используя протокол HTTP и стандартные методы запросов, такие как GET, POST, PUT и DELETE. В Angular, для работы с REST API, можно использовать сервис HttpClient, который предоставляет удобные методы для отправки HTTP-запросов и получения ответов от сервера.

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

Обратите внимание, что RESTful API не является частью Angular-приложения. RESTful API - это веб-сервис, написанный на серверной стороне, который может использоваться Angular-приложением для взаимодействия с сервером

Для работы с REST API в Angular можно использовать модуль HttpClient, который предоставляет удобные методы для отправки HTTP-запросов и получения ответов. Вот некоторые основные шаги для работы с REST API в Angular:

+ Импортируйте модуль HttpClientModule в вашем Angular-приложении.
```javascript
import { HttpClientModule } from '@angular/common/http';
Добавьте HttpClientModule в раздел imports в файле AppModule.

@NgModule({
  imports: [
    HttpClientModule
  ],
  // ...
})
export class AppModule { }
```

+ В вашем компоненте или сервисе импортируйте HttpClient и используйте его для отправки HTTP-запросов.
```javascript
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) { }

// Пример GET-запроса
getData() {
  return this.http.get('https://api.example.com/data');
}

// Пример POST-запроса
postData(data: any) {
  return this.http.post('https://api.example.com/data', data);
}
```

+ Вызовите методы getData() или postData() для отправки запросов и получения данных.
```javascript
this.getData().subscribe((response) => {
  console.log(response);
}, (error) => {
  console.error(error);
});
```

Примечание: Важно помнить, что HTTP-запросы асинхронны, поэтому для получения данных необходимо использовать методы подписки, такие как subscribe().

Это основные шаги для работы с REST API в Angular. Вы также можете использовать другие методы, такие как PUT и DELETE, для взаимодействия с API.

## 15. `Объясните Angular CLI.`

Angular CLI (Command Line Interface) - это инструмент командной строки, который предоставляет разработчикам возможность создавать, развивать и поддерживать проекты на Angular. Он предоставляет набор команд, которые упрощают различные задачи, связанные с разработкой Angular-приложений.

Основные возможности Angular CLI:
+ Создание нового проекта: Angular CLI позволяет создавать новые проекты с помощью команды ng new. Он автоматически настраивает структуру проекта, устанавливает зависимости и создает основные файлы и папки, необходимые для разработки Angular-приложения.
+ Генерация компонентов, сервисов и других элементов: Angular CLI предоставляет команды для генерации различных элементов приложения, таких как компоненты, сервисы, директивы и многое другое. Например, команда ng generate component my-component создаст новый компонент с именем "my-component" и соответствующими файлами и кодом.
+ Запуск локального сервера разработки: Angular CLI позволяет запускать локальный сервер разработки с помощью команды ng serve. Это позволяет разработчикам видеть изменения в реальном времени при разработке приложения и автоматически перезагружать страницу при внесении изменений в код.
+ Сборка и оптимизация проекта: Angular CLI предоставляет команды для сборки и оптимизации проекта перед его развертыванием. Например, команда ng build собирает проект в определенную директорию, готовую для развертывания на сервере.
+ Тестирование приложения: Angular CLI предоставляет инструменты для запуска и выполнения тестов в Angular-приложении. Это позволяет разработчикам автоматизировать тестирование и обнаруживать потенциальные проблемы и ошибки в приложении.
+ Интеграция с другими инструментами: Angular CLI интегрируется с другими инструментами разработки, такими как Angular DevTools, которые предоставляют дополнительные возможности для отладки и анализа Angular-приложений.


Пример использования Angular CLI:
```javascript
// my-component.component.ts
@Component({ /* .. */ })
export class MyComponent {
  constructor(private rest: RestService) {}

  // Примеры работы с Observable
  public getFields() {
    this.rest.getByObservable('http://anyurl.com').subscribe(value => {
      // Обработка значения
    }, error => {
      // Обработка ошибки
    });
  }

  // Примеры работы с Promise
  public async getAsyncField() {
    try {
      const value = await this.rest.getByPromise('http://anyurl.com');
      // Обработка значения
    } catch (error) {
      // Обработка ошибки
    }
  }
}
```
Вот некоторые команды Angular CLI, которые могут быть полезны при разработке Angular-приложений:

+ `ng new <project-name>`: создает новый проект Angular.
+ `ng generate component <component-name`>: генерирует новый компонент.
+ `ng serve`: запускает локальный сервер разработки.
+ `ng build`: собирает проект для развертывания.
+ `ng test`: запускает тесты в приложении.

## 16. `Что такое схема?`

Angular schematics - это инструмент, который используется в Angular CLI для создания и применения трансформаций к проектам веб-приложений на Angular. С помощью схематиков можно модифицировать существующие схематики и создавать новые, чтобы, например, обновлять код или добавлять новый функционал в проекты.

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

Например, с помощью схематиков можно создать новый компонент в проекте Angular CLI с помощью команды ng generate component. Это приведет к созданию соответствующих файлов компонента, включая шаблон, стили и код компонента.

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

Примеры схематиков Angular:

+ app-shell: генерирует оболочку приложения для запуска серверной версии приложения.
+ component: создает новый компонент.
+ directive: создает новую директиву.
+ module: создает новый модуль NgModule.

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

## 17. `Что такое HttpClient и каковы его преимущества?`

HttpClient - это модуль в Angular, который предоставляет возможность выполнять HTTP-запросы к серверу. Он является частью пакета @angular/common/http и предоставляет удобный интерфейс для работы с HTTP-протоколом.

Преимущества HttpClient в Angular включают:

+ Удобство использования: HttpClient предоставляет простой и интуитивно понятный API для выполнения HTTP-запросов. Он предоставляет методы для отправки GET, POST, PUT, DELETE и других типов запросов.
+ Обработка ошибок: HttpClient предоставляет механизмы для обработки ошибок при выполнении HTTP-запросов. Он автоматически обрабатывает ошибки сети, такие как отсутствие соединения или недоступность сервера, и предоставляет возможность обрабатывать ошибки, возвращаемые сервером.
+ Поддержка интерсепторов: HttpClient поддерживает использование интерсепторов, которые позволяют изменять и расширять запросы и ответы. Интерсепторы могут использоваться для добавления заголовков, обработки аутентификации, кэширования и других задач.
+ Поддержка асинхронности: HttpClient предоставляет возможность выполнения асинхронных HTTP-запросов. Он возвращает объект Observable, который позволяет подписываться на результаты запроса и получать их асинхронно.
+ Поддержка типизации: HttpClient поддерживает типизацию данных, возвращаемых сервером. Он позволяет указывать ожидаемый тип данных и автоматически преобразовывать ответ сервера в указанный тип.

## 18. `Что такое многоадресная рассылка в Angular?`

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

Пример использования многоадресной рассылки в Angular:
```javascript
import { Observable } from 'rxjs';

// Создание Observable
const observable = new Observable((observer) => {
  // Генерация данных
  observer.next('Первое сообщение');
  observer.next('Второе сообщение');
  observer.next('Третье сообщение');
});

// Подписка на Observable
observable.subscribe((data) => {
  console.log(data);
});
```

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

## 19. `Что такое директива в Angular?`
Директива в Angular - это специальная конструкция, которая позволяет расширять функциональность HTML элементов или создавать собственные элементы с определенным поведением. Директивы позволяют добавлять новые атрибуты, классы или стили к элементам, а также реагировать на события и изменять их внешний вид или поведение.

Директивы в Angular могут быть двух типов: структурные и атрибутные.

Структурные директивы изменяют структуру DOM-дерева, добавляя или удаляя элементы из разметки. Примеры структурных директив в Angular: ngIf, ngFor, ngSwitch.

Атрибутные директивы изменяют внешний вид или поведение элемента, к которому они применяются. Примеры атрибутных директив в Angular: ngStyle, ngClass, ngModel.

Директивы в Angular объявляются с помощью декоратора @Directive и могут содержать различные хуки жизненного цикла, которые позволяют выполнять определенные действия при создании, изменении или удалении директивы.

Например, вот пример директивы в Angular:
```javascript
import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  constructor(private elementRef: ElementRef) {
    // Используем ElementRef для доступа к элементу, к которому применяется директива
    this.elementRef.nativeElement.style.backgroundColor = 'red';
  }
}
```


В этом примере директива MyDirective применяется к элементу с атрибутом myDirective и устанавливает красный фон для этого элемента.







## 23. `Как обмениваться данными между компонентами в Angular?`

## 24. `Что такое складывание?`

## 25. `Что такое NoopZone?`





## 26. `Что такое макросы?`



## 27. `Какова цель общего модуля в Angular?`




## 28. `Какие типы компиляторов используются в Angular?`

## 29. `Какова поддержка Angular Elements в браузере?`

## 30. `Какова роль SPA в Angular?`



## 31. `Что произойдет, если вы не предоставите обработчик для наблюдателя?`

## 32. `Что вы подразумеваете под интерполяцией строк?`

## 33. `Что вы подразумеваете под привязкой данных?`

## 34. `Что такое проекция контента?`

## 35. `Что такое шаблонные выражения?`



## 35. `Что такое двусторонняя привязка данных в Angular?`



## 36. `Что такое декораторы и их типы в Angular?`

## 43. `Что такое обнаружение изменений и как работает механизм обнаружения изменений?`

## 44. `Что происходит, когда вы используете тег скрипта в шаблоне?`

## 45. `Когда использовать директиву?`

## 46. `Что такое интерполяция?`

## 47. `В чем разница между чистой и нечистой трубой?`

## 48. `Что такое наблюдаемые?`

## 49. `Что такое пользовательские элементы?`

## 50. `Каковы различные виды директив?`

## 51. `Всегда ли нам нужен модуль маршрутизации?`

## 52. `Что такое (JIT)?`

## 53. `Какова цель файлов метаданных JSON?`

## 54. `Как вы описываете различные зависимости в приложениях Angular?`

## 55. `Что такое декораторы классов в Angular?`

## 56. `Что произойдет, если я импортирую один и тот же модуль дважды?`

## 57. `Каковы способы запуска обнаружения изменений в Angular?`

## 58. `Каковы принципы безопасности в angular?`

## 59. `Каковы принципы безопасности в angular?`

## 60. `Что такое интерфейс командной строки Schematics?`

## 70. `В чем разница между ViewEncapsulation и Shadow DOM в Angular?`

## 71. `Что такое защита маршрута в Angular?`

## 72. `Что такое угловой материал?`

## 73. `Какова цель декоратора NgModule в Angular?`

## 74. `Что такое внедрение зависимостей в Angular?`

## 75. `В чем разница между HttpClient и Http в Angular?`

## 76. `В чем разница между HttpClient и Http в Angular?`

## 77. `Какова цель элемента ng-container в Angular?`

## 78. `Что такое угловая защита?`

## 79. `В чем разница между асинхронным каналом и методом подписки в Angular?`

## 80. `Как вы обмениваетесь данными между компонентами в Angular?`

## 81. `Что такое преобразователь в Angular?`

## 82. `Что такое провайдер в Angular?`

## 83. `В чем разница между сервисом и компонентом в Angular?`

## 84. `В чем разница между ElementRef и Renderer2 в Angular?`

## 85. `В чем разница между формой, управляемой шаблоном, и реактивной формой в Angular?`

## 86. `Что такое сервисный работник Angular?`

## 87. `В чем разница между шаблоном и представлением в Angular?`

## 88. `Что такое механизм обнаружения изменений Angular?`

## 89. `В чем разница между сервисом и компонентом в Angular?`

## 90. `Что такое ссылочная переменная шаблона Angular?`

## 91. `Что такое декоратор ViewChild в Angular?`

## 92. `В чем разница между формой, управляемой шаблоном, и реактивной формой в Angular?`

## 93. `Что такое модуль Angular?`

## 94. `Что такое NgZone в Angular?`

## 95. `В чем разница между ngOnInit и ngAfterViewInit в Angular?`

## 96. `Какова цель декоратора HostListener в Angular?`

## 97. `Какова цель директивы ng-template в Angular?`

## 98. `Какова цель службы ActivatedRoute в Angular?`

## 99. `Какова цель синтаксиса async/await в Angular?`

## 100. `Какова цель директивы ngClass в Angular?`