Analizando o Angular 2

O Google anunciou oficialmente a nova versão estável do seu framework front-end. Agora é possível utilizar o Angular 2 em aplicações web ricas graças a uma revitalização na API. Porém para que o framework pudesse evoluir foi necessário uma grande mudança na arquitetura do framework.

Você já usa ou usou o Angular 1 ? Sabe o que mudou na nova versão ? Confira logo abaixo o que é o Angular 2 na análise.


Typescript em foco!

O framework tem como linguagem principal o Typescript, a linguagem criada pela Microsoft que se transforma em Javascript. O resultado disso é uma API conforme a especificação ECMAScript 6, uma atualização do Javascript que traz muito conforto ao programar.

É possível ainda usar o bom e velho Javascript e até mesmo Dart porém o suporte padrão do framework ainda continua sendo o Typescript e, caso você ainda não tenha feito, vale a pena a migração.


Construido sobre componentes

Uma mudança radical nessa nova versão foi a substituição dos Controllers para os chamados Components e a aposentadoria do querido $scope.

Na pratica o componente é como um controlador "atrelado" com HTML e isso pode deixar o código com uma manutenção muito mais simples visto que existe a possibilidade do código HTML ser inserido dentro do arquivo Javascript. Nada mais de ng-controller ou coisas do tipo, agora você pode simplesmente criar uma classe, adicionar um decorador, digitar o código HTML ou referenciar um arquivo com o conteúdo HTML, desenvolver na classe as funções utilizadas naquele componente e pronto!

Os componentes podem ainda ser aproveitados em outros pontos da aplicação, diminuindo assim a duplicidade de código e uma melhora na manutenção do software.


Decoradores

Como se não bastasse finalmente código orientado a objetos o Angular 2 faz uso de decoradores. De uma forma básica, decoradores são funções que conseguem mudar as funções nas quais são aplicadas sem a necessidade de modificar o código explicitamente.

Achou complicado ? Dá um pulo no post do Google Developers aqui no medium para saber mais ;)

Decoradores estão por TODOS os cantos, seja em componentes, diretivas, módulos … E isso ajuda muito você na hora de programar. Olha um exemplo abaixo, é um componente com a anotação.

import { Component } from '@angular/core';
@Component(
template : `<button type="button"
(click)="sayHello()">Clica em mim</button>`,
selector : 'app'
)
class HelloWorldComponent {
sayHello() {
alert('Olá mundo, que fácil!');
}
}

Na primeira linha precisamos importar o decorador que está no pacote '@angular/core'. Fazemos o uso do decorador logo acima da classe responsável pelo componente.

Perceba que a palavra "click" está em parênteses, durante a sessão de postagens sobre o Angular 2 explicarei mais em detalhes mas de antemão trata-se de um template statement, esse cara é responsável por disparar os eventos da view para a classe onde está implementado o método sayHello().


Essa foi minha breve análise sobre o framework, foram os pontos que mais me chamaram a atenção e durante a semana estarei com uma série de publicações de como iniciar com o Angular 2 para o seu próximo projeto web.

Até mais.

Like what you read? Give Gabriel Ribeiro a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.