Есть три основных релиза Angular. Первая версия, которая была выпущена это Angular1, которая также называется AngularJS. За Angular1 последовал Angular2, который внес много изменений по сравнению с Angular1.
Структура Angular основана на архитектуре компонентов / сервисов. AngularJS был основан на контроллере представления модели. Angular 4, выпущенный в марте 2017 года, оказался крупным прорывом и является последним выпуском команды Angular после Angular2.
Angular 4 почти такой же, как Angular 2. Он имеет обратную совместимость с Angular 2. Проекты, разработанные в Angular 2, будут работать без проблем с Angular 4.
Давайте теперь посмотрим на новые функции и изменения, сделанные в Angular 4.
Почему Angular4, а не Angular3?
Команда Angular столкнулась с некоторыми проблемами управления версиями внутри своих модулей, и из-за конфликта им пришлось двигаться дальше и выпустить следующую версию Angular — Angular4.
Давайте теперь посмотрим на новые функции, добавленные в Angular 4 —
ngIf
Angular2 поддерживает только условие if . Однако Angular 4 также поддерживает условие if else . Давайте посмотрим, как это работает с помощью ng-шаблона.
<span *ngIf="isavailable; else condition1">Condition is valid.</span> <ng-template #condition1>Condition is invalid</ng-template>
как ключевое слово для цикла
С помощью ключевого слова as вы можете сохранить значение, как показано ниже —
<div *ngFor="let i of months | slice:0:5 as total">
Months: {{i}} Total: {{total.length}}
</div>
Переменная total хранит выходные данные среза, используя ключевое слово as .
Анимационный пакет
Анимация в Angular 4 доступна в виде отдельного пакета и должна быть импортирована из @ angular / animations. В Angular2 он был доступен с @ angular / core . Это все еще остается тем же для его аспекта обратной совместимости.
шаблон
Angular 4 использует <ng-template> в качестве тега вместо <template>; последний был использован в Angular2. Причина, по которой Angular 4 изменил <template> на <ng-template>, заключается в конфликте имен тега <template> со стандартным тегом html <template> . Это будет полностью устаревать. Это одно из главных изменений в Angular 4.
TypeScript 2.2
Angular 4 обновлен до последней версии TypeScript, которая является 2.2. Это помогает повысить скорость и дает лучшую проверку типов в проекте.
Заголовок трубы
В Angular 4 добавлен новый регистр заголовка трубы, который меняет первую букву каждого слова в верхний регистр.
<div>
<h2>{{ 'Angular 4 titlecase' | titlecase }}</h2>
</div>
Приведенная выше строка кода генерирует следующий вывод — Angular 4 Titlecase .
Параметры поиска Http
Параметры поиска в http get api упрощены. Нам не нужно вызывать URLSearchParams для того же, что и в Angular2.
Меньшие и быстрые приложения
Приложения Angular 4 меньше и быстрее по сравнению с Angular2. Он использует версию 2.2 TypeScript, последнюю версию, которая делает окончательную компиляцию небольшой по размеру.