Учебники

Angular 4 – Обзор

Есть три основных релиза 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, последнюю версию, которая делает окончательную компиляцию небольшой по размеру.