Mobile Técnico

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.
CTA-ebook-transformação-digital

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á!

Autor(a)

Demetrius Danesi

Comentário (1)

  1. Robson Oliveira
    23 de junho de 2016

    PArabéns pelo post. Ótimo review.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *