Angular 4

Angular 4.0- invisible-makeover – офіційно випущений і він став не тільки меншим і швидшим, але також має поліпшені *ngIf і *ngFor,source maps для шаблонів, і багато іншого.

*ngIf and *ngFor

Синтаксис шаблону зв’язування тепер підтримує пару корисних змін. Тепер ви можете використовуватиif/else стиль синтаксису , і ассайнити локальні змінні, такі як unrolling an observable:


<div *ngIf="userList | async as users; else loading">
<user-profile *ngFor="let user of users; count as count" [user]="user">
</user-profile>

<div>{{count}} total users</div>

</div>

<ng-template #loading>Loading...</ng-template>

TypeScript 2.1 і 2.2 сумісність

Angular оновлений до більш нової версії TypeScript. Це дозволить підвищити швидкість ngc, і ви отримаєте кращу перевірку типів в вашому додатку.

Source Maps для шаблонів

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

View Engine

Внесено зміни під капотом, для того щоб АОТ (Ahead-of-time) згенерований код виглядає краще. Ці зміни зменшили розмір генерованого коду для компонентів приблизно на 60% в більшості випадків. Більш складні шаблони – тим вища економія.

Під час періоду реліз-кандидатів, розробники Angular чули від багатьох девелоперів, що перехід на 4ту версію зменшили розмір фінальної версії проекту на сотні кілобайт.

Прочитайте Design Doc щоб дізнатися більше про View Engine.

Мадуль анімації (Animation Package)

Модуль анімації витягнули  з @angular/core і помістили його у власному пакеті. Це означає, що якщо програма не використовувати анімацію, цей додатковий код не буде в кінцевому підсумку в зібраномих ісходніках.

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

Оновлення до 4.0.0

Оновлення до 4 версії настільки ж просте як і оновлення Angular залежностей до останніх версій. Також необхідно перевірити чи додаток використовує анімації, оскільки вони уже винесені в інший модуль. Даний спосіб оновлення повинен спрацювати в більшості випадків.

Linux/Mac:
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest –save

Windows:
npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest –save

Дальше потрібно виконати ng serve або npm start команду, яку ви там зазвичай використовуєте, і все повинно працювати ок. Якщо програмі потрібні Animations то імпортніть BrowserAnimationsModule from @angular/platform-browser/animations в головному NgModule. Без цього імпорту код повинен зкомпілюватися і запуститися, але анімації будуть викликати помилки. Імпорт з  @angular/core став устарівшим, потрібно використовувати новий import { trigger, state, style, transition, animate } from ‘@angular/animations’;.

Щоб ознайомитися з усіма змінами даного релізу можна відвідати  Angular сайт і анонс на blog post.

Для тих кому цікаво де дівся Angular 3 – то цю версію просто пропустили. Це анонсували ще в грудні і можна подивитись даний запис тут:

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту та натисніть Ctrl+Enter.

Схожі статті

Leave a Reply

Your email address will not be published. Required fields are marked *