Angular 2 – Uma breve introdução

A nova versão do Angular está virando a esquina. Em desenvolvimento desde o final de 2014, e tendo como foco a correção de alguma decisões ruins do passado, no que diz respeito a sua estrutura e design, a equipe do Angular decidiu desenvolver a nova versão a partir do zero.

Muita coisa mudou. Na verdade, tirando algumas nomenclaturas e o nome do framework em si, tudo é diferente. Por padrão, foram-se as diretivas, promises, distinção entre service, factory e providers, e várias diretivas.

Entraram a bordo o TypeScript (recomendado pela própria equipe do Angular, mas você também pode utilizar JavaScript ou Dart), RxJS, NativeScript (mais sobre isso daqui a pouco), entre outros.

O que aconteceu com o Angular que todos nós conhecemos e adoramos? Vou ter que aprender tudo de novo? A curva de aprendizado é longa? Quais as vantagens? É mais rápido? É mais robusto? Escala melhor?

Aqui no blog da redspark tentaremos responder estas e outras dúvidas em uma série de posts. Mas vamos um passo de cada vez.

Neste ano de 2016 ocorreu mais uma ng-conf, e logo na abertura do evento, Brad Green, diretor de engenharia e administrador do projeto Angular no Google, disse o seguinte:

“Angular 1 is a framework. Angular 2 is a platform. – Brad Green”

O que ele quis dizer com isso? Bom…o Angular 2 agora tem um leque de opções e ferramentas bem poderoso. Com a expansão do React, e ferramentas como Flux, Redux e React Native ganhando espaço, a equipe do Angular decidiu contra-atacar.

O resultado é que o Angular 2 oferece:

Angular Universal
Permitirá rodar aplicações Angular 2 diretamente no servidor. Facilitará as questões relacionada a SEO e qualquer outra que necessite de um crawler lendo a página.

Angular CLI
Ferramenta que ajudará a realizar scaffold de components e services, além de auxiliar e executar rotinas de teste e deploy.

Angular Mobile Toolkit
Irá facilitar a criação de aplicações mobile progressivas (Que é uma forma de levar para um site mobile a mesma experiência que um app mobile apresentaria ao usuário), permitindo funções como carregamento instantâneo, suporte offline, possibilidade de instalação e suporte a notificações.

Material 2
Biblioteca de Material Design para Angular 2.

Augury
Extensão do Chrome para debugar aplicações Angular 2. Desenvolvida pelo pessoal do Rangle.io.

Integração com NativeScript
Permite escrever aplicações nativas para iOS e Android (e logo mais Windows Universal Apps) utilizando Angular 2. O NativeScript converte o código para chamadas nas linguagens das respectivas plataformas, garantindo uma aplicação com excelente performance.
Além disso, é possível utilizar plugins nativos já existentes que são distribuídos via CocoaPods e Gradle.

Tudo o que foi dito acima está bem resumido, e vale buscar sobre cada um dos pontos para se aprofundar.

Para que este post inicial não fique sem um exemplo do funcionamento do Angular 2, vamos dar uma olhada como o famoso Two-way data-binding do Angular 1 funciona na nova versão.

No angular 1, para realizar um Two-way data-binding, fazemos:

// view.html
<input type="text" name="firstName" ng-model="firstName">

// controller.js
angular.module('myApp.controllers')
  .controller(MyController, ['$scope', function ($scope) {
    $scope.firstName = null;
  }]);

E isso faria com que o $scope.firstName fosse atualizado com o valor inserido no input, e caso fosse alterado no controller, o mesmo valor seria refletido no input.

No Angular 2, fica assim:

// view.html
<input type="text" name="firstName" [(ngModel)]="firstName">

// my-input.component.ts -> .ts é um arquivo TypeScript
import {Component} from 'angular2/core';

@Component({
  selector: 'my-input',
  templateUrl: 'view.html'
})

export class myInput {
  firstName: string;
}

Esse código fará com que o que for escrito no input seja transferido para a variável firstName da classe myInput, e caso o valor seja alterado na classe, o mesmo será refletido no input.

É tudo bem diferente para quem está acostumado com o Angular 1. Eu mesmo ainda estou em processo de me acostumar com essa sintaxe.

Questões como especificidades do TypeScript, Router, Components, processo de build, testes e outros conceitos do Angular 2 virão nos próximos posts.
Tem muita coisa legal para vermos. Até lá!