A primeira versão do Angular ou AngularJS, foi disruptiva para o desenvolvimento front-end. Isso porque, foi o primeiro framework que começou a popularizar o conceito de SPA na web.
Assim, o Angular acabou mudando da versão 1.x (AngularJS) para uma versão nova porque esse “novo Angular” tem uma estrutura de código, sintaxe, totalmente diferente do AngularJS.
Em outras palavras, é realmente um novo framework.
Algumas diferenças do AngularJS para o Angular 2+
- O Angular 2+ utiliza Typescript, enquanto que o AngularJS, usa JavaScript.
- O Angular agora é feito de componentes. Assim, não tem mais necessidade de criar um controller e trabalhar com $scope.
- AngularJS não foi construído considerando o suporte mobile, enquanto o Angular 2+ é totalmente orientado ao mobile.
- A sintaxe é totalmente diferente, agora o ng-for, por exemplo, é *ngFor, o padrão da sintaxe é camelcase.
- Angular 2+ possui um CLI, para criação fácil de novos projetos, componentes e serviços.
- A definição de um serviço antes no AngularJS poderia ser feita de várias maneiras, por exemplo: uma factory, serviço, provider, constant, values. Por isso, assim como o Angular 2+ é baseado em classes, essa é a única maneira de definir um serviço.
- A performance e o tamanho do bundle final mudou na aplicação.
Versionamento do Angular
Em suma, o Angular utiliza o SemVer para seus releases.
Então, o que isso significa? Dessa forma, cada nova versão segue um padrão de Major, Minor e Patch. A seguir vamos conhecer cada uma delas.
Releases Major
As releases Major acontecem duas vezes ao ano, com a última em 9 Outubro/Novembro 2019, e assim, a próxima programada para Maio de 2020.
Nas releases Major, o Angular traz novidades na API, novas features, e, além disso, talvez seja necessário fazer alterações no código e nos testes.
Releases Minor
As releases Minor trazem algumas features menores que são totalmente compatíveis com as versões Major.
Releases Patch
Já as releases Patch corrigem eventuais bugs que possam travar o desenvolvimento dentro do Angular.
Agora vamos ver algumas mudanças conforme as releases do Angular 2+:
2016 – Angular 2
- Completa re-escrita do Angular.
- Escrito completo em TypeScript.
- Suporte de TypeScript 1.8+
- Suporte à Mobile.
Falamos mais sobre o Angular 2 neste artigo. Lembrando que a partir dessa versão ele é um framework totalmente novo.
Angular 3
O release do Angular 3, não aconteceu. Por isso, o @angular/router já estava na versão 3 e lançar a versão 4 do router com o Angular na versão 3 iria criar bastante confusão.
2017 – Angular 4
- Mudanças no core do Angular.
- Angular 4 é uma nova versão do Angular 2.
- Melhora na performance com mudanças na compilação AOT.
- Compatível com TypeScript 2.1 e 2.2
- Animações foram separadas do @angular/core para @angular/animation.
- Else introduzido no *ngIf.
Novembro de 2017 – Angular 5
- Otimizador de Build: remove código que é desnecessário na sua aplicação.
- Preserve White Space: colocando “angularCompilerOptions”: { “preserveWhitespaces”: false}` , no tsconfig.json , você remove espaços em brancos desnecessários, que reduzem o tamanho final do bundle.
- Suporte ao TypeScript 2.3
- Alguns LifeCycle events novos no Router do Angular: ActivationStart, ActivationEnd, ChildActivationStart, ChildActivationEnd, GuardsCheckStart, GuardsCheckEnd, ResolveStart and ResolveEnd.
- HttpClient: Até a versão do Angular 4.3, era usado @angular/HTTP , e foi depreciado, e no Angular 5 o novo módulo foi chamado de HttpClientModule e vem no package novo @angular/common/http
- Por fim, a compilação também foi melhorada.
Abril de 2018 – Angular 6
- Release mais focado nas ferramentas do Angular do que no framework em si.
- Mudou para a versão do RxJS6.
- Mudança de <template> para <ng-template>
- Registrar o provider. Desse modo, para registrar novo serviço, você importa no módulo e declara dentro do providers.
- Consegue, da mesma forma, usar o providedIn:root, nos serviços com Injectable decorator.
- Uso de angular.json ao invés de angular-cli.json.
- Suporte à múltiplos projetos, por exemplo, podendo adicionar vários no angular.json.
- Release inicial do Angular Elements, para usar componentes Angular em outros ambientes, por exemplo, Vue e React.
Outubro de 2018 – Angular 7
Esse é um Release Major que expande todo framework no core, Angular Material e no CLI.
- Angular 7 suporta o TypeScript 2.9.
- Novo Pipe: KeyValuePipe.
- Novo compilador, Compilador de Compatibilidade (bgcc).
- Nova interface: DoBootstrap.
- Nova interface: de UrlSegment[], para CanLoad.
- CLI: Pode iniciar um projeto com SCSS, Stylus ou Less.
Março/Abril de 2019 – Angular 8
- Menor, além disso, mais rápido e fácil de usar.
- Suporte ao TypeScript 3.2
- Suporte a Sass.
- Arquivos Sass/Less para .css
- Suporte a build com o Bazel.
- Migração do Renderer para Renderer 2.
- Ivy: renderização de nova geração do Angular, com, por exemplo, bundles e pacotes muito menores.
- Uso de Dart-Sass substituindo o Ruby para criar arquivos Sass.
- Melhora no suporte de webworkers.
- Melhora na migração de apps Angular.js para Angular 8.
- Suporte a Webworker.
- Apis de Build no CLI: com essa feature nova conseguimos customizar comandos do Angular CLI como ng build, ng test e ng run.
- Imports dinâmicos nas configurações de rotas.
- ng deploy adicionado ao Angular CLI.
- Suporte a Node 10.
Outubro/Novembro de 2019 – Angular 9
- Melhoras no compilador Ivy.
- formControlName também aceita número no form.
- TestBed.get depreciado.
- Suporte ng-add no pacote de localização.
- Adicionado o ivy- expose window.ng.getDebugNode helper e também suporta ng-add no pacote de localização.
- Somando o ivy-i18n – adicione suporte à sintaxe para o bloco de metadados $ localize.
- Adicionado ivy – i18n – reorganiza os pontos de entrada para melhor reutilização.
- Permite diretivas sem seletor como classes base no View Engine no compilador.
Upgrades e Compatibilidade
O Angular geralmente oferece suporte nas 2 versões anteriores da versão do último release. Então, se precisar de ajuda na atualização entre versões do Angular, veja aqui nesta página.
Conclusão
Por fim, ainda ficou com alguma dúvida sobre as versões e releases do Angular ou quer dar alguma dica legal? Então, basta escrever nos comentários!
Quer receber os melhores conteúdos sobre desenvolvimento no seu e-mail? Então assine a nossa newsletter aqui.
