Angular 2+

• Концепция, отличие от AngularJS туть

• Что такое Angular?

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

• В чем разница между AngularJS и Angular?

AngularJS является фреймворком, который может помочь вам в разработке Single Page Application. Он появился в 2009 году и с годами выяснилось, что имел много проблем. Angular (Angular 2+) же в свою очередь направлен на тоже самое, но дает больше преимуществ по сравнению с AngularJS 1.x, включая лучшую производительность, ленивую загрузку, более простой API, более легкую отладку.

Что появилось в Angular:

*Angular ориентирован на мобильные платформы и имеет лучшую производительность

*Angular имеет встроенные сервисы для поддержки интернационализации

*AngularJS проще настроить, чем Angular

*AngularJS использует контроллеры и $scope

*Angular имеет много способов определения локальных переменных

*В Angular новый синтаксис структурных директив (camelCase)

*Angular работает напрямую с свойства и событиями DOM элементов

*Одностороннее связывание данных через [property]

*Двустороннее связывание данных через [(property)]

*Новый механизм DI, роутинга, запуска приложения

Основные преимущества Angular:

*Обратная совместимость Angular 2, 4, 5, ..

*TypeScript с улучшенной проверкой типов

*Встроенный компилятор с режимами JIT и AOT (+ cокращение кода)

*Встроенные анимации

• package.json

• Typescript все про него

• Что такое npm?

NPM — это менеджер пакетов, который используется Node JS - приложениями. Он используется для установки зависимостей для библиотек на Javascript.Существует два основных интерфейса, с которыми можно взаимодействовать: сайт NPM и набор инструментов командной строки (CLI).

• Что такое Angular CLI? Как установить Angular CLI?

Angular CLI это командный интерфейс Angular, который запускает Webpack. Чтобы установить Angular CLI воспользуйтесь командой:

npm install -g @angular/cli

• Что такое декораторы?

Декораторы это функции, которые добавляют метаданные к членам класса и функциям.

Были предложены в ES2016 и реализованы в Typescript.

• Аннотации и декораторы - отличия?

Аннотации — это механизм, добавляющий в объекты свойство annotation, которое представляет из себя объект и содержит в себе дополнительную информацию для фреймворка (метаданные).

Декораторы — это альтернатива для аннотаций, предложенная в стандарт ECMAScript 2016. Декораторы позволяют не только аннотировать метаданными объекты, но и модифицировать (декорировать) классы, методы и свойства.

Аннотации — это частный случай использования декораторов.

• Какие есть способы привязки данных в Angular?

Привязка данных – это концепция Angular, с помощью которой разработчики могут менять статичный контент веб-приложения, делая приложение более активным и привлекательным. Эти четыре типа позволяют общаться бизнес-логике (код Type Script) с представлением (HTML код), как показано на диаграмме ниже.

Angular поддерживает 4 способа привязки данных (data binding):

*Интерполяция строк С помощью этого метода мы можем встроить элементы typescript в HTML код. скобки называются строковой интерполяцией в Angular внутри HTML кода. Мы можем напрямую стучаться к элементам TypeScript кода и отображать значение элементов в представлении. Внутри двойных фигурных скобок мы можем поместить любую строку, которая будет сопоставляться с соответствующим элементом typescript. Внутри этих скобок также можно выполнять функции typescript, в представлении будет отображаться возвращаемое значение.

*Привязка свойств Способ коммуникации TypeScript кода с HTML кодом: привязываем свойство TypeScript к HTML свойству. Вместо строковой интерполяции можно написать HTML код.

export class ItemComponent {
  itemName: "Item1";
...

<h4 [innerText]="itemName" ></h4>

Здесь [innerText] – способ привязки HTML свойства в Angular. Квадратные скобки [] говорят о том, что мы будем использовать привязку свойств. Внутри скобок необходимо указать свойство HTML элемента для использования. Существует масса HTML свойств, которые можно использовать для привязки. Привязать можно как переменную, так и функцию TypeScript.

*Привязка событий Нужна для отправки данных из HTML файла в TypeScript файл. Круглые скобки () указывают Angular, что мы будем использовать привязку событий. Внутри скобок указывается события привязки. В HTML есть встроенные события типа onClick, onLoad и т.д., однако здесь события необходимо писать без префикса on: (click), (load).

Важный аргумент, который можно передавать в функцию type script — $event. В HTML файле $event – зарезервированное ключевое слово. Оно посылает всю информацию о событиях в файл type script, чтобы внутри функции мы могли с ней работать.

*Двусторонняя привязка [()] говорит Angular, что мы будем использовать двустороннюю привязку. Для привязки свойств мы использовали синтаксис [], а для привязки событий (). Здесь же мы объединяем обе функции, и нам необходимо использовать специальную директиву ngModel. Например:

<input type="text" [(ngModel)] = "itemName">

• Из чего состоят компоненты? Как сгенерировать новый компонент?

Компоненты состоят из декоратора @Component и класса самого компонента. Чтобы создать новый компонент, можно воспользоваться следующей командой:

ng generate component component_name

• Что такое $event?

В Angular $event это зарезервированное ключевое слово, которое используется для передачи данных сгенерированного события (event data). Обычно используется как параметр методов, вызываемых по каким-либо событиям.

• Для чего используются двойные фигурные скобки?

Двойные фигурные скобки используются для интерполяции данных в шаблоне.

• Для чего нужна директива *ngFor?

*ngFor используется для обхода по списку (массиву) элементов для генерации DOM-элементов для каждого или вывода каких-либо данных.

• Для чего нужен Webpack?

Webpack это бандлер (сборщик) модулей для Angular. Он собирает, минифицирует и транспилирует приложение на Angular.

• Что такое транспилирование (Transpiling)?

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

• Каков жизненный цикл компонента?

В Angular жизненный цикл компонента выглядит следующим образом:

*Создание

*Рендеринг

*Создание и рендеринг вложенных компонентов

*Проверка привязанных данных и перерисовка шаблона

*Уничтожение

• Что такое NgModule?

NgModule это декоратор в Angular, который добавляет данные, описывающие модуль.

• Для чего нужны директивы ng-template, ng-container, ng-content?

ng-template

<template>— это механизм для отложенного рендера клиентского контента, который не отображается во время загрузки, но может быть инициализирован при помощи JavaScript.
Template можно представить себе как фрагмент контента, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элементаtemplateво время загрузки страницы, он делает это только чтобы убедиться в валидности содержимого; само содержимое при этом не отображается.

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

// пример
<div class="lessons-list" *ngIf="lessons else loading">
  ... 
</div>

<ng-template #loading>
    <div>Loading...</div>
</ng-template>

ng-container

<ng-container>- это логический контейнер, который может использоваться для группировки узлов, но не отображается в дереве DOM как узел (node).

На самом деле структурные директивы (*ngIf, *ngFor, ..) являются синтаксическим сахаром для наших шаблонов. Чтобы избежать необходимости создавать дополнительный div, мы можем вместо этого использовать директиву ng-container:

<ng-container *ngIf="lessons">
    <div class="lesson" *ngFor="let lesson of lessons">
        <div class="lesson-detail">
            {{lesson | json}}
        </div>
    </div>
</ng-container>

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

ng-content

<ng-content>- позволяет внедрять родительским компонентам html-код в дочерние компоненты. ng-content решает задачу проецирования контента в ваши веб-компоненты. Веб-компоненты состоят из нескольких отдельных технологий, которые являются частью браузера и поэтому не нуждаются во внешних библиотеках (таких как jQuery или Dojo). Существующий Веб-компонент может быть использован без написания кода, просто путем импорта выражения на HTML-страницу. Веб-компоненты используют новые или разрабатываемые стандартные возможности браузера.

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