Що знаходиться всередині кута 8?

Sep 14, 2025
Як
Angular 8
(Зображення кредиту: майбутнє)

Кутова 8 - це найновіша версія кутового - одного з Кращі рамки JavaScript навколо. У цій статті ми пройдемо через те, що особливе про кутові 8, і покажіть вам, як почати роботу. По-перше, короткий огляд назад на те, що сталося з рамкою до цих пір.

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

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

У випадку кутового 8, наприклад, новий компілятор JavaScript розгорнуто (хоч і все ще експериментально). Він оптимізує створений код сумісності, щоб бути значно меншим і швидшим за рахунок старших браузерів. Крім того, підтримка веб-працівників інтегрована для збільшення можливості обробки кутової обробки. Коротше кажучи, існує багато, щоб побачити - так давайте пірнати прямо в.

Якщо ви хочете розробити сайт без коду, спробуйте один з них Будівельники веб-сайту . І зробити речі, навіть гладкі, отримати веб хостинг Сервіс прямо.

01. Запустіть перевірку версії

Інструментарій кутової людини живе всередині середовища Nodejs. На цьому писемному режимі Node.js 10.9 або краще - якщо ви опинитеся на старій версії, Відвідайте веб-сайт Node.js і отримати оновлення. Наведений нижче код показує стан версії на цій машині. 

 Tamhan @ Tamhan18: ~ $ Node -v
v12.4.0
tamhan @ tamhan18: ~ $ npm -v
6.9.0

02. Встановіть кутовий

Інструментарій кутового кольору проживає в утиліті командного рядка нг . Він може бути встановлений за допомогою відомих NPM. 

 tamhan @ tamhan18: ~ $ sudo npm install -g @ кутовий / cli
tamhan @ tamhan18: ~ $ ng версія

Будьте обережні, щоб відповісти на запитання, показане на зображенні нижче.

Click the icon in the top right to enlarge

Натисніть значок у верхньому правому (Зображення кредиту: Там Ганна)

Отримання версії інформації з інструменту досить складно - не тільки синтаксис унікальний, але виведення також є багатоповерховим (див. Зображення нижче).

Click the icon in the top right to enlarge

Натисніть значок у верхньому правому (Зображення кредиту: Там Ганна)

03. Створіть скелет проекту

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

 Tamhan @ Tamhan18: ~ $ mkdir angularspace
tamhan @ tamhan18: ~ $ cd angularspace /
tamhan @ tamhan18: ~ / angularspace $ ng new weeletest

04. Диференціальне навантаження

Нова версія кутового оптимізації коду співзвучки для зменшення впливу - файл під назвою список браузера дозволяє вирішити, які браузери повинні бути підтримані. відчинено список браузера і видаліть слово не перед IE 9 до IE11. 

. . .
& gt; 0,5%
Останні 2 версії
Firefox ESR
не мертвий
Тобто 9-11 # для підтримки IE 9-11, видалити "не"

05. ... і побачити результати

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

 Tamhan @ Tamhan18: ~ / AngularSpace / Workertest $
sudo ng build
tamhan @ tamhan18: ~ / angularspace / workertest / dist / workertest $ ls

Викликати дерево, щоб побачити результати - нг Створює кілька версій різних файлів коду (див. Зображення нижче).

Click the icon in the top right to enlarge

Натисніть значок у верхньому правому (Зображення кредиту: Там Ганна)

06. Ікру веб-працівника

Веб-працівники дозволяють JavaScript ввести останній кордон рідних додатків: масово паралельна обробка завдань. З кутовим 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 специфікація. В принципі, працівник отримує повідомлення та обробляє їх у міру необхідності. 

 /// & lt; довідник lib = "webworker" / & gt;
addeventlistener ("повідомлення", ({data}) = & gt; {
 Const Reffect = `Робочий відповідь на
$ {дані};
 поштове повідомлення (відповідь);
});

08. Налаштування лісів

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

 Імпорт {Component, Oninit} від "@ кутова / Core";
@Component ({{{{
. . .
})
Експорт класу Appcomponent реалізує Oninit {
 title = 'workertest';
 ngoninit () {
   Console.Log ("AppComponent: Oninit ()");
 }
}

09. Не турбуйтеся про відсутність конструктора

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

10. Виконати невеликий компілятор

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

 Tamhan @ Tamhan18: ~ / AngularSpace / Workertest $
sudo ng служити

Погляньте на фігуру, щоб побачити це в дії на зображенні нижче.

Hit the icon in the top right to enlarge the image

Натисніть значок у верхньому правому куті, щоб збільшити зображення (Зображення кредиту: Там Ганна)

11. ... і знайти вихід

нг служити накладає адресу свого локального веб-сервера, який зазвичай http: // localhost: 4200 / . Відкрийте веб-сторінку та відкрийте інструменти розробника, щоб переглянути вихід стану. Майте на увазі console.log Виводить дані до консолі браузера та залишає консоль екземпляра Nodejs недоторканим.

12. Отримайте роботу

На цей момент ми створюємо екземпляр працівника і надаємо його повідомленням. Його результати відображаються в консолі браузера. 

 Якщо (Worker Worker! == "невизначений") {
 // Створити новий
 Const Worker = Новий працівник ('./ myworker.worker', {type: 'модуль});
 worker.onmessage = ({data}) = & gt; {
   Console.Log ("Сторінка отримала повідомлення: $ \ t
{Дані} ');
 };
 worker.postmessage ('hello');
} else {
     console.log ("Немає підтримки працівників");
}

13. Досліджуйте плющ

Майбутні версії кутових буде використовувати більш просунутий компілятор, що веде до навіть менших поглядів. Хоча продукт ще не закінчений, скелет з підтримкою IVY може бути розпущений через NG New Ivy-Project - Увімкніть плющ . Крім того, змініть налаштування компілятора, як показано в фрагменті. 

 "Кутовікомпілеропи": {
       "Увімкнено": правда
}

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

14. Спробуйте модифіковану обробку NG

Кутовий нг Інструмент командного рядка використовує дитячі скрипти всередині деякого часу. Кутовий 8 UPS ANTE, в якому ви можете зараз, також скористайтеся цим об'єктом для запуску власних завдань, оскільки ваша програма збирається та складена. 

 "Архітектор": {
       "Побудувати": {
         "Будівельник": "@ кутовий-devkit /
Будівельно-кутовий: браузер ",

Одне акуратне застосування нг Сценарії включають безпосереднє завантаження програм до хмарних послуг. Точний Репозиторій GIT Надає корисний скрипт, який завантажує вашу роботу на рахунок Firebase.

15. Насолоджуйтесь покращеною міграцією

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

16. Досліджуйте контроль робочого простору

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

 функція async демонструє () {
   Const Host = робочі області.
Createworkspacehost (новий Nodejssynchost ());
   const workspace = чекають робочих областей.
readworkspace ('шлях / до / WorkSpace / каталог /',
хост);
   Const Project = WorkSpace.Projects.
отримати ('My-App');
   const buildtarget = project.targets.
отримати ('build');
   buildtart.options.Optimization = true;
   Await Workspaces.WriteWorkSpace (Workspace,
хост);
}

17. Прискорити процес

Будівництво великих баз коду JavaScript отримує нудний. Майбутні версії Angularjs використовуватимуть систему Build Build Google, щоб прискорити процес - на жаль, під час написання він не був готовий до первосму.

18. Уникайте померлого

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

19. Подивіться на журнал змін

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

Отримав багато файлів, готових для завантаження на ваш сайт? Назад у найбільш надійному хмара зберігання .

Ця стаття була опублікована в журналі Creative Web-дизайну Веб-дизайнер .

Читати далі:

  • Додайте багатомовну підтримку кутових
  • Кращий Apis JavaScript
  • Як код швидше, більш світлий JavaScript

Як - Найпопулярніші статті

Як налаштувати та оптимізувати свій Smugmug StoreFront

Як Sep 14, 2025

(Зображення кредиту: Андре Фуртадо на PEXELS) Простий будівельник в..

Портретна фотографія: як взяти ідеальні портрети

Як Sep 14, 2025

Портретна фотографія - це балансувальний акт - є так багато речей, щоб мати на увазі. Спілкування з вашим �..

Використовуйте інструмент Marmoset, щоб представити моделі ВР

Як Sep 14, 2025

Marmoset toolbag не є новим для 3D-арт промисловість. Це було протягом б..

Як створити монстр лабіринтного стилю пана

Як Sep 14, 2025

Page 1 з 2: Сторінка 1 Сторінка 1 ..

Поверніть фотографії в 3D-анімації з Photoshop

Як Sep 14, 2025

Ми всі маєте великий магазин спогадів, зроблених як фотографії, і це зд..

Створіть змішані фарби з InDesign

Як Sep 14, 2025

Page 1 з 2: Створіть змішаний зразок чорнила ..

Як зробити фотореалістичне небо

Як Sep 14, 2025

Для цього підручника ми будемо використовувати Vue xstream створит..

Прототип кнопки плаваючої дії в піксеті

Як Sep 14, 2025

Pixate дозволяє швидко прототипом інтерактивних мобільних макетів, які можна переглянути на пристроях Androi..

Категорії