Від автора: незалежно від того, ви проводите співбесіду самі або прийшли на співбесіду до кого-то, ці актуальні запитання та відповіді по Angular JS допоможуть вам підготуватися до майбутнього співбесіди на вакансію Front-end розробника. Співбесіда є стресом для обох сторін, і більшість з нас, якщо не всі, змушені були проходити через це хоча б раз у житті. Кожен може з цим впоратися, і цього не слід боятися. Існує кілька способів подолати свої страхи і зробити цей процес менш лякаючим і більш приємним.
Пройшовши незліченна кількість співбесід, як з тієї, так і з іншого боку столу, я можу сказати, що чим менше ви будете готуватися, тим більш підготовленим ви будете. Це може здатися суперечливим, але вислухайте мене. Якщо ваші знання предмета є справжніми, тоді вам нічому вчитися. Коли вам задають питання, відповідь має прийти природним чином, і ви зможете чітко сформулювати його. Ось кілька питань, які вам можуть поставити чи самі ви зможете поставити на наступному співбесіді.
Коли стан форми “pristine”, що саме це означає?
Коли щось має стан “pristine”, це означає, що воно чисте. Поле, яке не порушено користувачем буде знаходитися в цьому стані, поки воно не буде змінено. Тоді воно стане «брудним». Видалення всього тексту не призводить до повернення до вихідного стану, бо поле вже було порушено. Це «початковий» стан використовується при виконанні валідації форми, коли ви хочете, щоб помилка не видавалася для всіх ще не заповнених полів.
Що таке «Одноразова прив’язка» ::, і коли це використовується?
Коли ви додаєте вираження в шаблон за допомогою оператора ::, який називається «одноразова прив’язка», це означає, що для цього виразу дозволено тільки оцінити значення. Це може використовуватися, якщо ви впевнені, що дані не будуть змінюватися протягом сесії. В результаті це може зменшити навантаження на сервер і підвищити продуктивність. В якості прикладу можна навести прив’язку року до div.
// controller.js
class Controller {
constructor() {
this.year = 2017;
}
}
// view.html
Коротко опишіть, як працює цикл дайджесту Angular
«Цикл дайджесту», також відомий як «брудна перевірка», являє собою рекурсивний цикл, який виконується кожен раз, коли ви оновлюєте модель, якщо для обробки всіх прив’язок потрібно більше 10 циклів, то це не спрацює. Чому це потрібно зробити кілька раз — тому що зміна однієї частини може спричинити за собою необхідність змін пов’язаних речей по ланцюжку. Після кожного циклу дайджесту в DOM відображаються зміни в моделі.
Що таке «transclude» і для чого він використовується?
З точки зору AngularJS, коли щось зазначено, як transclude, це допускає зазначення вмісту, який може увійти в компонент або директиву, у вільній формі. Це дає нам набагато більшу гнучкість, якщо ми надаємо компонент, який в основному використовується в якості контейнера. Одним з прикладів такого включення є панель, яка може містити щось. См. приклад нижче.
Інший спосіб зробити це — вказати transclude = true, вам також потрібно буде використовувати елемент або атрибут ng-transclude. Ви можете просто зробити наступне.
This is a header
Some text
Тепер компонент є набагато більш гнучким, оскільки його вміст представлено у вільній формі. Крім того, ще одна перевага даного методу полягає в тому, що, як і у випадку будь-якої іншої розмітки, ви можете використовувати користувальницькі директиви і компоненти, і вони все одно будуть відображатися, на відміну від випадку, коли ви ставите їх атрибути.
Що таке включення залежностей і які це дає нам переваги?
Для компонента не важливо, як включається залежність, головне, щоб вона була доступна для використання в будь-який час. Включення залежностей можна реалізувати, просто використавши правильне ім’я в аргументах методу. Однак, якщо ви мінімізуєте вихідний код, його потрібно обернути в масив рядків або використовувати анотації, такі як ng-annotate.
// Приклад контролера: без мінімізації
{
controller: ($location, anotherDependency) => {
$location.path(‘/angular’);
console.log(anotherDependency);
}
}
Як бачите, ми можемо дуже просто використовувати будь-яку доступну службу. Однак, якщо ви мінімізуєте код, синтаксис може бути складним і важко читаються.
// Приклад контролера: з мінімізацією
{
controller: [‘$location’, ‘anotherDependency’, ($location, anotherDependency) => {
$location.path(‘/angular’);
console.log(anotherDependency);
}]
}
Причина, за якою включення потрібно обертати в масив рядків, полягає в тому, що при мінімізації аргументи стають спотвореними, наприклад, вони перетворюються в a і b, або будь-які інші поодинокі символи, які використовуються, щоб зменшити розмір файлу. З-за цього Angular не знає, що це за залежність, тому що посилання на саме ім’я втрачається. Щоб вирішити дану проблему, був придуманий цей трюк, оскільки литеральные рядка ніколи не змінюються, і ми можемо бути впевненими, що залежність буде включена правильно. Однак у такому випадку код стає досить складним і виглядає повторюваним, ось тут нам на допомогу приходить ng-annotate.
// Приклад контролера: використання ng-анотації
{
controller: /*@ngInject*/($location, anotherDependency) => {
$location.path(‘/angular’);
console.log(anotherDependency);
}
}
Код стає набагато чистіше, так як нам не потрібно повторювати оформлення з використанням рядків масиву з тим же ім’ям. Додаткову інформацію ви можете знайти в репозиторії ng-annotate. Сподіваюся, ви знайшли це керівництво корисним для себе.
