Маршрутизація в AngularJs з параметрами

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

Що таке односторінкові програми?

Односторінкові додатки, або SPA, – це веб-додатки, які завантажують одну HTML-сторінку, а потім динамічно оновлюють цю сторінку, коли користувач взаємодіє з нею. Замість того, щоб запитувати новий документ із сервера для кожного кліку, SPA замінює лише ту частину сторінки, яка змінилася.

Такий дизайн створює одну проблему. Якщо браузер ніколи не переходить до нового документа, адресний рядок ніколи не змінюється, тому користувач не може додати екран до закладок, поділитися ним або скористатися кнопкою «Назад». Маршрутизація вирішує саме цю проблему.

Що таке маршрутизація в AngularJS?

Маршрутизація в AngularJS – це метод, який дозволяє створювати односторінкові програми. Він дає змогу створювати різні URLдля різного контенту у ваших вебзастосунках. Маршрутизація AngularJS також допомагає відображати кілька видів контенту залежно від обраного маршруту. Це вказано в URL після знака #.

Розглянемо приклад сайту, розміщеного через URL http://example.com/index.html.

На цій сторінці розміщено головний екран вашої програми. Припустимо, що програма організовує подію, і користувач хоче переглянути список подій, переглянути одну з них детально або видалити одну. В односторінковій програмі з увімкненою маршрутизацією все це доступно за наведеними нижче посиланнями.

Символ # використовуватиметься разом із різними маршрутами (ShowEvent, DisplayEvent і DeleteEvent).

• Щоб переглянути всі події, користувачеві потрібно перейти до http://example.com/index.html#ShowEvent
• Щоб побачити одну конкретну подію, їх спрямовують до http://example.com/index.html#DisplayEvent
• Щоб видалити подію, їх перенаправляють до http://example.com/index.html#DeleteEvent

Зверніть увагу, що основний URL залишається незмінним. Змінюється лише фрагмент після #, і саме цей фрагмент спостерігає AngularJS. Після визначення концепції наступний розділ охоплює елементи, які потрібно з'єднати, перш ніж щось із цього запрацює.

Додавання маршруту AngularJS за допомогою $routeProvider

Як обговорювалося раніше, маршрути в AngularJS використовуються для перенаправлення користувача до іншого представлення вашої програми. Ця маршрутизація виконується на тій самій HTML-сторінці, тому користувач має відчуття, що він не покинув сторінку.

Для реалізації маршрутизації необхідно виконати у вашій програмі наступні основні кроки у певному порядку.

1. Посилання на angular-route.js. Це JavaScript файл, розроблений Google, містить усі функції маршрутизації та має бути включений, щоб програма могла посилатися на потреби модулів у маршрутизації.
2. Додайте залежність до модуля ngRoute з вашої програми. Без цієї залежності маршрутизацію взагалі не можна використовувати в програмі AngularJS.

Нижче наведено загальний синтаксис цього оператора. Це звичайне оголошення модуля з додаванням ключового слова ngRoute.

var module = angular.module("sampleApp", ['ngRoute']);

3. Налаштуйте ваш $routeProvider. Він надає різні маршрути у вашій програмі, а синтаксис просто вказує, що коли вибрано відповідний шлях, маршрут використовується для відображення заданого вигляду.

when(path, route)

4. Посилання на ваш маршрут із вашої сторінки HTML. На своїй HTML-сторінці ви додасте довідкові посилання на різні доступні маршрути у вашій програмі.

<a href="#!/route1">Route 1</a><br/>

5. Нарешті було б включення директива ng-view, який зазвичай міститься в тезі div. Це буде використано для введення вмісту перегляду, коли вибрано відповідний маршрут.

💡 Порада: Усі п'ять кроків обов'язкові. Відсутнє посилання на angular-route.js є найпоширенішою причиною, чому маршрут мовчки нічого не робить, оскільки $routeProvider не існує без нього. У наступному розділі всі п'ять кроків об'єднані в робочому прикладі.

Приклад маршрутизації AngularJS

Тепер давайте розглянемо приклад маршрутизації за допомогою згаданих вище кроків.

У нашому прикладі маршрутизації AngularJS із параметрами,

• Одне посилання призначене для відображення тем для AngularJS звичайно, а інший для Node.js Звичайно.
• Коли користувач натискає будь-яке посилання, відображаються теми цього курсу.

Крок 1) Включіть файл angular-route як посилання на сценарій.

Цей файл маршруту необхідний для використання функціональності кількох маршрутів та представлень. Цей файл можна завантажити з вебсайту AngularJS.

Крок 2) Додайте теги href, які представлятимуть посилання на «Теми Angular JS» і «Теми Node JS».

Крок 3) Додайте тег div із директивою ng-view, яка представлятиме представлення.

Це дозволить вводити відповідне представлення щоразу, коли користувач натискає «Теми Angular JS» або «Теми Node JS».

Крок 4) У свій тег сценарію для AngularJS додайте «ngRoute module» і службу «$routeProvider».

Code Пояснення:

1. Включіть модуль «ngRoute». З його допомогою Angular автоматично обробляє маршрутизацію та розуміє всі команди маршрутизації.
2. $routeProvider — це сервіс, який у фоновому режимі прослуховує викликані маршрути. Коли користувач натискає на посилання, він виявляє це та вирішує, який маршрут обрати.
3. Створіть один маршрут для посилання Angular: при натисканні на нього вставте Angular.html та використовуйте 'AngularController' для бізнес-логіки.
4. Створіть один маршрут для посилання Node, який впроваджує Node.html та використовує 'NodeController' таким самим чином.

Крок 5) Далі слід додати контролери для обробки бізнес-логіки як для AngularController, так і для NodeController.

У кожному контролері ми створюємо масив пар ключ-значення для зберігання назв тем та описів кожного курсу. Змінна масиву 'tutorial' додається до об'єкта області видимості для кожного контролера.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>

<div class="container">
<ul>
<li><a href="#!/Angular">Angular JS Topics</a></li>
<li><a href="#!/Node">Node JS Topics</a></li>
</ul>
<div ng-view></div>
</div>

<script>
var sampleApp = angular.module('sampleApp', ['ngRoute']);

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  }).
  when('/Node', {
    templateUrl: 'Node.html',
    controller: 'NodeController'
  });
}]);

sampleApp.controller('AngularController', function($scope) {
  $scope.tutorial = [
    {Name: "Controllers", Description: "Controllers in action"},
    {Name: "Models", Description: "Models and binding data"},
    {Name: "Directives", Description: "Flexibility of Directives"}
  ];
});

// NodeController follows the same shape with Node.js topics
sampleApp.controller('NodeController', function($scope) {
  $scope.tutorial = [{Name: "Promises", Description: "Power of Promises"}];
});
</script>
</body>
</html>

⚠️ Застосовано виправлення. Команда <title> тег сидів всередині <body>, chrset="UTF 8" було з помилкою, друге посилання вказувало на #Node.html замість зареєстрованого маршруту /Node, а шляхи до шаблонів мали початкову скісну риску, яка починалася з кореня домену.

Крок 6) Створіть сторінки під назвою Angular.html і Node.html. Для кожної сторінки ми виконуємо наведені нижче дії.

Ці кроки забезпечать відображення всіх пар ключ-значення масиву на кожній сторінці.

1. Використання директива ng-repeat щоб переглянути кожну пару ключ-значення, визначену в змінній навчального посібника.
2. Відображення назви та опису кожної пари ключ-значення.

• Angular.html

<h2>Angular</h2>
<ul ng-repeat="ptutor in tutorial">
<li>Course : {{ptutor.Name}} - {{ptutor.Description}}</li>
</ul>

• Node.html — ідентичний попередньому списку, із зміненим заголовком на «Вузол». Обидва шаблони мають однаковий вигляд tutorial змінна, яку кожен контролер надає зі своєї власної області видимості.

⚠️ виправлення: Заголовок в оригінальному Angular.html звучав як «Anguler». Орфографію виправлено вище.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний вивід.

вихід:

Якщо ви натиснете на посилання AngularJS Topics, буде відображено наведений нижче результат.

Результат чітко показує, що

• Коли натискається посилання «Теми Angular JS», routeProvider, який ми оголосили в нашому коді, вирішує, що потрібно вставити код Angular.html.
• Цей код буде вставлено в тег div, який містить директиву ng-view. Крім того, вміст для опису курсу походить від «навчальної змінної», яка була частиною об’єкта області, визначеного в AngularController.
• Коли один натискає на Node.js Теми, матиме місце той самий результат, і з’явиться представлення для тем Node.js.
• Також зверніть увагу, що сторінка URL залишається незмінним. Змінюється лише маршрут після тегу #, і це концепція односторінкових застосунків. Тег #хештег у URL є роздільником між маршрутом (у нашому випадку це «Angular») та головною HTML-сторінкою (Sample.html).

Приклад працює лише тоді, коли користувач натискає на посилання, яке відповідає зареєстрованому маршруту. У наступному розділі описано, що має відбуватися, коли нічого не відповідає.

Створення маршруту за замовчуванням в AngularJS

Маршрутизація в AngularJS також надає можливість мати маршрут за замовчуванням. Це маршрут, який вибирається, якщо немає відповідності існуючому маршруту.

Маршрут за замовчуванням створюється шляхом додавання наступної умови під час визначення служби $routeProvider.

Наведений нижче синтаксис просто означає перенаправлення на іншу сторінку, якщо будь-який з існуючих маршрутів не збігається.

otherwise({
  redirectTo: 'page'
});

Давайте використаємо той самий приклад вище та додамо маршрут за замовчуванням до нашої служби $routeProvider.

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  }).
  when('/Node', {
    templateUrl: 'Node.html',
    controller: 'NodeController'
  }).
  otherwise({
    redirectTo: '/Angular'
  });
}]);

Code Пояснення:

1. Тут ми використовуємо той самий код, що й вище, з тією лише різницею, що ми використовуємо оператор otherwise та опцію «redirectTo», щоб вказати, яке представлення слід завантажити, якщо маршрут не вказано. У нашому випадку ми хочемо, щоб відображалося представлення '/Angular'.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний вивід.

вихід:

З виходу,

• Ви можете чітко бачити, що показано вигляд за замовчуванням – це вигляд AngularJS.
• Це пояснюється тим, що коли сторінка завантажується, вона переходить до параметра «інакше» у функції $routeProvider і завантажує перегляд «/Angular».

Маршрут за замовчуванням визначає, яке представлення завантажується. У наступному розділі розглядається, як один маршрут може обслуговувати багато записів, передаючи значення в URL.

Як отримати доступ до параметрів з маршруту AngularJS

Angular також надає функціональність для передачі параметрів під час маршрутизації. Параметри додаються в кінець маршруту в URLНаприклад, http://guru99/index.html#/Angular/1. У цьому прикладі маршрутизації Angular,

1. http://guru99/index.html є нашим основним застосуванням URL
2. Символ # є роздільником між основною програмою URL і маршрут
3. Angular - наш маршрут
4. І, нарешті, «1» — це параметр, який додається до нашого маршруту

Загальний синтаксис такий HTMLPage#/маршрут/параметр, тому попередні теми стають Sample.html#/Angular/1, #/Angular/2 та #/Angular/3, де цифра — це ідентифікатор теми.

Давайте детально розглянемо, як можна реалізувати маршрут Angular з параметром.

Крок 1) Додайте наступний код до свого представлення

1. Додайте таблицю, щоб показати користувачеві всі теми курсу Angular JS.
2. Додайте рядок таблиці для відображення теми «Контролери». Для цього рядка встановіть href на «#!/Angular/1», щоб клік на тему передавав параметр 1 у URL разом із маршрутом.
3. Додайте рядок для теми «Моделі» з параметром href, встановленим на «#!/Angular/2», щоб параметр 2 переміщувався в URL.
4. Додайте рядок для теми «Директиви» з параметром href, встановленим на «#!/Angular/3», щоб параметр 3 передавався в URL.

Крок 2) Додайте ідентифікатор теми до функції сервісу routeProvider
У службовій функції routeProvider додайте :topicId заповнювач для позначення будь-якого параметра, переданого в URL після того, як маршрут слід призначити змінній topicId.

Крок 3) Додайте необхідний код до контролера

1. Обов’язково спочатку додайте параметр «$routeParams» під час визначення функції контролера. Цей параметр матиме доступ до всіх параметрів маршруту, що передаються в URL.
2. «$routeParams» містить topicId, переданий у маршруті. $routeParams.topicId до сфери застосування як $scope.tutorialid робить його доступним для перегляду як tutorialid.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>

<h1> Guru99 Global Event</h1>
<table class="table table-striped">
<tbody>
<tr><td>1</td><td>Controllers</td>
<td><a href="#!/Angular/1">Topic details</a></td></tr>
<!-- rows 2 and 3 repeat with /Angular/2 and /Angular/3 -->
</tbody>
</table>
<div ng-view></div>

<script>
var sampleApp = angular.module('sampleApp', ['ngRoute']);

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams',
function($scope, $routeParams) {
  $scope.tutorialid = $routeParams.topicId;
}]);
</script>
</body>
</html>

⚠️ Застосовано виправлення. В оригіналі використовувалася літера l замість цифри 1 in href="#Angular/l", пропустив ng-view контейнер, щоб шаблону не було куди рендеритися, і завантажився angular-route.js перед тим angular.min.js, що видає помилку модуля.

Крок 4) Додайте вираз для відображення змінної
Додайте вираз для відображення змінної tutorialid на сторінці Angular.html.

<h2>Angular</h2>

<br><br>{{tutorialid}}

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний вивід.

вихід:

На вихідному екрані

• Якщо ви натиснете посилання «Деталі теми» для першої теми, до неї буде додано число 1. URL.
• Це число береться як аргумент «routeParams» і стає доступним у контролері.

Зчитування параметра є простим. Отримання запису, який визначає параметр, до появи представлення, є завданням властивості, яка розглядається далі.

Як попередньо завантажити дані за допомогою властивості resolve

Контролер у попередньому розділі зчитує ідентифікатор теми та одразу відображає його. Реальні програми спочатку повинні отримати запис із сервера, і якщо представлення відобразиться до того, як цей запит повернеться, користувач побачить порожній шаблон, який заповниться через мить. resolve властивість видаляє цей спалах порожнього вмісту.

Кожен ключ усередині resolve Об'єкт — це залежність, яку AngularJS готує перед активацією маршруту. Якщо значенням є обіцянка (promise), маршрутизатор чекає на її завершення. Тільки після того, як кожна обіцянка буде вирішена, AngularJS створює екземпляр контролера та відтворює шаблон, а вирішені значення вводяться в контролер за назвою, як і будь-який інший сервіс.

sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController',
    resolve: {
      // The router waits for this promise before rendering
      topic: ['$http', '$route', function($http, $route) {
        var id = $route.current.params.topicId;
        return $http.get('/api/topics/' + id).then(function(response) {
          return response.data;
        });
      }]
    }
  });
}]);

// 'topic' is injected already resolved, so no loading state is needed
sampleApp.controller('AngularController', ['$scope', 'topic',
function($scope, topic) {
  $scope.topic = topic;
}]);

Тут важливі дві поведінки. Відхилена обіцянка скасовує зміну маршруту та залишає браузер у поточному поданні, тому невдалий запит ніколи не створює пошкоджену сторінку. Однак, оскільки маршрутизатор блокується, поки обіцянка очікує виконання, повільна кінцева точка створює враження завислої програми. resolve з індикатором прогресу, що керується $routeChangeStart та $routeChangeSuccess події

⚠️ Увага! Ніколи не розміщуйте перевірки автентифікації лише всередині resolveВідхилення маршруту приховує представлення, але не захищає дані, що знаходяться за ним, і кінцева точка API все одно повинна забезпечити доступ на сервері.

Окрім попереднього завантаження даних, маршрут також може містити статичні значення конфігурації. Далі описано, як контролер їх зчитує.

Як використовувати службу Angular $route

Сервіс $route дозволяє отримати доступ до властивостей маршруту. Сервіс $route доступний як параметр, коли функція визначена в контролері. Загальний синтаксис того, як параметр $route стає доступним з контролера, показано нижче.

myApp.controller('MyController', function($scope, $route) { ... });

1. myApp — це модуль AngularJS, визначений для вашої програми.
2. MyController – це ім'я контролера, визначеного для вашої програми.
3. Так само, як $scope передає інформацію від контролера до представлення, $route надає доступ до властивостей поточного маршруту.

Давайте розглянемо, як ми можемо використовувати сервіс $route.

У цьому прикладі

• Ми збираємося створити просту користувальницьку змінну під назвою «mytext», яка міститиме рядок «This is angular».
• Ми збираємося приєднати цю змінну до нашого маршруту. Later Ми збираємося отримати доступ до цього рядка з нашого контролера за допомогою сервісу $route, а потім використаємо об'єкт scope для його відображення у нашому поданні.

Отже, давайте подивимося, які кроки нам потрібно виконати, щоб досягти цього.

Крок 1) Додайте спеціальну пару ключ-значення до маршруту. Тут ми додаємо ключ під назвою «mytext» і призначаємо йому значення «This is angular».

Крок 2) Додайте відповідний код до контролера.

1. Додайте параметр $route до функції контролера. Параметр $route – це ключовий параметр, визначений в Angular, який дозволяє отримати доступ до властивостей маршруту.
2. Доступ до змінної «mytext», визначеної в маршруті, можна отримати через посилання $route.current. Потім це призначається змінній 'text' об'єкта scope. Відповідно до текстової змінної можна отримати доступ із подання.

// Only the config and controller change; the page markup is unchanged
sampleApp.config(['$routeProvider',
function($routeProvider) {
  $routeProvider.
  when('/Angular/:topicId', {
    mytext: "This is angular",   // custom key attached to the route
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);

sampleApp.controller('AngularController', ['$scope', '$routeParams', '$route',
function($scope, $routeParams, $route) {
  $scope.tutorialid = $routeParams.topicId;
  $scope.text = $route.current.mytext;
}]);

Крок 3) Додайте посилання на текстову змінну з об’єкта області як вираз. Це буде додано до нашої сторінки Angular.html, як показано нижче.

Це призведе до того, що текст «This is angular» буде введено у вид. Вираз {{tutorialid}} такий самий, як і в попередній темі, і тут буде показано число «1».

<h2>Angular</h2>

<br><br>{{text}}
<br><br>{{tutorialid}}

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний вивід.

вихід:

З виходу,

• Ми бачимо, що текст «This is angular» також відображається, коли ми натискаємо будь-яке з посилань у таблиці. Ідентифікатор теми також відображається одночасно з текстом.

Кожен URL показано досі, все ще містить символ #. Останній крок налаштування його видаляє.

Увімкнення маршрутизації HTML5

Маршрутизація HTML5 використовується для створення чистого URLс. Це означає видалення хештегу з URLОтже, маршрутизація URLs, коли використовується маршрутизація HTML5, виглядатиме так, як показано нижче.

Зразок.html/Angular/1

Зразок.html/Angular/2

Зразок.html/Angular/3

Ця концепція зазвичай відома як представлення досить URL користувачеві.

Є 2 основні кроки, які необхідно виконати для маршрутизації HTML5.

1. Налаштування $locationProvider
2. Встановлення нашої бази для відносних посилань

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

Крок 1) Додайте відповідний код до модуля Angular.

1. Додавати <base> тег до заголовка документа. Це потрібно для маршрутизації HTML5, щоб програма знала, яке її базове розташування.
2. Додайте сервіс $locationProvider. Цей сервіс дозволяє визначити html5Mode.
3. Установіть для html5Mode служби $locationProvider значення true.

Крок 2) Видаліть усі теги # для посилань ('Angular/1', 'Angular/2', 'Angular/3'), щоб створити зручний для читання URLs.

<!-- In the head: required by html5Mode so relative templates resolve -->
<base href="/">

<!-- In the body: the # is dropped from every link -->
<a href="Angular/1">Topic details</a>

<script>
sampleApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.
  when('/Angular/:topicId', {
    templateUrl: 'Angular.html',
    controller: 'AngularController'
  });
}]);
</script>

⚠️ виправлення: оригінал оголосив baseUrl константа, що вказує на локальний шлях IDE, що не впливає на html5Mode. AngularJS зчитує базове розташування з <base href> тег. Оригінал також введено $locationProvider жодного разу не зателефонувавши html5Mode(true), тому хеш так і не було видалено.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний вивід.

вихід:

З виходу,

• Ви можете побачити, що тег # відсутній під час доступу до програми.

Все вищезазначене використовує ngRoute, маршрутизатор, розроблений командою AngularJS. Це не єдиний варіант, і порівняння нижче пояснює, коли альтернатива є кращою.

ngRoute проти ui-router: який маршрутизатор вибрати

ngRoute підтримується командою AngularJS та відповідає URL безпосередньо до одного шаблону та контролера. ui-router — це спільнотний проект, створений для усунення головного обмеження ngRoute: він відповідає застосунку були а не на URL окремо, що дозволяє одному екрану містити кілька незалежно маршрутизованих областей.

Виберіть ngRoute, коли кожен URL відображається на одне повносторінкове представлення, оскільки не потребує додаткових залежностей, а весь API поміщається на одній сторінці. Виберіть ui-router, коли екран має панелі, які переміщуються незалежно, або коли дочірні представлення повинні повторно використовувати дані, завантажені батьківським. Міграція пізніше можлива, але не тривіальна, оскільки назви станів замінюють URL візерунки по всіх шаблонах.

Поширені помилки маршрутизації в AngularJS та як їх виправити

Більшість збоїв маршрутизації призводять до порожнього ng-view, а не до помилки консолі, що ускладнює їх діагностику, ніж це мало б бути. Кожен симптом, наведений нижче, називає свою причину та спосіб виправлення.

• Невідомий постачальник: $routeProvider: angular-route.js ніколи не завантажувався або завантажувався раніше за angular.min.js. Спочатку зверніться до основної бібліотеки.
• Вид залишається порожнім без помилок: жоден елемент не містить директиви ng-view, тому шаблону нікуди відображати.
• Нічого не завантажується під час першого відвідування: Жоден маршрут не відповідає порожньому шляху. Додайте блок otherwise зі значенням redirectTo.
• $routeParams порожній: У шаблоні відсутній заповнювач у вигляді двокрапки. Він має виглядати як '/Angular/:topicId'.
• Шаблони 404 після html5Mode: налаштуйте сервер на перезапис незбіганих шляхів до базової сторінки та перевірте наявність базового тегу href.
• Контролер ніколи не перезапускається: змінився лише параметр, тому AngularJS повторно використав екземпляр контролера, а не перебудував його. Прослухайте подію $routeUpdate замість того, щоб покладатися на повторне спрацювання функції контролера.

Поширені запитання