Зміст
- 01. Запустіть перевірку версії
- 02. Встановіть Angular
- 03. Створіть скелет проекту
- 04. Диференціальне навантаження джгута
- 05. ... і подивіться результати
- 06. Породжуйте веб-працівника
- 07. Дослідіть код
- 08. Встановити риштування
- 09. Не турбуйтеся про відсутність конструктора
- 10. Виконайте невеликий запуск компіляції
- 11. ... і знайдіть результат
- 12. Приступайте до роботи
- 13. Дослідіть Плющ
- 14. Спробуйте модифіковану обробку нг
- 15. Насолоджуйтесь покращеною міграцією
- 16. Дослідіть управління робочим простором
- 17. Прискорити процес
- 18. Уникайте ходячих мерців
- 19. Подивіться на журнал змін
Angular 8 - це остання версія Google Angular - одного з найкращих фреймворків JavaScript. У цій статті ми розглянемо особливості Angular 8 та покажемо, як розпочати. Спочатку короткий огляд того, що сталося з фреймворком на даний момент.
Введення Angular призвело до зміни парадигми веб-розробки: в той час як більшість бібліотек обмежувались підтримкою розробників з відносно обмеженим архітектурним впливом, команда розробників Angular пішла в іншому напрямку. Їх продукт змушує вас використовувати конкретну архітектуру, з відхиленнями від важких до комерційно безглуздих. Насправді, більшість Angular-кодів проходить через відносно складний ланцюжок інструментів для трансляції, перш ніж потрапляти в браузер.
Завдяки величезному успіху Angular, як усередині Google Inc, так і за його межами, розвиток, загалом, стабілізувався. Це означає, що незначних змін коду є мало, тоді як піврічні оновлення зосереджені на адаптації системи до змін у веб-перегляді веб-сторінок.
Наприклад, у випадку з Angular 8 розгортається новий компілятор JavaScript (хоча все ще експериментально). Він оптимізує згенерований код сумісності, щоб бути значно меншим і швидшим за рахунок старих браузерів. Крім того, підтримка Web Worker інтегрована для збільшення можливостей обробки Angular. Коротше кажучи, є на що подивитися - тож давайте зануримось прямо.
Якщо ви віддаєте перевагу розробці сайту без коду, спробуйте одного з цих простих конструкторів веб-сайтів. А щоб зробити все ще плавніше, правильно налаштуйте веб-хостинг.
01. Запустіть перевірку версії
Набір інструментів Angular живе всередині середовища NodeJS. На момент написання статті потрібен Node.js 10.9 або вище - якщо ви опинитеся у старішій версії, відвідайте веб-сайт Node.js та отримайте оновлення. У наведеному нижче коді показано стан версії на цій машині.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Встановіть Angular
Набір інструментів Angular знаходиться в утиліті командного рядка з назвою нг. Його можна встановити через відомий NPM.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng версія
Будьте обережні, відповідаючи на питання, зображене на зображенні нижче.
Вивести інформацію про версію з інструменту досить складно - не тільки синтаксис унікальний, але і результат є багатослівним (див. Зображення нижче).
03. Створіть скелет проекту
нг генерує для нас Кутові риштування. На наступних кроках ми хочемо додати маршрутизацію та використовувати Sass для трансляції CSS. Якщо розгортання з якихось причин не вдається, очистіть робочий каталог і перезапустіть нг з правами суперкористувача.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng new workertest
04. Диференціальне навантаження джгута
Нова версія Angular оптимізує зворотний код сумісності для зменшення впливу - файл із назвою список браузерів дозволяє вирішити, які браузери підтримуватимуться. відчинено список браузерів і видалити слово ні перед IE 9 до IE11.
. . . > 0,5% останніх 2 версій Firefox ESR не помер IE 9-11 # Для підтримки IE 9-11 видаліть 'not'.
05. ... і подивіться результати
Замовте компіляцію проекту, перейдіть у папку розподілу та видаліть непотрібні файли карт.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Викликати дерево, щоб побачити результати - нг створює кілька версій різних файлів коду (див. зображення нижче).
06. Породжуйте веб-працівника
Веб-працівники дозволяють JavaScript увійти в останню межу власних додатків: масово паралельна обробка завдань. За допомогою Angular 8 веб-співробітник може бути створений прямо з комфорту нг утиліта командного рядка.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng згенерувати веб-працівника myworker СТВОРИТИ tsconfig.worker.json (212 байт) СТВОРИТИ src / app / myworker.worker.ts (157 байт) ОНОВИТИ tsconfig.app.json (236 байт) ) ОНОВИТИ angular.json (3640 байт)
07. Дослідіть код
нгПродукція, на перший погляд, може виглядати лякаючою. Відкриття файлу src / app / myworker.worker.ts у вибраному редакторі коду виявляється код, який ви повинні добре знати з WebWorker специфікація. В принципі, працівник отримує повідомлення та обробляє їх за потреби.
/// посилання lib = "webworker" /> addEventListener ('message', ({data}) => {const response = `відповідь працівника на $ {data}`; postMessage (response);});
08. Встановити риштування
Кутові додатки складаються з компонентів. Звільнення нашого веб-працівника найкраще робити всередині AppComponent, який розширено, включаючи слухача для OnInit подія. Наразі він видаватиме лише інформацію про статус.
імпортувати {Component, OnInit} із ‘@ angular / core’; @Component ({..}}) Клас експорту AppComponent реалізує OnInit {title = ‘workertest’; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Не турбуйтеся про відсутність конструктора
Досвідчені розробники TypeScript задаються питанням, чому наш код не використовує конструктор, передбачений мовою програмування. Причиною цього є те ngOnInit - це подія життєвого циклу, яка запускається щоразу, коли відбувається подія ініціалізації - це не потрібно корелювати із викликом класу.
10. Виконайте невеликий запуск компіляції
На даний момент програма готова до запуску. Ми виконаємо його з сервера всередині нг, який можна викликати за допомогою команди serve. Акуратним аспектом цього підходу є те, що програма виявляє зміни та перекомпілює проект на льоту.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Погляньте на малюнок, щоб побачити це в дії на зображенні нижче.
11. ... і знайдіть результат
нг подавати putput вводить адресу свого локального веб-сервера, що зазвичай є http: // localhost: 4200 /. Відкрийте веб-сторінку та відкрийте інструменти розробника, щоб побачити вихідні дані стану. Майте на увазі, що console.log виводить дані на консоль браузера і залишає консоль екземпляра NodeJS недоторканою.
12. Приступайте до роботи
На даний момент ми створюємо екземпляр працівника та надаємо йому повідомлення. Потім його результати відображаються на консолі браузера.
if (typeof Worker! == ’undefined’) {// Створити новий const worker = new Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’сторінка отримала повідомлення: $ {data }’); }; worker.postMessage (‘привіт’); } else {console.log ("Відсутність підтримки працівників"); }
13. Дослідіть Плющ
У майбутніх версіях Angular буде використовуватися вдосконалений компілятор, що призведе до ще менших переглядів. Поки продукт ще не закінчений, скелет із підтримкою плюща можна породити ng new ivy-project - enable-ivy. Або змініть налаштування компілятора, як показано у фрагменті.
"angularCompilerOptions": {"enableIvy": true}
Слово попередження: Плющ призводить до дивовижного зменшення розміру, але це не безкоштовно. Продукт ще не стабілізувався, тому використовувати його в продуктивних умовах не рекомендується.
14. Спробуйте модифіковану обробку нг
Angular’s нг Інструмент командного рядка певний час використовував дочірні скрипти внутрішньо. Кутовий 8 збільшує попередню, оскільки тепер ви можете також використовувати цей засіб для запуску власних завдань, коли ваша програма збирається та компілюється.
"architect": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Одне акуратне застосування нг сценарії передбачає безпосереднє завантаження додатків до хмарних служб. Репозиторій Git надає корисний скрипт, який завантажує вашу роботу в обліковий запис Firebase.
15. Насолоджуйтесь покращеною міграцією
Розробники, які переходять від Angular 1.x, також відомого як AngularJS, мали неабияку кількість проблем, з якими навігатор працював у комбінованих додатках. Нова уніфікована служба локації має на меті зробити цей процес більш плавним.
16. Дослідіть управління робочим простором
Великі проекти отримують вигоду від можливості динамічного зміни структури робочого простору. Це робиться за допомогою нового API робочої області, представленого в Angular 8.0 - фрагмент, що супроводжує цей крок, забезпечує швидкий огляд поведінки.
async function demonstrate () {const host = робочі області. createWorkspaceHost (новий NodeJsSyncHost ()); const робоча область = очікуйте робочі області. readWorkspace (‘шлях / до / робоча область / каталог /’, хост); const project = workspace.projects. get (‘my-app’); const buildTarget = project.targets. get (’build’); buildTarget.options.optimization = true; await workspaces.writeWorkspace (робоча область, хост); }
17. Прискорити процес
Створення великих баз коду JavaScript стає нудним. Майбутні версії AngularJS використовуватимуть систему побудови Bazel від Google, щоб прискорити процес - на жаль, на момент написання статті вона ще не була готова до прайм-тайму.
18. Уникайте ходячих мерців
Незважаючи на те, що Google вживає максимальної обережності, щоб не зламати код, деякі функції просто потрібно видалити, оскільки вони більше не потрібні. Перегляньте цей список амортизаційних відрахувань, щоб дізнатися більше про функції, яких слід уникати.
19. Подивіться на журнал змін
Як завжди, одна стаття ніколи не може віддати належне цілому звільненню. На щастя, цей журнал змін містить детальний перелік усіх змін - на той випадок, якщо вам колись захочеться перевірити пульс особливо дорогої вам функції.
Чи багато файлів готові до завантаження на ваш сайт? Створіть їх резервні копії в найнадійнішому хмарному сховищі.
Ця стаття спочатку була опублікована в журналі творчого веб-дизайну Веб-дизайнер.
