Angular 4 - Visão geral

Existem três versões principais do Angular. A primeira versão lançada é a Angular1, também chamada de AngularJS. Angular1 foi seguido por Angular2, que veio com muitas mudanças quando comparado a Angular1.

A estrutura do Angular é baseada na arquitetura de componentes / serviços. O AngularJS foi baseado no controlador de visualização do modelo.Angular 4 lançado em março de 2017 prova ser um grande avanço e é o lançamento mais recente da equipe Angular após Angular2.

O Angular 4 é quase o mesmo que o Angular 2. Ele tem uma compatibilidade retroativa com o Angular 2. Os projetos desenvolvidos no Angular 2 funcionarão sem problemas com o Angular 4.

Vamos agora ver os novos recursos e as alterações feitas no Angular 4.

Por que Angular4 e não Angular3?

A equipe do Angular enfrentou alguns problemas de versão internamente com seus módulos e devido ao conflito, eles tiveram que seguir em frente e lançar a próxima versão do Angular - o Angular4.

Vamos agora ver os novos recursos adicionados ao Angular 4 -

ngIf

Angular2 suportava apenas o ifdoença. No entanto, Angular 4 suporta oif elsecondição também. Vamos ver como funciona usando o modelo ng.

<span *ngIf="isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>

como palavra-chave em for loop

Com a ajuda de as palavra-chave, você pode armazenar o valor conforme mostrado abaixo -

<div *ngFor="let i of months | slice:0:5 as total">
   Months: {{i}} Total: {{total.length}}
</div>

A variável total armazena a saída da fatia usando o as palavra-chave.

Pacote de Animação

A animação no Angular 4 está disponível como um pacote separado e precisa ser importada de @ angular / animations. No Angular2, estava disponível com @angular/core. Ainda é mantido o mesmo por seu aspecto de compatibilidade com versões anteriores.

Modelo

Angular 4 usa <ng-template> como a tag em vez de <template>;o último foi usado no Angular2. O motivo da mudança do Angular 4<template> para <ng-template> é por causa do conflito de nomes do <template> tag com o html <template>tag padrão. Ele será completamente suspenso daqui para frente. Esta é uma das principais mudanças no Angular 4.

TypeScript 2.2

O Angular 4 foi atualizado para uma versão recente do TypeScript, que é 2.2. Isso ajuda a melhorar a velocidade e fornece uma melhor verificação de tipo no projeto.

Pipe Title Case

O Angular 4 adicionou uma nova caixa de título de barra vertical, que altera a primeira letra de cada palavra para maiúscula.

<div>
   <h2>{{ 'Angular 4 titlecase' | titlecase }}</h2>
</div>

A linha de código acima gera a seguinte saída - Angular 4 Titlecase.

Parâmetros de pesquisa Http

Os parâmetros de pesquisa para o http get api são simplificados. Não precisamos ligarURLSearchParams para o mesmo que estava sendo feito no Angular2.

Aplicativos menores e mais rápidos

As aplicações do Angular 4 são menores e mais rápidas quando comparadas ao Angular2. Ele usa o TypeScript versão 2.2, a versão mais recente que torna a compilação final pequena em tamanho.