O que é Angular e como iniciar o Primeiro Projeto

Angular é um framework desenvolvido pela Google para a criação de aplicações cliente. Ele é principalmente voltado para o desenvolvimento de soluções SPA (Single Page Application), ou seja, aplicações de página única. Nesse sentido, o Angular é o sucessor do framework AngularJS. No entanto, Angular não é apenas uma nova versão do AngularJS, mas sim um framework completamente novo.

Angular oferece funcionalidades como vinculação bidirecional, que permite alterar dinamicamente os dados em uma parte da interface ao modificar os dados do modelo em outra, além de templates, roteamento, entre outros recursos.

Uma das principais características do Angular é o uso do TypeScript como linguagem de programação. Por isso, antes de começar, é recomendado se familiarizar com os fundamentos dessa linguagem, que você pode aprender aqui.

No entanto, não estamos limitados ao TypeScript. Se desejado, podemos escrever aplicações Angular utilizando linguagens como Dart ou JavaScript. Ainda assim, o TypeScript é a linguagem principal para o Angular.

No momento da escrita deste artigo, a versão mais recente do Angular é a 18, lançada em 2024. O repositório oficial do framework no GitHub é: https://github.com/angular/angular. Lá, você pode encontrar os arquivos-fonte, além de informações adicionais.

Começando com Angular

Para trabalhar com Angular, é necessário instalar o Node.js e o gerenciador de pacotes npm, caso ainda não estejam instalados na sua máquina. Não é necessário conhecimento avançado de NodeJS e npm. A instalação pode ser feita usando o instalador do Node.js, que também instala o npm.

Vale lembrar que o Angular é compatível com as versões do Node.js que estão no status "Active LTS" ou "Maintenance LTS". No momento da escrita deste artigo, essas versões são a 18, a 20 e a 22. Portanto, se o Node.js já estiver instalado, mas em uma versão mais antiga ou, ao contrário, mais nova que ainda não é suportada, é aconselhável atualizá-lo. Você pode verificar a compatibilidade das versões do Node.js (assim como das versões do TypeScript e da biblioteca RxJS) para determinadas versões do Angular em: https://angular.dev/reference/versions.

O mesmo vale para o npm. Se a versão for muito antiga ou, ao contrário, uma das mais recentes, o Angular pode não suportá-la. Ao trabalhar com Angular, é melhor confiar na versão do npm que vem com a versão LTS do Node.js.

Instalando o Angular CLI

Para compilar a aplicação, utilizaremos a infraestrutura do Angular CLI. O Angular CLI simplifica a criação e compilação de aplicações. O Angular CLI é distribuído como um pacote npm, portanto, para utilizá-lo, é necessário instalá-lo primeiro. Para instalar o Angular CLI, abra o console/linha de comando e execute o seguinte comando:

npm install -g @angular/cli

Esse comando instalará o pacote @angular/cli como um módulo global, o que significa que, ao criar novos projetos Angular no futuro, não será necessário instalá-lo novamente.

O mesmo comando pode ser usado para atualizar o Angular CLI quando uma nova versão do framework for lançada. Você pode verificar a versão do CLI no console/linha de comando com o comando:

ng version

Se o Angular CLI já estiver instalado, você pode atualizá-lo com o comando:

ng update

Ao trabalhar no Windows e executar comandos no PowerShell em vez da linha de comando, é importante considerar que, por padrão, a execução de scripts no PowerShell está desativada. Para permitir a execução de scripts PowerShell (necessário para o npm), execute o seguinte comando:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Criando a primeira aplicação

Depois de instalar as ferramentas necessárias, vamos criar uma aplicação simples. Para isso, crie uma pasta no disco rígido que servirá como diretório do projeto. Vamos chamá-la de helloapp.

Na pasta do projeto, vamos criar um novo arquivo package.json com o seguinte conteúdo:

{
  "name": "helloapp",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build"
  },
  "author": "Programício",
  "dependencies": {
    "@angular/common": "^18.2.0",
    "@angular/compiler": "^18.2.0",
    "@angular/core": "^18.2.0",
    "@angular/forms": "^18.2.0",
    "@angular/platform-browser": "^18.2.0",
    "@angular/platform-browser-dynamic": "^18.2.0",
    "@angular/router": "^18.2.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.10"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.2.1",
    "@angular/cli": "^18.2.1",
    "@angular/compiler-cli": "^18.2.0",
    "typescript": "~5.5.2"
  }
}

Este arquivo configura os pacotes e dependências que serão usados no projeto. Na seção dependencies, são definidos principalmente os pacotes do Angular necessários para a aplicação funcionar. Na seção devDependencies, estão listados apenas os pacotes que serão utilizados para desenvolvimento, como os pacotes para trabalhar com TypeScript (já que escreveremos o código da aplicação em TypeScript) e os pacotes necessários para compilar a aplicação usando a infraestrutura do Angular CLI.

Na seção scripts, estão descritos os comandos que serão usados. Especificamente, o comando ng serve inicia um servidor web simples para testar a aplicação e a própria aplicação. O comando ng build compila a aplicação.

Em seguida, abra a linha de comando (terminal) e navegue até a pasta do projeto usando o comando cd. Por exemplo:

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

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

C:\angular\helloapp>npm install

Após a execução desse comando, uma subpasta node_modules deve aparecer na pasta do projeto, contendo todas as dependências e pacotes necessários.

Definindo a aplicação

Agora, vamos criar uma subpasta chamada src dentro da pasta do projeto. Essa subpasta conterá todos os arquivos-fonte. Em seguida, dentro da pasta src, vamos criar o subdiretório app.

Criando um componente Angular

Os componentes são os blocos de construção principais de uma aplicação Angular. Toda aplicação Angular tem, no mínimo, um componente. Portanto, vamos criar um novo arquivo na pasta src/app, chamá-lo de app.component.ts e definir o seguinte código para o componente:

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";
        
@Component({
    selector: "my-app",
    standalone: true,
    imports: [FormsModule],
    template: `Digite seu nome:
                <input [(ngModel)]="name" placeholder="nome">
                <h1>Bem-vindo, {{name}}!</h1>
})
export class AppComponent { 
    name= "";
}

No início do arquivo, é definida a diretiva import, que importa a funcionalidade do módulo @angular/core, fornecendo acesso à função decoradora @Component. Também importamos o módulo FormsModule, necessário para trabalhar com campos de entrada.

Em seguida, vem a função decoradora @Component, que associa metadados à classe do componente AppComponent. Essa função recebe um objeto de configuração com vários parâmetros:

• O parâmetro selector define o seletor CSS para o elemento HTML que representará o componente. Neste caso, o seletor é "my-app". Ou seja, na página web da aplicação, deve haver um elemento <my-app>, e esse elemento carregará a aplicação Angular.

• O parâmetro standalone: true indica que o componente será independente, ou seja, não será necessário criar módulos adicionais para ele, o que simplifica o código da aplicação.

• O parâmetro imports importa outros módulos para o componente. Módulos externos podem conter várias funcionalidades que podemos utilizar. Por exemplo, neste caso, usaremos um campo de entrada onde o usuário poderá digitar seu nome. Para trabalhar com esse campo de entrada, importamos o módulo FormsModule para o componente.

• O parâmetro template representa o template ou a parte visual do componente, ou seja, o que veremos no navegador. No template, há um campo de entrada onde o usuário digitará seu nome. E no cabeçalho h1, o valor digitado será exibido. Para conectar o campo de entrada ao cabeçalho, aplicamos a vinculação bidirecional do campo com a expressão [(ngModel)]="name" e {{ name }} a um modelo name.

Por fim, o código exporta a classe do componente AppComponent, onde é definida a variável name, que nesse caso é uma string vazia.

Executando a aplicação

Agora, precisamos informar ao Angular como executar nossa aplicação. Para isso, criaremos um arquivo main.ts na pasta src (um nível acima do arquivo app.component.ts) com o seguinte conteúdo:

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

Esse código inicializa a aplicação usando o componente AppComponent definido anteriormente. Em caso de erros, eles serão exibidos no console.

Criando a Página Principal

Em seguida, vamos definir a página principal index.html da aplicação dentro da pasta src:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
    <my-app>Carregando...</my-app>
</body>
</html>

No elemento <body>, definimos o elemento <my-app>, onde a aplicação Angular será carregada.

Definindo a Configuração

Como estamos utilizando TypeScript para definir o código da aplicação, também precisamos criar um novo arquivo tsconfig.json na pasta raiz 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"]
}

Esse arquivo define as configurações para o compilador TypeScript. A opção "compilerOptions" define os parâmetros de compilação, enquanto a opção "files" especifica os arquivos a serem compilados. Nesse caso, estamos compilando o arquivo principal da aplicação, main.ts, que conecta todos os outros arquivos da aplicação.

Arquivo angular.json

Para compilar a aplicação, utilizaremos o Angular CLI. Portanto, precisamos definir o comportamento do CLI criando um arquivo angular.json na pasta raiz do projeto:

{
"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"
          }
        }
      }
    }
  }
}

Vamos passar brevemente pela estrutura do arquivo:

• O parâmetro "version" especifica a versão da configuração do projeto.

• A seção "projects" define as configurações para cada projeto:

  • "projectType": indica que o projeto é uma aplicação que pode ser executada no navegador.

  • "root": especifica a pasta de arquivos do projeto em relação ao ambiente de trabalho. Um valor vazio corresponde à pasta raiz do projeto, já que o ambiente de trabalho e o diretório do projeto coincidem.

  • "sourceRoot": define a pasta raiz dos arquivos de código-fonte, que no nosso caso é a pasta src, onde todos os arquivos da aplicação estão localizados.

  • "architect": configura as opções de construção do projeto. No arquivo package.json, definimos os comandos build e serve, e para cada um desses comandos há configurações específicas na seção "architect".

    Para cada comando, é definido um parâmetro builder, que especifica a ferramenta para construir o projeto. Para o comando "build", o valor é "@angular-devkit/build-angular:browser", que usa o pacote webpack para a construção. Para o comando "serve", o valor é "@angular-devkit/build-angular:dev-server", que inicia um servidor web e implanta a aplicação compilada nele.

    O parâmetro "options" define as opções de construção dos arquivos. Para o comando "build", estão definidas as seguintes opções:

    • "outputPath": caminho onde a aplicação compilada será publicada.

    • "index": caminho para a página principal da aplicação.

    • "main": caminho para o arquivo principal da aplicação, onde o Angular é iniciado.

    • "polyfills": caminho para os arquivos de polyfills, neste caso, "zone.js".

    • "tsConfig": caminho para o arquivo de configuração do TypeScript.

    • "aot": indica se a compilação AOT (Ahead-Of-Time) será utilizada. Neste caso, o valor true significa que ela será utilizada.

    Para o comando "serve", é especificada apenas uma opção: buildTarget, que contém uma referência para a configuração do comando build - "helloapp:build". Ou seja, essa opção utiliza a mesma configuração do comando build.

Estrutura do Projeto

Após a configuração, o projeto terá a seguinte estrutura:

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

Executando o Projeto

Agora que tudo está configurado, podemos executar o projeto. Para isso, no terminal, navegue até a pasta do projeto com o comando cd e execute o comando ng serve:

C:\WINDOWS\system32>cd C:\angular\helloapp
C:\angular\helloapp>ng serve --open

A saída do comando deve ser semelhante a:

** Angular Live Development Server is listening on localhost:55573, open your browser on http://localhost:55573/ **

√ Compiled successfully.

O terminal exibirá informações sobre os arquivos gerados e seus tamanhos. Além disso, mostrará o endereço onde o servidor web de teste está rodando - por padrão, será http://localhost:4200/. Se utilizarmos a flag --open, como no exemplo acima, o Angular CLI abrirá automaticamente o navegador com a aplicação em execução. Agora podemos interagir com a aplicação:

Na interface da aplicação, ao inserir um nome no campo de texto, ele será exibido imediatamente no cabeçalho.

É importante destacar que, enquanto a aplicação estiver rodando, podemos modificar o código, e o Angular CLI recompilará e reiniciará a aplicação quase instantaneamente.