Começando com Angular 2

Nos últimos anos, Angular tem sido o nome do framework front-end open source líder para o desenvolvimento de aplicações baseadas em JavaScript. A primeira versão do Angular (1.x) conhecida popularmente como AngularJS, ainda tem sido amplamente utilizada para as mais diversas aplicações. Todavia, em setembro de 2016, a Google anunciou o novo Angular 2.x em sua versão final. Uma completa reescrita do bom (e não tão velho assim) AngularJS. Isso mesmo, temos um novo framework em mãos. O AngularJS continua sendo um framework produtivo, porém a web mudou desde quando ele foi concebido lá em meados de 2009, é inevitável. O próprio JavaScript mudou, novos conceitos surgiram e com eles, novas e melhores formas de programação.

A nova base de código do Angular 2 é mais moderna, mais robusta e mais simples, portanto a curva de aprendizagem tende a ser menor. Utilizando Angular 2 os programadores podem concentrar seus esforços nas regras de negócio, tirando todo proveito das vantagens do ECMAScript 6 e da orientação a objetos. Os componentes do Angular 2 são consideravelmente mais fáceis de ler, e seus recursos de API requerem menos código para serem escritos do que as diretivas da sua versão anterior. Por depender do Node.js (leia mais sobre ele aqui), Angular 2 fornece um conjunto de features para o desenvolvimento que sua versão anterior não possuía. Por conta disso, precisamos lidar com algumas configurações e dependências até então inexistentes, o que pode parecer um tanto quanto mais complexo, mas apenas no início.

Ao se concentrar em tornar a estrutura mais fácil para os computadores processarem, o Angular 2 permite um ecossistema de desenvolvimento em módulos muito mais rico e performático. Os programadores irão notar melhorias significativas com o auto complete e com as sugestões de tipagem; estas melhorias ajudam a reduzir a carga cognitiva necessária na aprendizagem do framework.

ts_es6_es5

Figura 1 – Angular 2 foi escrito em TypeScript, um superconjunto (superset) de JavaScript feito pela Microsoft e que implementa muitas novas funcionalidades em cima do ES2015 (ECMAScript 6).

Angular 2 será o framework que iremos utilizar sem hesitação em nossos projetos futuros? Essa é uma pergunta que apenas o tempo nos dirá. Mas uma coisa é certa, o Angular 2 foi uma reescrita necessária para adequar o framework à realidade atual da web. Com o ECMAScript 6, os Web Components e o Mobile em mente, o Angular 2 acaba sendo um forte e mais preparado concorrente que seu antecessor.

Essa série de posts sobre Angular 2 tem por objetivo realizar um overview que permita ao leitor ter uma base de conhecimentos para buscar um aprofundamento maior nas funcionalidades desse poderoso framework front-end.

tsvses6-200x200

TypeScript e ECMAScript 6

A linguagem de programação comumente chamada de “JavaScript” é formalmente conhecida como “EcmaScript”. A nova versão do JavaScript é conhecida como “ES6” ou “ES2015” e oferece um conjunto de novas funcionalidades que estendem o poder da linguagem. Já o TypeScript, é uma linguagem open source desenvolvida pela Microsoft que funciona como um superset do ES2015 (é um ES6 com recursos extras, como tipagem estática e decorators).

Por ser um superset do ES6, todas as features do ES6 fazem parte do TypeScript, mas nem todas as features do TypeScript fazem parte do ES6. Consequentemente, o código TypeScript precisa ser transpilado em ES5 para rodar na maioria dos browsers (mas não se preocupe, o Angular 2 faz isso para nós).

Um dos principais recursos fornecido pelo TypeScript é a adição de tipagem, daí o nome. Essa tipagem pode ajudar a criar um código JavaScript mais previsível e de mais fácil leitura.

Além de ter criado o TypeScript, a Microsoft também disponibilizou para a comunidade um editor chamado “Visual Studio Code”. Esse editor pode ser baixado gratuitamente no link: https://code.visualstudio.com/download (recomendo que utilizem esse editor nos desenvolvimentos com Angular 2).

angular2

Angular 2: principais arquivos

Angular 2 é orientado a componentes, isso significa que você vai escrever diversos componentes minúsculos que juntos constituirão uma aplicação inteira. Um Component é a combinação de um template HTML com uma classe que controla parte da tela:

app/app.component.ts – é aqui que definimos o nosso componente raiz (root component), que se tornará uma árvore de componentes aninhados conforme a aplicação for evoluindo

import { Component } from '@angular/core'

@Component({
     selector: 'app-root',
     template: '<b>Inicializando uma aplicação Angular 2</b>'
})
export class AppComponent { }

Listagem 1 – Criamos uma classe Java Script 6 chamada “AppComponent” com o export, que informa que a classe poderá ser utilizada em outros pontos do código, funciona como o modificador de acesso “public” do Java. Usamos o decorator @Component, que importamos de @angular/core, passando dois parâmetros: o selector define a tag que utilizaremos no nosso arquivo HTML e o template define o conteúdo a ser renderizado toda vez que nosso selector for localizado.

 index.html – esta é a página em que o componente será renderizado através do selector app-root.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title>Angular 2</title>
     </head>

     <body>
          <app-root>Carregando...</app-root>
     </body>
</html>

Listagem 2 – Arquivo HTML5 simples com uma tag <app-root></app-root> que será renderizada pelo Angular 2.

 app/app.module.ts – é o módulo principal responsável por dizer ao Angular 2 como montar a aplicação.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } '@angular/core';
import { AppComponent } from './app.component'

@NgModule({
     imports: [BrowserModule],
     declarations: [AppComponent],
     bootstrap: [AppComponent]
})
export class AppModule {}

Listagem 3 – Módulo principal da aplicação.

 app/main.ts – é a cola que combina o componente (app.component.ts) com a página (index.html).

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Listagem 4 – Arquivo de bootstrapping (inicialização) da aplicação.

O processo de inicialização começa através do arquivo “main.ts”, que é o ponto de entrada da aplicação. O AppModule importado em “main.ts” funciona como o módulo root. O módulo root é configurado para utilizar o arquivo app.component.ts” como o componente principal a ser inicializado e este será chamado para renderizar toda tag “<app-root>” encontrada no template HTML. Ou seja, uma vez que exista uma tag <app-root>  no arquivo “index.html”, quando solicitamos ao browser que abra index.html, através da transpilação do arquivo app/main.ts, a função “platformBrowserDynamic().bootstrapModule(AppModule)” se encarrega de realizar o start do processo de inicialização da aplicação.

Até esse ponto já vimos os principais arquivos TypeScript de um projeto Angular 2:

  1. app.component.ts (Component);
  2. index.html (Template);
  3. app.module.ts (Module);
  4. main.ts (Bootstrap).

Criação de um novo projeto Angular 2

Existem duas formas bem simples de criar um novo projeto Angular 2:

Quickstart Project

A primeira delas consiste em efetuar o download no GitHub do “projeto semente” (seed project), que nada mais é que um projeto Angular 2 chamado “QuickStart” com as dependências configuradas e com os diretórios principais já criados.

Link: https://github.com/angular/quickstart

  1. Crie um diretório para o projeto (você pode nomeá-lo de quickstart e renomeá-lo mais tarde).
  2. Caso esteja utilizando git, faça um “git clone https://github.com/angular/quickstart.git quickstart” ou realize o download do projeto QuickStart para o diretório criado no passo anterior e descompacte-o.
  3. Abra um terminal, acesse o diretório do seu projeto e digite “npm install” para baixar todas as dependências do projeto. Repare que a pasta node_modules será criada e nela haverão todas as dependências baixadas.
  4. Ainda com o terminal aberto no diretório do seu projeto digite “npm start” para iniciar a aplicação de exemplo.
  5. Abra o Google Chrome e navegue para http://localhost:3000/

Deve aparecer a seguinte tela:

hello_angular2

Figura 2 – Resultado do quickstart após inicializar o servidor HTTP.

Angular-CLI

Outra forma de realizar a criação de um projeto Angular 2, ainda mais simples que a anterior e que vem sendo adotada como um padrão de mercado, é através da ferramenta Angular-CLI (Pré-requisito: Node.js e Npm. Leia como instalar aqui):

  1. Abra um terminal e utilize os comandos
  2. npm install -g angular-cli
  3. ng new PROJECT_NAME
  4. cd PROJECT_NAME
  5. ng serve

Navegue para http://localhost:4200
angular_cli

Figura 3 – Resultado do angular-cli após inicializar o servidor HTTP.

Subindo o servidor por esse segundo método, a aplicação recarregará automaticamente se forem detectadas quaisquer mudanças em um dos arquivos de origem do projeto. Apenas para finalizar, podemos configurar a porta HTTP padrão usada pelo servidor LiveReload com duas opções de linha de comando:

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

 Referências

[1] http://nodebr.com/o-que-e-a-npm-do-nodejs/

[2] https://angular.io/docs/ts/latest/guide/setup.html

[3] https://futurestud.io/tutorials/npm-quick-tips-1-install-packages

[4] https://github.com/angular/angular-cli

[5] https://cli.angular.io/

[6] http://www.w3schools.com/html/html5_intro.asp

Por OTÁVIO FELIPE DO PRADO

Analista de Sistemas MATERANO, atua no desenvolvimento de software na plataforma Java desde 2012, adora programação e se aventurar no mundo da tecnologia, está sempre buscando evoluir e aprender um pouco a cada dia.

Postado em: 09 de fevereiro de 2017

Confira outros artigos do nosso blog

Variáveis nativas no CSS: elas existem?

14 de maio de 2018

Patrícia Gomes dos Santos Silva

How-to: Conhecendo o SASS

07 de maio de 2018

Bruno Carvalho

Introdução ao Webpack 2

10 de julho de 2017

Alan Cesar Elias

O que é um front-end developer?

04 de fevereiro de 2016

André Ailton dos Reis

Deixe seu comentário