Пользуйтесь Google Search Console (GSC)

Проверяйте индексацию страниц сайта в GSC с помощью инструмента “Проверка URL-адреса”:

Даже если Вы используете Prerender может быть такое, что некоторых страниц нет в индексе или Google опускает некоторые функции. Используя данный инструмент Вы поймете что нужно сделать, чтобы улучшить ранжирование. 

4. Правильно настройте отслеживание аналитики

Google Analytics (GA) иногда плохо отслеживает просмотры страниц SPA-сайтов. Поэтому рекомендуем настроить отслеживание аналитики с помощью плагина Angulartics. 

5. Регулярно сканируйте сайт SEO-краулерами 

Сделав все выше описанное проверьте сайт на наличие ошибок, которые не увидели GA и GSC. Для этого можно использовать такие краулеры: ScreamingFrog, NetpeakSpider, JetOctopus или др.

Заключение

Описанная методика доказывает, что SPA-сайты можно раскручивать, хоть это и не просто. 

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

Теперь Вы можете создавать удобные для пользователей приложения и не волноваться как их воспримет Googl

Билет 25

По каким критерием производится разделение шаблона на компоненты? Как правильно реализовать структуру приложения на Angular?

Разберем, что представляет собой архитектура Angular приложения.

Сам фреймворк состоит из нескольких библиотек (или модулей), каждая из которых содержит в себе определенный функционал, а каждый модуль состоит из совокупности классов и их свойств и методов.

Каждый класс имеет свое функциональное предназначение.

Не все библиотеки обязательны для использования в приложении (англ. AngularApp), часть подключается по мере необходимости, например, FormsModule или HttpModule.

Модуль

Разберем модули, именно с них начинается проектирование архитектуры Angular приложения. Каждый из них имеет собственный набор структурных элементов:

· component - отвечает за часть web-страницы и включает в себя HTML-шаблон, CSS-стили и логику поведения;

· service - поставщик данных для component;

· directive - преобразует определенную часть DOM заданным образом.

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

Корневой модуль может быть только один, но он может использовать функционал других модулей, объявленных в объекте декоратора @NgModule() в свойстве imports.

@NgModule() - это декоратор, который принимает описывающий модуль объект.

Перечень свойств объекта:

· declarations - компоненты (Component), директивы (Directive) и фильтры (Pipe) корневого модуля;

· exports - компоненты, сервисы, директивы и фильтры, доступные для использования разработчикам, которые будут использовать ваш модуль в своих разработках;

· imports - другие модули, используемые в корневом модуле;

· providers - сервисы (Service) приложения;

· bootstrap - имя главного компонента приложения (как правило, называется AppComponent).

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

Компонент

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

Ранее уже упоминалось, что за создание компонента отвечает декоратор @Component(). Основные свойства объекта, который принимает декоратор:

· selector - название компонента;

· template (или templateUrl) - HTML-разметка в виде строки (или путь к HTML-файлу);

· providers - список сервисов, поставляющих данные для компонента;

· styles - массив путей к CSS-файлам, содержащим стили для создаваемого компонента.

Все компоненты в совокупности и есть AngularApp.

Сервис

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

Задача сервиса должна быть узкой и строго определенной.

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

Директива

Предназначение директив - преобразование DOM заданным образом, наделение элемента поведением.

По своей реализации директивы практически идентичны компонентам, компонент - это директива с HTML-шаблоном, но с концептуальной точки зрения они различны.

Есть два вида директив:

· структурные - добавляют, удаляют или заменяют элементы в DOM;

· атрибуты - задают элементу другое поведение.

Они создаются с помощью декоратора @Directive() с конфигурационным объектом.

В Angular имеется множество встроенных директив (*ngFor, *ngIf), но зачастую их недостаточно для больших приложений, поэтому приходится реализовывать свои.

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

Билет 26

Что такое LocalStorage? Зачем и как вы использовали данную технологию в своих работах?

Чтобы понять, что такое localStorage, просто представьте, что где-то у вас в браузере встроен такой объект, которым мы можем пользоваться. При этом данный объект не очищает значения, которые мы туда запишем, если мы перезагрузим страницу или даже совсем закроем браузер.

Если говорить языком JavaScript, то localStorage это свойство глобального объекта браузера (window). К нему можно обращаться как window.localStorage или просто localStorage.

Зачем мне нужен localStorage?

LocalStorage нужен только для одного — хранить определенные данные между сессиями пользователя. Можно придумать тысячу и одну вещь, которую можно хранить в локальном хранилище браузера. Например, браузерные игры, которые используют его как сохраненку, или записать момент, на котором пользователь остановился при просмотре видео, различные данные для форм и т.д

Работа с localStorage очень напоминает работу с объектами в JavaScript. Существует несколько методов для работы с ним.

localStorage.setItem('ключ', 'значение')

Метод который добавляет в localStorage новый ключ со значением (а если такой ключ уже существует, то перезаписывает новым значением). Пишем, например, localStorage.setItem(‘myKey’, ‘myValue’);

localStorage.getItem('ключ')

Берем определенное значение из хранилища по ключу.

localStorage.removeItem("Ключ")

Удаляем ключ

localStorage.clear()

Очищаем все хранилище

Сейчас вы можете открыть вкладку с localStorage вашего браузера и самостоятельно потренироваться записывать и извлекать данные из этого хранилища. Если что – весь код пишем в js-файл.

Билет 27

Что такое qwery параметры и просто параметры? В чем их отличие? Как используются?

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

let myAdd: (baseValue: number, increment: number) => number = function(x: number, y: number): number {

returnx + y

}

Если типы параметров совпадают, то тип считается подходящим для функции, и не важно, какие имена были даны параметрам в описании типа функции.

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

Query-параметры

ids * Идентификаторы счетчиков, через запятую. Используется вместо параметра id.

metrics * Список метрик, разделенных запятой. Лимит: 20 метрик в запросе.

application_id

* Фильтрация выборки по числовому идентификатору

Query-параметры приложения в AppMetrica.

date_since * Начало интервала дат в формате yyyy-mm-ddhh:mm:ss. Также с помощью query-параметра date_dimension можно определить, относительно какого события считать дату.

date_until * Конец интервала дат в формате yyyy-mm-ddhh:mm:ss. Также с помощью query-параметра date_dimension можно определить, относительно какого события считать дату.

fields * Разделенный запятой список полей для выборки. Список, который содержит все доступные поля (для быстрого копирования):

Билет 28

Какие общие и специальные типы данных в TypeScript вы знаете? Опишите каждый из них. К каким сущностям они применяются?

Базовые типы

Boolean: логическое значение true или false

let isEnabled = true;

let isAlive: boolean = false;

console.log(isEnabled);

console.log(isAlive);

Number: числовое значение

let decimal: number = 6;

let hex: number = 0xf00d;

let binary: number = 0b1010;

let octal: number = 0o744;

String: строки

let firstName: string = "Tom";

let lastName = 'Johns';

Array: для задания массиву типа данных используется двоеточие после имени массива, затем прописывается тип данных и квадратные скобки. Во втором варианте после названия массива прописывается Array – определяет, что это именно массив и тип данных

Tuple: для создания массива с различными типами данных элементов

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

Специальные типы

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

enumSeason { Winter, Spring, Summer, Autumn };

Перечисление называется Season и имеет четыре элемента. Теперь используем перечисление:

enum Season { Winter, Spring, Summer, Autumn }; let current: Season = Season.Summer; console.log(current); current = Season.Autumn; // изменение значения

Здесь создается переменная current, которая имеет тип Season. При этом консоль выведет нам число 2. Так как все элементы перечисления представляют числовые значения. По умолчанию следующие:

enum Season { Winter=0, Spring=1, Summer=2, Autumn=3 };

Хотя мы можем переопределить эти значения:

enum Season { Winter=5, Spring, Summer, Autumn }; // 5, 6, 7, 8 enum Season { Winter=4, Spring=8, Summer=16, Autumn=32 }; // 4, 8, 16, 32

Также мы можем получить непосредственно текстовое значение:

enum Season { Winter=0, Spring=1, Summer=2, Autumn=3 }; var current: string = Season[2]; // 2 числовое знач Summer console.log(current); // Summer

Any: описывает данные, тип которых может быть неизвестен на момент написания приложения. Например, создав переменную типа any и присвоив ей числовое значение, можно её переопределить на строковое значение. Создаём переменную groups со значением 4 и типом any после переопределяем её и присваиваем значение 4 в строковом формате. Компилятор не выдаст ошибку:

Null и undefined: в TypeScriptnull и undefined являются субтипами. Субтипы – это типы, которые могут быть присвоены любому другому типу, например, string или number.

Можно назначить null и undefined самостоятельными типами. В этом случае можно присвоить null или undefined переменной с типом string, если явно не указать, что эта переменная может принимать оба этих типа, используя ранее рассмотренную конструкцию объединения – Union.

Never: указывает на то, что функция ни при каких обстоятельствах не может ничего вернуть из себя, например, она всегда бросает ошибку или включает в себя бесконечный цикл, который не может ничего вернуть из функции. Отличие never от void. Функция, которая ничего не возвращает – это void, но она может вернуть undefined. Функция, которая никогда ничего не возвращает – это never.

Создадим функцию, которая возвращает ошибку:

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

Билет 29

Что такое функция? Способы задания функции? Что такое стрелочная функция? Задание типов данных при работе с функцией.

Функция — фрагмент программного кода (подпрограмма), к которому можно обратиться из другого места программы. В большинстве случаев с функцией связывается идентификатор.

Способы задания функции:

1. funсtion имя_функции(перечень_парамeтров) {

кодовый блок;

}

2. (параметры) => тело функции.

(argument1, argument2, ... argumentN) => {

// тело функции

}

Стрелочные функции — анонимные функции с особым синтаксисом, которые принимают фиксированное число аргументов и работают в контексте включающей их области видимости, то есть — в контексте функции или другого кода, в котором они объявлены.

Билет 30

Что такое Директива NgForm? Опишите способ работы с данной директивой.

Как правило, при работе с формами все элементы ввода не определяются сами по себе, а помещаются в стандартный элемент формы - <form></form>. Применение данного элемента позволяет управлять всеми элемента ввода в целом как одной общей формой.

Непосредственно в Angular для работы с формой определена специальная директива NgForm. Она создает объект FormGroup и привязывает его к форме, что позволяет отслеживать состояние формы, управлять ее валидацией.

Мы можем применить данную директиву, определив переменную в теге формы:

<form #myForm="ngForm"></form>

Хотя при использовании формы подобные переменные, которые представляет всю форму, применять необязательно, но, используя их, мы можем получить некоторые дополнительные возможности. В частности, через переменную получить статус формы.

Директива NgForm инкапсулирует все элементы формы, к которым применяется директива ngModel, и позволяет получить доступ к состоянию этих элементов, в том числе проверить введенные данные на корректность.

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

Во-вторых, используя состояние формы, мы можем отключить кнопку и соответственно предотвратить некоторые действия по нажатию на нее:

<button [disabled]="myForm.invalid"></button>

И также в методе submit(), который вызывается при нажатии на кнопку, можно получить всю форму и ее значения:

onSubmit(myForm: NgForm){

console.log(myForm);

}