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.

Похожие записи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *