26 Лучшие угловые 8 Вопросы собеседования, чтобы узнать в 2020 году

Автор оригинала: Alex Ershov.

Angular 8 прибыл в 2019 году и с ним куча рабочего процесса и улучшения производительности. Этот выпуск в основном о плюсном и возможности дать ему попробовать, но он также включает в себя несколько функций и нарушения изменений. Давайте узнаем некоторые угловые 8 опросов перед вашим следующим интервью Tech.

Первоначально опубликовано на Fullstack.cafe – никогда не проваливай свое технологическое интервью снова

Q1: Объясните разницу между обещанием и наблюдаемыми в угловом углу?

Тема: Угловой Сложность: ⭐⭐⭐.

Обещания :

• вернуть одно значение
• не отмечен
• Более читаемый код с попробовать/поймать и async/ждут

Наблюдается :

• работать с несколькими значениями со временем
• отдохнуть
• Карта поддержки, фильтр, уменьшение и аналогичных операторов
• Используйте реактивные расширения (RXJS)
• массив, чьи вещи прибывают асинхронно со временем

🔗 Источник: stackoverflow.com.

Q2: Почему Ngoninit использоваться, если у нас уже есть конструктор?

Тема: Угловой Сложность: ⭐⭐⭐.

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

• Ngoninit Является ли крючок жизненного цикла, вызываемый Angular2, чтобы указать, что угловой для создания компонента.

В основном мы используем Ngoninit Для всей инициализации/декларации и избегание вещей для работы в конструкторе. Конструктор следует использовать только для инициализации классовых членов, но не должен делать фактическую «работу». Так что вы должны использовать Конструктор () настроить инъекцию зависимости и не сильно. Ngoninit () лучше место для «начать» – это где/когда привязки компонентов решаются.

🔗 Источник: Medium.com.

Q3: Что такое AOT?

Тема: Угловой Сложность: ⭐⭐⭐.

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

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

🔗 Источник: stackoverflow.com.

Q4: Что такое использование Codelyzer?

Тема: Угловой Сложность: ⭐⭐⭐.

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

CODELEZER проходит сверху ЦЛИНТ, и его конвенции кодирования обычно определяются в файле tslint.json. Codelyzer можно запустить через угловую CLI или NPM напрямую. Монтаж, как код Visual Studio Code и Atom также поддерживает CodeLyzer, просто делая основные настройки.

🔗 Источник: Pankajagarwal.in.

Q5: Какова цель трассы подстановки?

Тема: Угловой Сложность: ⭐⭐⭐.

Если URL не соответствует никаким предопределенным маршрутам, то он заставляет маршрутизатор бросить ошибку и схватить приложение. В этом случае вы можете использовать RightCard Route. Маршрут подстановки имеет путь, состоящий из двух звездочек, чтобы соответствовать каждому URL.

Например, вы можете определить PAGENOTFOODCOUNTCOMPONENT для подстановки маршрута, как показано ниже

{ path: '**', component: PageNotFoundComponent }

🔗 Источник: github.com/sudheerj

Q6: Какие пользовательские элементы?

Тема: Угловой Сложность: ⭐⭐⭐.

Пользовательские элементы (или веб-компоненты) – это функция веб-платформы, которая расширяет HTML, позволяя вам определить тег, содержание которого создается и контролируется кодом JavaScript. Браузер поддерживает CustomLementRegistry определенных пользовательских элементов, которые отображает мгновенный класс JavaScript в тег HTML. В настоящее время эта функция поддерживается Chrome, Firefox, Opera и Safari и доступна в других браузерах через многолифики.

🔗 Источник: github.com/sudheerj

Q7: Каковы функции утилиты, предоставленные RXJS?

Тема: Угловой Сложность: ⭐⭐⭐.

Библиотека RXJS также предоставляет ниже утилиты для создания и работы с наблюдателями.

1. Преобразование существующего кода для Async операций в наблюдаемые
2. Итерация по значениям в потоке
3. Сопоставление значений на разные типы
4. Фильтрующие потоки
5. Составление нескольких потоков

🔗 Источник: github.com/sudheerj

Q8: Что подписывается?

Тема: Угловой Сложность: ⭐⭐⭐.

Наблюдаемый случай начинает публикацию ценностей только тогда, когда кто-то подписывается на него. Так что вам нужно подписаться, позвонив Подписаться () Способ применения, передающий объект наблюдателя для получения уведомлений.

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

    Creates an observable sequence of 5 integers, starting from 1
    const source = range(1, 5);

    // Create observer object
    const myObserver = {
      next: x => console.log('Observer got a next value: ' + x),
      error: err => console.error('Observer got an error: ' + err),
      complete: () => console.log('Observer got a complete notification'),
    };

    // Execute with the observer object and Prints out each item
    myObservable.subscribe(myObserver);
    // => Observer got a next value: 1
    // => Observer got a next value: 2
    // => Observer got a next value: 3
    // => Observer got a next value: 4
    // => Observer got a next value: 5
    // => Observer got a complete notification

🔗 Источник: github.com/sudheerj

Q9: Что нового в угловых 8?

Тема: Угловой Сложность: ⭐⭐⭐.

Этот релиз в основном в отношении плющ и возможности дать ему попробовать, но он также включает в себя несколько функций и нарушения изменения, а именно:

• Дифференциальная нагрузка – С дифференциальной нагрузкой, когда создаются два пакета, при создании производства: пакет для современных браузеров, которые поддерживают ES2015 + и пучок для более старых браузеров, которые поддерживают только версию JavaScript ES5
• Tymdercript 3.4 служба поддержки
• Плющ – Это новый компилятор/время выполнения угловых. Он включит очень крутые функции в будущем, но в настоящее время он сосредоточен на том, чтобы не нарушать существующие приложения.
• Базель Поддержка – это инструмент сборки, разработанный и массивно используемый Google, так как он может построить в значительной степени любой язык.
• Lazy-loading с импортом () синтаксис

// from
loadChildren: './admin/admin.module#AdminModule'
// to
loadChildren: () => import('./races/races.module').then(m => m.RacesModule)

• Чтобы помочь людям мигрировать из Angularjs, к тому, что куча вещей было добавлено к Расположение Услуги в угловании
• Регистрация обслуживания работника Имеет новый вариант, который позволяет указать, когда должна быть проведена регистрация.
• @ Угловой/http был удален с 8,0, после замены @ Угловой/общий/http в 4.3 и официально устаревшим в 5.0,

🔗 Источник: blog.ninja-squad.com.

Q10: Angular 8: Что такое базель?

Тема: Угловой Сложность: ⭐⭐⭐.

Google открыть программное обеспечение, ответственное за создание большинства его проектов под названием Базель Отказ Bazel – это мощный инструмент, который может отслеживать зависимости между различными пакетами и создавать цели.

Некоторые из особенностей Bazel являются:

• Он имеет умный алгоритм для определения зависимостей сборки – на основе графика зависимости проекта, Bazel определяет, какие цели могут построить параллельно
• Базель не зависит от технологического стека. Мы можем построить все, что мы хотим, используя тот же интерфейс. Например, есть плагины для Java, GO, Teamscript, JavaScript и многое другое

🔗 Источник: blog.mgechev.com.

Q11: Angular 8: Что такое угловой плющ?

Тема: Угловой Сложность: ⭐⭐⭐.

Большая часть угловой – это его компилятор: он принимает все свой HTML и генерирует необходимый код JS. Этот компилятор (и время выполнения) был полностью переписан за последний год, и это то, о чем есть плющ. Последнее перезапись было сделано в угловом 4.0.

Плющ является полным переписом компилятора (и выполнения) для:

• достичь лучшего строения (с более инкрементным компиляцией)
• достичь лучшего размера сборки (с генерируемым кодом более совместимы с встряхиванием деревьев)
• Разблокируйте новые потенциальные особенности (метапрограммирование или компоненты высшего порядка, ленивая загрузка компонента вместо модулей, новая система обнаружения изменений, не основана на Zone.js …)

🔗 Источник: blog.ninja-squad.com.

Q12: Угловая 8: объяснить ленивую нагрузку в угловой 8?

Тема: Угловой Сложность: ⭐⭐⭐.

Ленивая нагрузка – одна из самых полезных концепций угловой маршрутизации и приносит размер больших файлов. Это делается лениво загрузкой файлов, которые требуются Изредка Отказ

Угловая 8 подходит для поддержки Динамический импорт В нашей конфигурации маршрутизатора. Это означает, что мы используем оператор импорта для ленивых загрузки модуля, и это будет понятно IDes, WebPack и т. Д.

Угловой 7:

{path: 'user', loadChildren: './users/user.module#UserModule'}

Угловой 8:

{path: 'user', loadChildren: () => import('./users/user.module').then(m => m.UserModule)};

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

🔗 Источник: dev.to.

Q13: Как обнаружить изменение маршрута в угловом количестве?

Тема: Угловой Сложность: ⭐⭐⭐⭐.

В угловой вы можете Подписаться (RX событие) к экземпляру маршрутизатора. Таким образом, вы можете делать такие вещи, как:

class MyClass {
    constructor(private router: Router) {
        router.subscribe((val) => /*whatever*/ )
    }
}

🔗 Источник: Medium.com.

Q14: Существуют ли какие-либо плюсы/минусы (особенно работающие) в использовании локального хранилища для замены функциональности cookie?

Тема: Угловой Сложность: ⭐⭐⭐⭐.

Печенье и местное хранилище обслуживают разные цели.

• Печенье в первую очередь для чтения Серверная сторона ,
• Локальное хранилище можно прочитать только с помощью клиента.

Таким образом, вопрос в вашем приложении, кому нужны эти данные – клиент или сервер? Если это ваш клиент (ваш JavaScript), то все средства переключитесь на локальное хранилище. Вы тратите пропускную способность, отправив все данные в каждый заголовок HTTP.

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

🔗 Источник: stackoverflow.com.

Q15: Что такое зона в угловом угловании?

Тема: Угловой Сложность: ⭐⭐⭐⭐.

Ngzone это обертка вокруг Zone.js который является библиотекой, которая создает контекст вокруг асинхронных функций, чтобы сделать их слежения. Обнаружение изменения угловых изменений сильно зависит от зон.

🔗 Источник: stackoverflow.com.

Q16: Что делает компилятор JAST-TORE (JIT) (в целом)?

Тема: Угловой Сложность: ⭐⭐⭐⭐.

JIT Compiler работает после Программа начала и компилирует код (обычно Bytecode или какие-то инструкции VM) на лету (или просто вовремя, как это называется) в форму, которая обычно быстрее, как правило, обычно устаревшая набор инструкций Host CPU. JIT имеет доступ к информации динамического времени выполнения, тогда как стандартный компилятор не имеет и может сделать лучшие оптимизации, такие как вставка функций, которые часто используются.

Это в отличие от традиционного компилятора, который компилярует Все Код на машинном языке до Программа сначала запускается.

🔗 Источник: stackoverflow.com.

Q17: Что такое ngupgrage?

Тема: Угловой Сложность: ⭐⭐⭐⭐.

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

🔗 Источник: blog.nrwl.io.

Q18: Что такое инкрементное домо? Как это отличается от виртуального дома?

Тема: Угловой Сложность: ⭐⭐⭐⭐.

Инкрементное домо Используется внутри Google, и он определяется этой ключевой идеей:

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

Реагирование было первой основной структурой для использования ** виртуального DOM **, которая определяется этой ключевой идеей:

Каждый компонент создает новое виртуальное дерево DOM каждый раз, когда он становится перераспределенным. Реагистрация сравнивает новое виртуальное дерево DOM со старым, а затем применяет ряд преобразований в браузер DOM, чтобы соответствовать новой виртуальной DOM дереве.

🔗 Источник: blog.nrwl.io.

Q19: Angular 8: Почему мы должны использовать Bazel для угловых сборки?

Тема: Угловой Сложность: ⭐⭐⭐⭐.

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

Многие крупные проекты сообщают о значительном увеличении их инкрементальных сборки, когда их кодовая база растет. Анализируя график сборки, предоставляемый Build.bazel Файлы, базель Перестраивает только пакеты, которые изменились и ничего больше.

🔗 Источник: blog.mgechev.com.

Q20: объяснить цель обслуживающих работников в угловом

Тема: Угловой Сложность: ⭐⭐⭐⭐.

У самых простых, Сервисный работник это скрипт, который работает в веб-браузере и Управляет кэшированием для приложения Отказ

Сервисные работники функционируют как Сетевой прокси Отказ Они перехватывают все исходящие HTTP-запросы, сделанные приложением и могут выбрать, как их ответить на них. Например, они могут запрашивать локальный кэш и доставить кэшированный ответ, если он доступен. Прокси не ограничивается просьбами, сделанными через программные API, такие как Fetch; Он также включает в себя ресурсы, указанные в HTML и даже на начальный запрос на index.html. Таким образом, кэширование на основе службы, таким образом, полностью программируется и не полагается на указанные серверы кэширования заголовков.

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

🔗 Источник: angular.io.

Q21: Что такое угловой эквивалент Angularjs «$ W смотреть»?

Тема: Угловой Сложность: ⭐⭐⭐⭐⭐.

Решение – это Установить Синтаксис из ES6. Установить Синтаксис связывает свойство объекта к функции, которая будет называться, когда есть попытка установить это свойство.

import { Component, Input } from '@angular/core';
@Component({
  selector: 'example-component',
})
export class ExampleComponent {
  public internalVal = null;
  constructor() {}
  
  @Input('externalVal')
  set updateInternalVal(externalVal) {
    this.internalVal = externalVal;
  }
}

🔗 Источник: Medium.com.

Q22: Roud-Time (JIT) против подборки (AOT). Объяснить разницу.

Тема: Угловой Сложность: ⭐⭐⭐⭐⭐.

JIT – Компилировать TymerctScript только для выполнения его:

• Скомпилирован в браузере.
• Каждый файл скомпилирован отдельно.
• Не нужно строить после изменения вашего кода и перед перезагрузкой страницы браузера.
• Подходит для местного развития.

AOT – Компилированная фирма во время фазы сборки:

• Компиляция самой машины через командную строку (быстрее).
• Вся код скомпилирован вместе, вставка HTML/CSS в сценариях.
• Не нужно развертывать компилятор (половина углового размера).
• Более безопасный, оригинальный источник не раскрыт.
• Подходит для производства сборки.

🔗 Источник: stackoverflow.com.

Q23: Почему команда Google отправляется с инкрементным домом вместо виртуального DOM?

Тема: Угловой Сложность: ⭐⭐⭐⭐⭐.

У них есть одна цель: Приложения должны хорошо работать на мобильных устройствах Отказ Это в основном означало оптимизацию двух вещей: размер пакета и след памяти.

Для достижения двух голов:

• Сам рендеринг двигатель должен быть дрожащим деревом
• Двигатель рендеринга должен иметь низкую площадь памяти

🔗 Источник: blog.nrwl.io.

Q24: Почему инкрементное дому – это дрожание дерева?

Тема: Угловой Сложность: ⭐⭐⭐⭐⭐.

При использовании дополнительного DOM структура не интерпретирует компонент. Вместо этого компонент ссылается на инструкции. Если это не ссылается на конкретную инструкцию, она никогда не будет использоваться. И поскольку мы знаем это в компиляционном времени, мы можем опустить неиспользованную инструкцию из расслоения.

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

🔗 Источник: blog.nrwl.io.

Q25: Angular 8: Как плющ влияет на время сборки (RE)?

Тема: Угловой Сложность: ⭐⭐⭐⭐⭐.

Один из целей плюща – Доберитесь до лучшего строения (с более инкрементным компиляцией). Это достигается новым принципом местности:

Чтобы скомпилировать AppComponent что использует ВНУТРЕННЯЙТЕ ОТКРЫТЬ В своем шаблоне плющ не нужно ничего знать о компонентах пони.

Ранее, когда вы работали над вашим приложением, угловые должны были перекомпилировать все внутри вашего модуля, чтобы узнать, что изменилось, Поскольку сгенерированный код компонента может быть использован внутренние детали другого компонента Отказ

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

🔗 Источник: blog.ninja-squad.com.

Q26: Angular 8: Какие изменения в модуле местоположения?

Тема: Угловой Сложность: ⭐⭐⭐⭐⭐.

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

• Платформа. Теперь предлагает доступ к имени хоста, порта и протокола, а также новый getstate () Метод позволяет получить История. Стата Отказ
• А Mockplatformlocation также доступен для облегчения тестирования.

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

🔗 Источник: blog.ninja-squad.com.

Спасибо 🙌 Для чтения и удачи в интервью! Пожалуйста, поделитесь этой статьей с вашим собратьем devs, если вам это нравится! Убедитесь, что вопросы и ответы на 👉 www.fullstack.cafe.