Criando uma Aplicação Simples com Angular

Nos temas anteriores, abordamos informações iniciais sobre Angular, além da instalação e configuração das ferramentas necessárias para trabalhar com o framework. Agora, vamos criar uma aplicação simples do zero.

Vamos criar uma pasta no disco rígido para nossa aplicação. Vamos chamá-la de purchaseapp. Dentro dessa pasta, criaremos um novo arquivo chamado package.json com o seguinte conteúdo:

{
  "version": 1,
  "projects": {
    "helloapp": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/helloapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.json",
            "aot": true
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "helloapp:build"
          }
        }
      }
    }
  }
}

Também adicionaremos um novo arquivo tsconfig.json à pasta do projeto:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "ES2022",
    "moduleResolution": "node",
    "target": "ES2022",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "files": ["src/main.ts"],
  "include": ["src/**/*.d.ts"]
}

Como explicado anteriormente, o arquivo package.json define os pacotes e dependências que serão utilizados no projeto. Já o arquivo tsconfig.json configura o compilador TypeScript.

Usaremos o Angular CLI para gerar build do projeto, por isso, também criaremos o arquivo angular.json na pasta do projeto:

{
  "version": 1,
  "projects": {
    "purchaseapp": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/purchaseapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.json",
            "aot": true
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "purchaseapp:build"
          }
        }
      }
    }
  }
}

Após criar esses três arquivos na pasta do projeto, abra o terminal e navegue até a pasta do projeto com o comando cd:

C:\WINDOWS\system32>cd C:\angular\purchaseapp

Em seguida, execute o comando npm install, que instalará todos os módulos necessários:

C:\angular\purchaseapp>npm install

Após executar esse comando, uma subpasta node_modules aparecerá na pasta do projeto, contendo todas as dependências e pacotes necessários.

Agora, vamos criar a pasta src na pasta do projeto, e dentro dela, a pasta app.

Na pasta src/app, adicione um novo arquivo chamado app.component.ts com o seguinte código:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

class Item {
  purchase: string;
  done: boolean;
  price: number;

  constructor(purchase: string, price: number) {
    this.purchase = purchase;
    this.price = price;
    this.done = false;
  }
}

@Component({
  selector: 'purchase-app',
  standalone: true,
  imports: [FormsModule, CommonModule],
  template: ` 
    <h1>Lista de Compras</h1>
    <div>
      <p>
        <label>Produto</label><br />
        <input [(ngModel)]="text" />
      </p>
      <p>
        <label>Preço</label><br />
        <input type="number" [(ngModel)]="price" />
      </p>
      <button (click)="addItem(text, price)">Adicionar</button>
    </div>
    <table>
      <thead>
        <tr>
          <th>Produto</th>
          <th>Preço</th>
          <th>Comprado</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of items">
          <td>{{ item.purchase }}</td>
          <td>{{ item.price }}</td>
          <td><input type="checkbox" [(ngModel)]="item.done" /></td>
        </tr>
      </tbody>
    </table>
  `,
})
export class AppComponent {
  text: string = '';
  price: number = 0;

  items: Item[] = [
    { purchase: 'Pão', done: false, price: 15.9 },
    { purchase: 'Manteiga', done: false, price: 60 },
    { purchase: 'Batata', done: true, price: 22.6 },
    { purchase: 'Queijo', done: false, price: 310 },
  ];

  addItem(text: string, price: number): void {
    if (text == null || text.trim() === '' || price == null) return;
    this.items.push(new Item(text, price));
  }
}

Aqui, as primeiras linhas do código importam os módulos necessários para o componente, como CommonModule e FormsModule.

No próprio componente, é definido um conjunto inicial de itens que serão exibidos na página:

items: Item[] = [
  { purchase: "Pão", done: false, price: 15.9 },
  { purchase: "Manteiga", done: false, price: 60 },
  { purchase: "Batata", done: true, price: 22.6 },
  { purchase: "Queijo", done: false, price: 310 }
];

Também há um método para adicionar novos itens a essa lista:

addItem(text: string, price: number): void {
  if (text == null || text.trim() === "" || price == null) return;
  this.items.push(new Item(text, price));
}

O template, responsável por exibir os dados da lista items em uma tabela, foi definido diretamente no componente. Em aplicações maiores, é recomendável separar templates extensos em arquivos distintos para facilitar a manutenção do código. No entanto, neste exemplo, vamos mantê-lo no próprio componente.

No template, usamos a diretiva *ngFor para iterar sobre o array items e renderizar as linhas da tabela:

<tr *ngFor="let item of items;">
  <td>{{item.purchase}}</td>
  <td>{{item.price}}</td>
  <td><input type="checkbox" [(ngModel)]="item.done" /></td>
</tr>

Acima da tabela, também há um formulário para adicionar novos itens, e o método addItem() é acionado ao clicar no botão.

No diretório src, criaremos um arquivo main.ts para iniciar o projeto:

import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app/app.component";
bootstrapApplication(AppComponent).catch(e => console.error(e));

Aqui, a função bootstrapApplication é usada para iniciar a aplicação com base no componente AppComponent que definimos.

Por fim, definimos a página principal index.html na pasta src:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Aplicação de Compras</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <purchase-app>Carregando...</purchase-app>
</body>
</html>

Com isso, nossa estrutura de projeto estará pronta:

purchaseapp/
|-- angular.json
|-- package.json
|-- tsconfig.json
|-- node_modules/
|-- src/
    |-- index.html
    |-- main.ts
    |-- app/
        |-- app.component.ts

Agora, podemos executar o projeto. No terminal, navegue até a pasta do projeto e execute o comando:

C:\angular\purchaseapp>ng serve --open

Após executar esse comando, o navegador abrirá automaticamente exibindo a aplicação. Se tudo estiver correto, você verá a lista de compras com os itens definidos no componente:

Lista de compras com os itens definidos no componente