Iniciando com Angular 2

Vimos aqui no Clube dos Geeks uma série de postagens sobre TypeScript, que servem como introdução para a nova série sobre Angular2.

direto ao ponto.

Angular2

É um framework para construção de aplicativos do lado do cliente usando HTML e JavaScript. A estrutura é constituída por várias bibliotecas cooperantes, algumas de núcleo e outras opcionais.

Módulos

Angular 2 é modular, e permite que um aplicativo possa ser separado em vários módulos.

Um módulo geralmente é um bloco de código dedicado a um único propósito. Um módulo exporta algo de valor em que o código geralmente é uma classe.

Talvez o primeiro módulo que encontramos é um módulo que exporta uma classe componente. O componente é um dos blocos angulares básicas, escrevemos um monte deles, e nós vamos falar sobre componentes no próximo segmento. No momento, é o suficiente para saber que uma classe componente é o tipo de coisa que iria exportar a partir de um módulo.

A maioria das aplicações têm um AppComponent. Por convenção, vamos encontrá-lo em um arquivo chamado app.component.ts. No arquivo veremos uma declaração de exportação, como a seguir:

A declaração exports diz ao TypeScript que este é um módulo que tem a classe AppComponent publica e acessível por outros módulos na aplicação.

Para ter acesso ao que foi exportado use a declaração import como no exemplo a seguir.

No caso acima AppComponent será o alias do módulo exportando em app.component.ts. Mais a frente mostraremos um exemplo prático desse uso.

Módulos do Angular 2

O Angular 2 conta com seus próprios módulos nativos, como o angular/http que provém funções para o uso do protocolo HTTP. Para importar um módulo angular basta fazer o seguinte:

O exemplo acima importa do core do angular 2 a referência para criação de Componentes.

Componentes

Um Component controla aquilo que podemos chamar de view, de acordo com seletores, e pode usar providers, directives e templates. Ele também é um módulo, que para ser usado precisa ser exportado como visto acima.

Veja a baixo o exemplo de um componente:

  • selector: É uma tag HTML em seu arquivo principal (index.html), como a seguinte  <aplicativo></aplicativo> . É nesta tag que o seu aplicativo será construído.
  • templateUrl: É o caminho do arquivo HTML que será usado como view. Pode ser usado somente template, onde deve ser passado uma string com código HTML.
  • directives: Um vetor com os componentes ou diretivas que este componente requer.
  • providers: Um vetor com as dependências para os serviços que serão requiridos pelo componente.

Seu primeiro aplicativo

Com base no que foi abordado construiremos um pequeno aplicativo, usando apenas Angular2.

Estrutura de pasta e arquivos

Nossa pequena aplicação terá a seguinte:

asd.fw

index.html

O arquivo principal da aplicação, que deve conter as configurações para uso do TypeScript com SystemJS, como visto no post TypeScript – executando no browser com SystemJS.

Este arquivo deve ficar da seguinte forma:

Além das configurações do SystemJS, preste atenção na linha 29 do arquivo acima, pois é onde criamos a tag que será usada pelo Angular.

app/main.ts

Este arquivo inicia nossa aplicação Angular 2, usando o componente importado para isso. E usando aquilo que é chamado de bootstrapper que importado do angular.

Note que na linha 2 importamos o app.component que o nosso próximo arquivo.

Antes, note que no arquivo anterior, quando informamos o nome do componente para importar não colocamos a extensão no final (.ts). Isso se dá pelo fato de termos definido nas configurações do SystemJS a defaultExtension como ts.

app/app.component.ts

É o nosso componente, aquele que controla a view, no nosso caso ele conta apenas com as definições do Component e uma classe simples, que tem apenas dois atributos.

Note que nos atributos da classe AppComponent foram definidos tipos, para saber mais sobre tipos de variáveis veja o post TypeScript, ame ou nem ligue.

app/view.html

E por fim a nossa visão. Arquivo simples que deve chamar atenção apenas para a forma como o model do angular é declarado que é diferente do Angular 1.

Testando

  • Para testar o aplicativo abra o que você criou usando o navegador. Ou veja aqui no Plunker.
  • Você pode também clonar ou dar um fork no repositório direto do GitHub.

Finalizando

Por hoje é só pessoal. Fiquem ligados no nosso site, curtam nossa página no Facebook, pois em breve estaremos postando mais sobre Angular2.

2 respostas

  1. Márcio

    Olá, em primeiro lugar parabéns pelas matérias muito claras e objetivas.
    Estou para iniciar o desenvolvimento de um app SPA e pretendo usar Angular mas ainda vou iniciar meus estudo.
    Pretendo soltar a primeira versão do app em dezembro.
    Minha dúvida é se já da para usar o Angular 2 com segurança e estuda-lo ao invés do 1?

    Responder
    • Jayr Alencar

      Oi Márcio, eu particularmente ainda uso Angular 1.5, mas acredito que Angular 2 já está bem maduro. Se você não se sentir a vontade com TypeScript você pode usar o Angular 2 com JavaScript também.

      Responder

Deixe uma resposta

Seu e-mail não será publicado.