11 Homework (Dependency Injection)

[DrSmile444]

Відображення списку машин

Потрібно взяти готовий масив машин (далі по ішью) та створити на основі нього список.

Умови

Список повинен бути з таких полів:

Field	Value
Added from	{{ vehicle.post.protocol }}
Vehicle	{{ vehicle.manufacturer }} - {{ vehicle.model }} ({{ vehicle.fuel }})
Price	vehicle.cost.amount + vehicle.cost.currencyCode

Правила:

• отримання моку транспортів повинно бути виключно із сервісу, з поверненням Observable, який пендиться 2 сек.;
• потрібно додати лоадер, поки список завантажується;
• в компоненті не повинно бути ніяких трансформ методів, темплейт повинен бути простий без великих виразів ({{ vehicle.manufacturer }} - {{ vehicle.model }} ({{ vehicle.fuel }}) в темплейті не зрозуміло). Використовуйте пайпи;
• якщо протокол http, поле Added from повинно горіти червоним. Використовуйте директиву;
• Price потрібно відображати за рахунок вбудованого в Angular CurrencyPipe

Список машин

Список машин можна взяти із цього коміту.
Додатково потрібно встановити два модуля собі в проект:
npm i faker @types/faker

Завдання із зірочкою

Якщо поле Added from дорівняє https, весь ряд повинен бути клікабельним і переводити на сторінку
https://www.google.com/search?q={{ vehicle.vehicle }}, де {{ vehicle.vehicle }} - поле з обьекту.

Якщо поле дорівнює http, не дозволяти юзеру натиснути на нього.

URL потрібно правильно заенкодити. Енкодінг робити виключно наданими JS способами.
Простий приклад енкодінгу:

Status	Value
Правильно	https://www.google.com/search?q=Toyota+Prius
Не правильно	https://www.google.com/search?q=Toyota Prius

Корисне:

Гілка: 11-dependency-injection
Презентація
Відео до ютуба
Код з лекції