Criando uma aplicação web Angular 2

Ao concluir esta sessão o leitor estará apto par construir e executar uma aplicação básica utilizando o framework Angular 2.

O framework Angular 2 foi concebido como uma ferramenta para oferecer maior qualidade e agilidade no desenvolvimento de aplicações web. Uma aplicação Angular 2 é baseada em componente que correspondem à uma combinação de modelos em HTML e classes que controlam partes da tela. Apesar de ser possível o desenvolvimento de todas as funcionalidades proporcionadas pelo Angular 2 em JavaScript grande parte do esforço de desenvolvimento da solução está fundamentado no uso da linguagem TypeScript:

A versão 2 do está baseada em um conceito de modularidade e padrões de desenvolvimento que permitem maior organização da aplicação. Neste trabalho serão utilizadas as boas práticas recomendadas para o desenvolvimento de aplicações, respeitando a nomenclatura dos arquivos e organização de pastas recomendadas pelas principais referências no uso do framework.

É possível implementar aplicações Angular 2 utilizando apenas JavaScript mas grande parte da documentação é baseada em TypeScript e a implementação do framework Demoiselle optou por esta linguagem de programação come referência para o desenvolvimento de aplicações.

Nesta sessão serão explorados conceitos básicos para a criação e execução de uma aplicação capaz de ser executada por um navegador HTTP. Apesar da simplicidade da transpilação de arquivos escritos em TypeScript para JavaScript, a adequação das funcionalidade para seu correto funcionamento nos interpretadores JavaScript dos navegadores demanda algumas configurações.

A arquitetura do Angular 2 é detalhada em https://docs.google.com/document/d/13-LUm1QvOff2631tHz6C4goIHuMzma2_1_PFiLryoIs/edit

Iniciando e carregando as dependências

npn init -f

npm install @angular/common @angular/compiler @angular/core @angular/forms @angular/http @angular/platform-browser @angular/platform-browser-dynamic @angular/router core-js rxjs zone.js reflect-metadata systemjs --save

Para instalar o transpilador, ferramenta que faz a conversão de uma linguagem para outra, da linguagem Typescript para Javascript é necessário instalar a ferramenta typescript na sessão que mantem as informações das dependências para o ambiente de desenvolvimento no arquivo package.json com o comando

npm install typescript typings @types/core-js --save-dev

Criando os arquivos

Arquivo inicial utilizado para carregar as dependências da aplicação, este arquivo é utilizado como referência para a criação da estrutura da aplicação.

main.ts

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

Criar um módulo da aplicação

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

@NgModule é necessário para a configuração de um modelo e compilação e definir como sera criada a injeção de código nos módulos e a importação recursiva dos arquivos necessários para o desenvolvimento da aplicação.

A importação de BrowserModules oferece para a aplicação um conjunto de diretivas para como NgIf e NgFor.

Maiores informações sobre o funcionamento de @NgModule estão disponíveis em https://docs.google.com/document/d/1isijHlib4fnukj-UxX5X1eWdUar6UkiGKPDFlOuNy1U/edit#heading=h.ojlpbvom40mh

Criar um componente do módulo

app.component.ts

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
})

export class AppComponent {
    titulo:string = "Titulo da aplicacação";
    nome:string = "Fulando de tal";
    lista:Array<string>=["Nome 1", "Nome 2", "Nome 3"];
}

Como o componente aponta para um arquivo de modelo será necessário criar o mesmo:

app.component.html

<h1>{{titulo}}</h1>
    <h2>O Nome: {{nome}}
</h2>

<ul>
  <li *ngFor="let item of lista">
    {{item}}
  </li>
</ul>

Para a transpilação do código é possível passar parâmetros para a aplicação por meio da linha de comando que permitem tanto alterar o código gerado quanto resultados relativos ao armazenamento forma de análise, dependências, etc. Para facilitar o uso de parâmetros pelo tsc é possível utilizar um arquivo de configuração com o nome tsconfig.json onde estes parâmetros podem ser armazenados.

Para o nosso exemplo utilizaremos os seguintes parâmetros no tsconfig.json:

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "suppressImplicitAnyIndexErrors":true,
    "rootDir":"src",
    "outDir": "./js"
  },
  "compileOnSave": false,
  "buildOnSave": false
}

Para maiores informações sobre parêmetros consulte https://www.typescriptlang.org/docs/handbook/compiler-options.html

Para gerar o código JavaScript tsc básico basta digitar o comando tsc. Será criada uma pasta chamada js no diretório corrente contendo arquivos .js que realizaram as funcionalidades necessárias a aplicação. Apesar dos arquivos já estarem em um formato de JavaScript os interpretadores dos navegadores não serão capazes de processa-los, é necessário adequar a informação utilizando uma ferramenta capaz de realizar esta tarefa. Neste trabalho será utilizado o programa browserify que pode ser instalado com o seguinte comando:

npm install --global browserify

Na pasta js execute o processo de adequação do conteúdo gerando o arquivo que será importado pela interface HTML com o comando:

browserify main.js -o bundle.js

Para testar o funcionamento da aplicação basta criar um arquivo HTML importando os scripts necessários a execução da aplicação

<!DOCTYPE html>
<html>
    <head>
        <title>Aplicação Simples com Angular 2</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <my-app>Loading...</my-app>
    </body>
    <script src="zone.js"></script>
    <script src="Reflect.js"></script>
    <script src='bundle.js'></script>
</html>

Para finalizar a construção do ambiente copie o arquivo index.html e as dependências para um diretório visível por seu servidor http, no caso do exemplo acima foi criada a pasta angular2.

cp js/bundle.js src/index.html src/app/app.component.html /var/www/html/angular2

cp node_modules/zone.js/dist/zone.js node_modules/reflect-metadata/Reflect.js /var/www/html/angular2

Acesse a aplicação pelo navegador.

Alterando a aplicação

Para alterar apenas o conteúdo html e a interação do mesmo com o script provido pelo angular basta editar o arquivo e copia-lo para o ambiente de produção sem a necessidade de transpilação. No caso de alteração de variáveis ou configurações em arquivos .ts os processos de transpilação e a adequação ao navegador devem ser realizados novamente mas apenas o arquivo js gerado pelo browserify precisa ser copiado para a pasta onde a aplicação está sendo acessada pelo navegador.