All Articles

TODO App em Angular 2 — Parte 1

[Atualizado em 16/09/2016]

Cerca de dois anos após os primeiros anúncios, o framework web Angular 2 foi oficialmente lançado como uma versão estável. E mesmo após esse curto período já detém de todo um ecossistema de desenvolvimento mobile e desktop — como foi amplamente divulgado na última ng-conf. A última versão do framework não só é mais performático que seu antecessor, como também mais otimizado e voltado à filosofia de componentes web.

Nesta série de artigos faremos um passo-a-passo na criação de um app em Angular 2 para o gerenciamento simples de tarefas. O código dessa primeira parte pode ser encontrado aqui.

Criando o projeto

Um dos principais esforços nessa nova versão do framework é facilitar ainda mais a vida dos desenvolvedores e promover um padrão de projeto entre a comunidade. Para isto, o time do angular desenvolveu uma ferramenta de apoio na criação de aplicações angular 2, a Angular CLI (que atualmente está em versão beta). Deste modo, os únicos pré-requisitos para o nosso projeto são os da própria ferramenta, sendo eles:

  • Node.js v.4+

E nada mais. Sim! O node é a única dependência que você vai precisar se preocupar em instalar. Todas as outras dependências básicas do projeto serão gerenciadas pelo npm—aliás, a Angular CLI faz o “trabalho sujo” e instala todas elas pra você na criação do projeto. Então chega de conversa e vamos criar nosso projeto. Mas antes, instalamos a Angular CLI:

npm install -g angular-cli

Com a CLI em mãos, podemos criar nosso primeiro projeto utilizando seu comando new:

ng new todo-ng2

Será criado um diretório chamado todo-ng2, e dentro dele uma estrutura inicial do projeto. Automaticamente também serão instaladas todas as dependências do projeto via npm. Esta etapa pode levar alguns poucos minutos, então seja paciente e aguarde enquanto as dependências são baixadas e instaladas.

Estrutura do projeto

A estrutura criada para o projeto deverá ser similar ao seguinte:

todo-ng2/
|- e2e/
|- src/
|  |- environments/ 
|  |- app/
|     |- shared/
|     |- ...
|     |- todo-angular2.component.css
|     |- todo-angular2.component.html
|     |- todo-angular2.component.spec.ts
|     |- todo-angular2.component.ts
|  |- ...
|  |- index.html
|  |- styles.css
|  |- main.ts
|  |- tsconfig.json
|- ...
|- angular-cli.json
|- package.json

Nosso foco inicial será o diretório src/, pois é lá onde estarão os principais arquivos utilizados pelo build da aplicação, ou seja, tudo aquilo que vai para o servidor no processo de deploy. Na raiz de src/ temos alguns arquivos importantes. São eles:

  • index.html: página inicial da nossa aplicação.
  • main.ts: responsável pela inicialização da aplicação.
  • styles.css: folha de estilo global da aplicação.
  • tsconfig.json: configurações de compilação do Typescript.

Nota: A configuração da aplicação e o conteúdo desses arquivos está fora do escopo deste post. Por enquanto usaremos as configurações predefinidas pela Angular CLI na criação do projeto.

Na maior parte do tempo estaremos trabalhando em src/app/, pois é lá onde estará o nosso código Angular (components, services, directives, pipes, templates…). Dentro de src/app/ temos alguns arquivos que definem o componente raiz da nossa aplicação:

  • todo-angular2.component.ts: definição do componente.
  • todo-angular2.component.html: template utilizado pelo componente.
  • todo-angular2.component.css: folha de estilo utilizada pelo componente.
  • todo-angular2.component.spec.ts: testes unitários do componente.

A estrutura de pastas e arquivos gerada pela Angular CLI segue o Angular 2 Style Guide, criado pelo próprio time do Angular — e eu fortemente recomendo que você dê uma lida nele!

Executando o projeto

Agora vamos testar o nosso projeto e verificar se está tudo funcionando corretamente. Para isso utilizamos o comando serve da Angular CLI:

ng serve

Acesse a aplicação em https://localhost:5100 e, se tudo estiver funcionando como o esperado, a página exibida será similar ao seguinte:

No próximo artigo falaremos em detalhes sobre componentes Angular 2 e criaremos a primeira funcionalidade da nossa aplicação. Até lá!

Indo além