Согласно объявлению Google, команда Angular наконец-то выпустила Angular 4 с невидимым преобразованием. Это первый крупный выпуск команды Angular с тех пор, как они перешли на Семантическое управление версиями, и хорошая новость заключается в том, что он обратно совместим с Angular 2. Это означает, что новая версия имеет очень плавную кривую обучения. Наша команда специалистов по Angular очень рада, так как они могут сразу приступить к работе! Еще в сентябре, когда появился долгожданный Angular 2, это было кардинальное изменение с новыми шаблонами и новыми API, поскольку фреймворк был полностью переписан.
По теме: Angular 2.0 наконец-то готов к приручению!
Что изменилось в Angular 4?
После напряженной работы в течение последних 3 месяцев команда Angular добавила некоторые важные улучшения и функциональные возможности. В то же время они сделали все возможное, чтобы облегчить разработчикам обновление до этой версии.
Позволяет сократить количество жира
Новая версия позволит значительно сократить ваши производственные пакеты, позволив вам генерировать меньше кода. Команда все еще работает над этим, чтобы отразить дальнейшие улучшения в ближайшие месяцы. Теперь вы можете сделать свои приложения меньше и быстрее! Вот некоторые изменения, чтобы облегчить это:
Новый механизм просмотра
Изменения были внесены под капот, чтобы уменьшить код, генерируемый компилятором AOT. В результате почти на 60 процентов сокращается размер генерируемого кода. Если ваши шаблоны более сложные, то экономия будет больше. Чтобы узнать больше о View Engine, прочитайте Design Doc.
Пакет анимации
Поскольку у анимации теперь есть собственный пакет @angular/platform-browser/animations, в ваших производственных пакетах не будет дополнительного кода, если вы не используете анимацию в своем приложении. Следовательно, вы можете легко найти документ, а также использовать автозаполнение. Вы также можете импортировать BrowserAnimationsModule и добавлять анимацию в свой основной NgModule.
Давайте изучим новые функции!
Улучшенные *ngIf и *ngFor
Новый синтаксис привязки шаблона теперь позволяет использовать синтаксис стиля if/else и назначать локальные переменные, например, при развертывании наблюдаемого объекта.
‹div *ngIf="userList | асинхронно как пользователи; еще загрузка»› ‹user-profile *ngFor=»let user of users; count as count” [user]=”user”› ‹/user-profile› ‹div›{{count}} всего пользователей‹/div› ‹/div› ‹ng-template #loading›Loading…‹/ng-template ›
‹div *ngIf="userList | асинхронно как пользователи; еще загрузка”›
‹user-profile *ngFor=”разрешить пользователю пользователей; считать как количество” [пользователь]=”пользователь”›
‹div›{{count}} всего пользователей‹/div›
‹ng-template #loading›Загрузка…‹/ng-template›
Угловой универсальный
Universal теперь является официальным проектом Angular! Первоначально это был проект сообщества, который позволял выполнять рендеринг на стороне сервера. Внутренняя и внешняя работа команды Universal за последние несколько месяцев теперь отражена в новом Angular. Большую часть универсального кода теперь можно найти в @angular/platform-server. Подробнее об этом можно узнать в новом методе renderModuleFactory.
Совместимость с TypeScript 2.1 и 2.2
Теперь вы можете улучшить проверку типов во всем приложении, так как новый выпуск был обновлен до более новой версии TypeScript. Это также улучшит скорость ngc.
Исходные карты будут сгенерированы
В случае ошибок в любом из ваших шаблонов будут сгенерированы исходные карты. Это поможет вам обеспечить значимый контекст относительно исходного шаблона. Таким образом, вы можете легко исправить свои ошибки.
Вывод
По словам команды Angular, вам не составит труда адаптироваться к этой новой версии, но мы верим, что вы все получите уникальный опыт работы с этим фреймворком. Мы хотели бы знать, что вы чувствовали, изучая новые функции в этом свежем новом Angular. Начнем разговор!
Первоначально опубликовано на сайте blog.heliossolutions.in 7 апреля 2017 г.
