Iniciando no Angular: Dicas e estrutura inicial

#angular #frontend #beginners #devweb

Se você é um Dev Front-End iniciante que está querendo vir pro lado Angular da força, já está de parabéns só pela decisão acertada. Esse artigo é o primeiro de uma série que tem o intuito de entender e espalhar a palavra desse framework tão amado na comunidade. Boa leitura!

Sumário

Por que Angular?
Iniciando um projeto
Estrutura inicial
Entendendo a inicialização

Por que usar Angular?

Bom, porque ele é melhor. E pronto!

Na verdade, o Angular é um framework robusto que adota uma arquitetura baseada em componentes reutilizáveis e escaláveis, utiliza o TypeScript que é uma linguagem com tipagem estática, possui tudo o que é necessário para o desenvolvimento web como roteamento, validação de formulários, comunicação http e gerenciamento de estado. Sem falar do sistema modular, injeção de dependências e a CLI (interface de linha de comando) integrada que facilita muito no desenvolvimento das aplicações. Já ficou óbvio que ele é o melhor.

Mas vamos entender melhor sua estrutura.

Iniciando o projeto

O primeiro passo é instalar a CLI do Angular na nossa máquina. No terminal você pode digitar o comando:

 npm install -g @angular/cli

Aqui estamos instalando globalmente a versão mais recente da CLI. Após isso pelo terminal escolha um diretório para criar o projeto usando o comando padrão do Angular:

 ng new 'nome do projeto'

O projeto vai começar a ser criado e nesse processo você terá que escolher o formato de estilo que será usado (CSS, SCSS, SASS, LESS) e se o projeto vai usar um sistema de roteamento. No estilo você pode escolher o que mais gosta de utilizar, mas sobre o roteamento, falaremos melhor em outros artigos. Ao final seu projeto vai ser criado com as configurações escolhidas e na versão da CLI instalada.

Mas e se você não quiser instalar a CLI globalmente e nem quiser uma versão fixa do Angular na sua máquina? Nesse caso podemos usar um atalho:

npx -p @angular/cli@16 ng new jornada-coders --style=scss --routing=true

Esse comando significa:

npx: O npx é um executor de pacotes do npm que, me permite nesse caso, criar o projeto com uma versão do Angular que não tenho instalada localmente.
-p @angular/cli@16: Indica o pacote Angular CLI e a versão que vamos utilizar. Nesse caso escolhi a versão 16 mas poderia ser outra por exemplo @angular/cli@13.2.0;
ng new jornada-coders: Esse comando já é conhecido dos devs Angular pois é a forma padrão de iniciar um projeto. Estamos dizendo para criar um novo projeto e o nome dele.
--style=scss: aqui já estou escolhendo que meu projeto vai usar scss que é o que uso normalmente. Se você não colocar nada vai poder escolher antes de o projeto ser criado.
--routing=false: Aqui é similar pois já estou indicando que meu projeto não vai ser criado com um modulo de rotas. Caso você também não coloque essa parte, vai poder que escolher antes do projeto ser criado.

Após isso você terá algo assim:

Um projeto inicial Angular padrão. Entrando na pasta do projeto pelo terminal temos acesso à CLI integrada e digitando o comando ng serve , nossa aplicação será iniciada no endereço padrão do Angular http://localhost:4200/. Abrindo esse link teremos nossa aplicação rodando localmente:

Estrutura inicial

Um projeto Angular é criado com muitos arquivos e pastas mas é uma estrutura fácil de compreender. Vamos ver os principais que são:

src/: É o diretório principal onde o código da aplicação vai ficar.
- app/: É o componente inicial da aplicação e vai conter os demais componentes, módulos e serviços criados. Ele é criado com o padrão do Angular que é um arquivo .html, um de estilo .scss, um de script .ts, um de teste .spec.ts e um módulo.
- app.module.ts: Esse é o módulo raiz que declara e importa os componentes e outros módulos que serão criados na aplicação.
- assets/: Pasta para armazenar imagens e outros recursos.
- styles.scss: É o arquivo raiz de estilos da aplicação.
- index.html: É o arquivo HTML raiz da aplicação. É ele que será exibido no navegador.
- main.ts: Arquivo raiz de script da aplicação. É ele que vai iniciar o projeto.
angular.json: Esse é o arquivo de configuração que define como a CLI deve construir e compilar o projeto. Contém as informações principais da aplicação.
package.json: Lista as dependências e scripts do projeto.
tsconfig.json: É um arquivo de configuração do TypeScript, que contém as configurações do compilador.

Entendendo a inicialização

Agora que entendemos os principais arquivos vamos entender como o Angular inicializa a aplicação. Vamos apagar tudo no arquivo app.component.html e vamos colocar o clássico <h1>Hello World!</h1>. Ao subir a aplicação novamente podemos ver a mudança.

Mas se temos um arquivo index.html que é a entrada da aplicação, por que o que colocamos no app.component é que aparece no navegador? Na verdade o que está acontecendo é:

1- Primeiro o Angular encontra o arquivo index.html, que contém no <body>, apenas um seletor que é o <app-root></app-root>. É nesse seletor que vai ser injetado o conteúdo principal da aplicação.

</h1>`. Ao subir a aplicação novamente podemos ver 
    <meta charset="utf-8" />
    <title>JornadaCoders</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

2 - O Angular define qual é o componente inicial da aplicação através da propriedade bootstrap no app.module.ts. Vamos entender esse módulo:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Um módulo é uma classe TypeScript decorada com a anotação NgModule. Nela agrupamos componentes, services, diretivas deixando tudo organizado e modularizado, pois em cada módulo, precisamos configurar apenas o que é preciso naquela parte da aplicação. Aqui vemos o módulo raiz então ele vai lidar com as configurações globais da aplicação como inicialização e importação de outros módulos que ficarão disponíveis globalmente. Ele possui algumas propriedades que são:

declarations:
- Aqui declaramos componentes, diretivas ou serviços desse mesmo módulo. Nesse caso o AppComponent.
imports:
- Aqui listamos os módulos que estamos importando, podendo assim usar seus componentes ou diretivas no nosso. Nesse caso só estamos importando o BrowserModule que é um módulo necessário para que nossa aplicação funcione em navegadores. Ele só precisa ser importado nesse módulo raiz.
providers:
- Aqui colocamos os serviços que serão fornecidos pelo módulo. Esses serviços ficarão disponíveis para injeção de dependência em todo o módulo e nos módulos que o importam. Nesse caso não temos nada então podemos deixar vazio.
bootstrap:
- E por fim, aqui colocamos os componentes que são carregados ao iniciar a aplicação. Devemos colocar essa propriedade apenas no módulo raiz. E essa é a propriedade responsável por injetar algo no seletor <app-root> do arquivo index.html. Nela estamos dizendo que o componente a ser carregado ao iniciar a aplicação é o AppComponent. Sendo assim o Angular vai injetar esse componente no <app-root>, e o que colocarmos no AppComponent vai ser mostrado no navegador.

E é assim que o Angular funciona. Ele parte do módulo principal para iniciar a aplicação e a partir dele, podemos criar outros módulos, páginas, componentes, serviços. Tudo vai sempre seguir essa estrutura modularizada e organizada tornando a construção e a manutenção de uma aplicação fácil, eficiente e concisa. Espero ter conseguido mostrar como é simples esse início e atiçado sua curiosidade. Te aguardo nos próximos artigos!