├── .gitignore ├── README.md ├── package.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea 2 | /node_modules 3 | *.iml -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Вопросы на собеседовании по Angular [![Angular-RU](https://img.shields.io/badge/Telegram_chat:-Angular_RU-216bc1.svg?style=flat)](https://t.me/angular_ru) 2 | 3 | Вопросы подготовлены непосредственно для того, чтобы определить уровень разработчика, насколько глубоко, поверхностно или сносно он знает Angular. Вопросы для собеседования на знание JavaScript или Web-стека хорошо освещены в других местах, поэтому ниже будет добавлен список ресурсов по этой теме: 4 | 5 | **Fundamentals**: 6 | 7 | - [Coding Interview University](https://github.com/jwasham/coding-interview-university) 8 | - [Awesome Interviews](https://github.com/alex/what-happens-when) 9 | - [Angular Interview Questions](https://github.com/sudheerj/angular-interview-questions) 10 | 11 | **Frontend**: 12 | 13 | - [Front-end Job Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions) 14 | - [The Best Frontend JavaScript Interview Questions]() 15 | - [Frontend Guidelines Questionnaire](https://github.com/bradfrost/frontend-guidelines-questionnaire) 16 | - [Подготовка к интервью на Front-end разработчика](https://proglib.io/p/frontend-interview/) 17 | 18 | **Angular**: 19 | 20 | - [Angular Interview Questions by Google Developer Expert](https://github.com/Yonet/Angular-Interview-Questions) 21 | 22 | ##### Базовые вопросы для Junior/Middle 23 | 24 |
25 | В чем отличие фреймворка от библиотеки (приведите примеры и отличия)? 26 |
27 | in progress.. 28 |
29 |
30 | 31 |
32 | Какие популярные CSS, JS библиотеки вы знаете? 33 |
34 | in progress.. 35 |
36 |
37 | 38 |
39 | Знаете ли вы как браузер обрабатывает index.html (расскажите про Critical Rendering Path)? 40 |
41 | in progress.. 42 |
43 |
44 | 45 |
46 | Какие типы данных есть в JavaScript? 47 |
48 | in progress.. 49 |
50 |
51 | 52 |
53 | Как устроена память в JavaScript (memory heap, memory stack)? 54 |
55 | in progress.. 56 |
57 |
58 | 59 |
60 | Что такое this и расскажите про область видимости? 61 |
62 | in progress.. 63 |
64 |
65 | 66 |
67 | В чем отличие var от const, let? 68 |
69 | in progress.. 70 |
71 |
72 | 73 |
74 | Объясните, как работает наследование прототипов, что такое цепочка прототипов, и когда появилось ключевое слова class в JS? 75 |
76 | in progress.. 77 |
78 |
79 | 80 |
81 | Что такое структура данных и какие виды вы знаете (Стек, etc)? 82 |
83 | in progress.. 84 |
85 |
86 | 87 |
88 | Что такое Promise и для чего используется в JS? 89 |
90 | in progress.. 91 |
92 |
93 | 94 |
95 | Что такое call-stack, task-queue (приведите примеры работы)? 96 |
97 | in progress.. 98 |
99 |
100 | 101 |
102 | Что такое макро и микро задачи в JS? 103 |
104 | in progress.. 105 |
106 |
107 | 108 |
109 | Назовите основные принципы ООП? 110 |
111 | in progress.. 112 |
113 |
114 | 115 |
116 | Что такое класс и интерфейс? 117 |
118 | in progress.. 119 |
120 |
121 | 122 |
123 | Что такое конструктор класса? 124 |
125 | in progress.. 126 |
127 |
128 | 129 |
130 | Расскажите про стек TCP/IP, а также более подробно про, что такое HTTP и какую роль он играет при разработке приложений? 131 |
132 | in progress.. 133 |
134 |
135 | 136 |
137 | Что такое REST API, как происходит взаимодействие (расскажите про основные коды ошибок, заголовки пакетов и способы их отправки)? 138 |
139 | in progress.. 140 |
141 |
142 | 143 | ##### Основны TypeScript 144 | 145 |
146 | Зачем нам нужны определения типов, где есть JavaScript c динамической типизацией? 147 |
148 | in progress.. 149 |
150 |
151 | 152 |
153 | Что такое пользовательский тип данных 154 |
155 | in progress.. 156 |
157 |
158 | 159 |
160 | Что такое Union Type (тип объединения) и для чего используется? 161 |
162 | in progress.. 163 |
164 |
165 | 166 |
167 | Поддерживает ли TypeScript перегрузку методов? 168 |
169 | in progress.. 170 |
171 |
172 | 173 |
174 | Возможна ли перегрузка конструктора в TypeScript? 175 |
176 | in progress.. 177 |
178 |
179 | 180 |
181 | Поддерживает ли TypeScript перегрузку методов (конструкторов)? 182 |
183 | in progress.. 184 |
185 |
186 | 187 |
188 | Что такое декоратор и какие виды декораторов вы знаете? 189 | 190 |
191 | 192 | Декоратор — способ добавления метаданных к объявлению класса. Это специальный вид объявления, который может быть присоединен к объявлению класса, методу, методу доступа, свойству или параметру.
193 |
Декораторы используют форму @expression, где expression - функция, которая будет вызываться во время выполнения с информацией о декорированном объявлении.
194 |
И, чтобы написать собственный декоратор, нам нужно сделать его factory и определить тип: 195 | 196 | 202 | 203 | Декоратор класса 204 |
205 | 206 | Вызывается перед объявлением класса, применяется к конструктору класса и может использоваться для наблюдения, изменения или замены определения класса. Expression декоратора класса будет вызываться как функция во время выполнения, при этом конструктор декорированного класса является единственным аргументом. Если класс декоратора возвращает значение, он заменит объявление класса вернувшимся значением.
207 | 208 | ```ts 209 | export function logClass(target: Function) { 210 | // Сохранение ссылки на оригинальный конструктор 211 | const original = target; 212 | 213 | // Функция генерирует экземпляры класса 214 | function construct(constructor, args) { 215 | const c: any = function () { 216 | return constructor.apply(this, args); 217 | }; 218 | c.prototype = constructor.prototype; 219 | return new c(); 220 | } 221 | 222 | // Определение поведения нового конструктора 223 | const f: any = function (...args) { 224 | console.log(`New: ${original["name"]} is created`); 225 | //New: Employee создан 226 | return construct(original, args); 227 | }; 228 | 229 | // Копирование прототипа, чтобы оператор intanceof работал 230 | f.prototype = original.prototype; 231 | 232 | // Возвращает новый конструктор, переписывающий оригинальный 233 | return f; 234 | } 235 | 236 | @logClass 237 | class Employee {} 238 | 239 | let emp = new Employee(); 240 | console.log("emp instanceof Employee"); 241 | //emp instanceof Employee 242 | console.log(emp instanceof Employee); 243 | //true 244 | ``` 245 | 246 |
247 | 248 |
Декоратор свойства 249 | 250 |
251 | 252 | Объявляется непосредственно перед объявлением метода. Будет вызываться как функция во время выполнения со следующими двумя аргументами: 253 | 254 |
    255 |
  • target - прототип текущего объекта, т.е. если Employee является объектом, Employee.prototype
    • 256 |
  • propertyKey - название свойства
    • 257 |
258 | 259 | ```ts 260 | function logParameter(target: Object, propertyName: string) { 261 | // Значение свойства 262 | let _val = this[propertyName]; 263 | 264 | // Геттер свойства 265 | const getter = () => { 266 | console.log(`Get: ${propertyName} => ${_val}`); 267 | return _val; 268 | }; 269 | 270 | // Сеттер свойства 271 | const setter = (newVal) => { 272 | console.log(`Set: ${propertyName} => ${newVal}`); 273 | _val = newVal; 274 | }; 275 | 276 | // Удаление свойства 277 | if (delete this[propertyName]) { 278 | // Создает новое свойство с геттером и сеттером 279 | Object.defineProperty(target, propertyName, { 280 | get: getter, 281 | set: setter, 282 | enumerable: true, 283 | configurable: true, 284 | }); 285 | } 286 | } 287 | 288 | class Employee { 289 | @logParameter 290 | name: string; 291 | } 292 | 293 | const emp = new Employee(); 294 | emp.name = "Mohan Ram"; 295 | console.log(emp.name); 296 | 297 | // Set: name => Mohan Ram 298 | // Get: name => Mohan Ram 299 | // Mohan Ram 300 | ``` 301 | 302 |
303 | 304 |
Декоратор метода 305 | 306 |
307 | 308 | Объявляется непосредственно перед объявлением метода. Будет вызываться как функция во время выполнения со следующими двумя аргументами: 309 | 310 |
    311 |
  • target - прототип текущего объекта, т.е. если Employee является объектом, Employee.prototype
    • 312 |
  • propertyName - название свойства
    • 313 |
  • descriptor - дескриптор свойства метода т.е. - Object.getOwnPropertyDescriptor (Employee.prototype, propertyName)
    • 314 |
315 | 316 | ```ts 317 | export function logMethod( 318 | target: Object, 319 | propertyName: string, 320 | propertyDescriptor: PropertyDescriptor): PropertyDescriptor { 321 | const method = propertyDescriptor.value; 322 | 323 | propertyDescriptor.value = function (...args: any[]) { 324 | 325 | // Конвертация списка аргументов greet в строку 326 | const params = args.map(a => JSON.stringify(a)).join(); 327 | 328 | // Вызов greet() и получение вернувшегося значения 329 | const result = method.apply(this, args); 330 | 331 | // Конвертация результата в строку 332 | const r = JSON.stringify(result); 333 | 334 | // Отображение в консоли деталей вызова 335 | console.log(`Call: ${propertyName}(${params}) => ${r}`); 336 | 337 | // Возвращение результата вызова 338 | return result; 339 | } 340 | return propertyDescriptor; 341 | } 342 | 343 | class Employee { 344 | 345 | constructor( 346 | private firstName: string, 347 | private lastName: string 348 | ) { 349 | } 350 | 351 | @logMethod 352 | greet(message: string): string { 353 | return `${this.firstName} ${this.lastName} says: ${message}`; 354 | } 355 | 356 | } 357 | 358 | const emp = new Employee('Mohan Ram', 'Ratnakumar'); 359 | emp.greet('hello'); 360 | //Call: greet("hello") => "Mohan Ram Ratnakumar says: hello" 361 | ``` 362 |
363 | 364 |
Декоратор параметра 365 | 366 |
367 | 368 | Объявляется непосредственно перед объявлением метода. Будет вызываться как функция во время выполнения со следующими двумя аргументами: 369 | 370 |
    371 |
  • target - прототип текущего объекта, т.е. если Employee является объектом, Employee.prototype
    • 372 |
  • propertyKey - название свойства
    • 373 |
  • index - индекс параметра в массиве аргументов
    • 374 |
375 | 376 |
377 | 378 | ```ts 379 | function logParameter(target: Object, propertyName: string, index: number) { 380 | // Генерация метаданных для соответствующего метода 381 | // для сохранения позиции декорированных параметров 382 | const metadataKey = `log_${propertyName}_parameters`; 383 | 384 | if (Array.isArray(target[metadataKey])) { 385 | target[metadataKey].push(index); 386 | } else { 387 | target[metadataKey] = [index]; 388 | } 389 | } 390 | 391 | class Employee { 392 | greet(@logParameter message: string): void { 393 | console.log(`hello ${message}`); 394 | } 395 | } 396 | const emp = new Employee(); 397 | emp.greet("world"); 398 | ``` 399 | 400 |
401 | 402 | ##### Основные концепции 403 | 404 |
405 | Что такое Angular? 406 |

407 |

Angular — это платформа для разработки мобильных и десктопных веб-приложений. Наши приложения теперь представляют из себя «толстый клиент», где управление отображением и часть логики перенесены на сторону браузера. Так сервер уделяет больше времени доставке данных, плюс пропадает необходимость в постоянной перерисовке. С Angular мы описываем структуру приложения декларативно, а с TypeScript начинаем допускать меньше ошибок, благодаря статической типизации. В Angular присутствует огромное количество возможностей из коробки. Это может быть одновременно и хорошо и плохо, в зависимости от того, что вам необходимо.

408 | 409 | Какие плюсы можно выделить: 410 |
    411 |
  • Поддержка Google, Microsoft
    • 412 |
  • Инструменты разработчика (CLI)
    • 413 |
  • Typescript из коробки
    • 414 |
  • Реактивное программирование с RxJS
    • 415 |
  • Единственный фреймворк с Dependency Injection из коробки
    • 416 |
  • Шаблоны, основанные на расширении HTML
    • 417 |
  • Кроссбраузерный Shadow DOM из коробки (либо его эмуляция)
    • 418 |
  • Кроссбраузерная поддержка HTTP, WebSockets, Service Workers
    • 419 |
  • Не нужно ничего дополнительно настраивать. Больше никаких оберток. jQuery плагины и D3 можно использовать на прямую
    • 420 |
  • Более современный фреймворк, чем AngularJS (на уровне React, Vue)
    • 421 |
  • Большое комьюнити
    • 422 |
423 | 424 | Минусы: 425 | 426 |
    427 |
  • Выше порог вхождения из-за Observable (RxJS) и Dependency Injection
    • 428 |
  • Чтобы все работало хорошо и быстро нужно тратить время на дополнительные оптимизации 429 | (он не супер быстрый, по умолчанию, но быстрее AngularJS во много раз)
    • 430 |
  • Если вы планируете разрабатывать большое enterprise-приложение, то в этом случае, у вас нет архитектуры из коробки - нужно добавлять Mobx, Redux, MVVM, CQRS/CQS или другой state-менеджер, чтобы потом не сломать себе мозг
    • 431 |
  • Angular-Universal имеет много подводных камней
    • 432 |
  • Динамическое создание компонентов оказывается нетривиальной задачей
    • 433 |
434 | 435 |
436 |
437 | 438 |
439 | В чем разница между AngularJS и Angular? 440 |
441 | 442 |
AngularJS является фреймворком, который может помочь вам в разработке Single Page Application. Он появился в 2009 году и с годами выяснилось, что имел много проблем. Angular (Angular 2+) же в свою очередь направлен на тоже самое, но дает больше преимуществ по сравнению с AngularJS 1.x, включая лучшую производительность, ленивую загрузку, более простой API, более легкую отладку. 443 | 444 | Что появилось в Angular:
445 | 446 |
    447 |
  • Angular ориентирован на мобильные платформы и имеет лучшую производительность
    • 448 |
  • Angular имеет встроенные сервисы для поддержки интернационализации
    • 449 |
  • AngularJS проще настроить, чем Angular
    • 450 |
  • AngularJS использует контроллеры и $scope
    • 451 |
  • Angular имеет много способов определения локальных переменных
    • 452 |
  • В Angular новый синтаксис структурных директив (camelCase)
    • 453 |
  • Angular работает напрямую с свойствами и событиями DOM элементов
    • 454 |
  • Одностороннее связывание данных через [property]
    • 455 |
  • Двустороннее связывание данных через [(property)]
    • 456 |
  • Новый механизм DI, роутинга, запуска приложения
    • 457 |
458 | 459 | Основные преимущества Angular:
460 | 461 |
    462 |
  • Обратная совместимость Angular 2, 4, 5, ..
    • 463 |
  • TypeScript с улучшенной проверкой типов
    • 464 |
  • Встроенный компилятор с режимами JIT и AOT (+сокращение кода)
    • 465 |
  • Встроенные анимации
    • 466 |
467 | 468 |
469 |
470 | 471 |
472 | Какой должна быть структура каталогов компонентов любого Angular приложения и почему? 473 |
474 | in progress.. 475 |
476 |
477 | 478 |
479 | Что такое MVVM и в чем разница перед MVC? 480 |
481 |
MVVM - шаблон проектирования архитектуры приложения. Состоит из 3 ключевых блоков: Model, View, ViewModel. 482 |
Отличие от MVС заключаются в:

483 | 484 |
  • View реагирует на действия пользователя и передает их во View Model через Data Binding.
    • 485 |
  • View Model, в отличие от контроллера в MVC, имеет особый механизм, автоматизирующий связь между View и связанными свойствами в ViewModel.
    • 486 | 487 |
    Привязка данных между View и ViewModel может быть односторонней или двусторонней (one-way, two-way data-binding). 488 |
    489 |
    490 | 491 | ##### Angular Template синтаксис 492 | 493 |
    494 | Что такое интерполяция в Angular? 495 |

    496 | 497 | Разметка интерполяции с внедренными выражениями используется в Angular для присвоения данных текстовым нодам и значения аттрибутов. Например: 498 | 499 | ```html 500 | Hello {{username}}! 501 | ``` 502 | 503 |
    504 |
    505 | 506 |
    507 | 508 |
    509 | Какие способы использования шаблонов в Angular вы знаете? 510 |
    511 | in progress.. 512 |
    513 |
    514 | 515 |
    516 | В чем разница между структурной и атрибутной директивой, назовите встроенные директивы? 517 |
    518 |
  • Структурные директивы влияют на DOM и могут добавлять/удалять элементы
    (ng-template, NgIf, NgFor, NgSwitch, etc)
    • 519 |
  • Атрибутные директивы меняют внешний вид или поведение элементов, компонентов или других директив
    (NgStyle, NgClass, etc).
    • 520 |
    521 |
    522 | 523 |
    524 | Для чего нужны директивы ng-template, ng-container, ng-content? 525 |
    526 |

    1. ng-template

    527 | 528 | `