DEV Community

Cover image for Angular para leigos (parte 2)
André Rodrigues
André Rodrigues

Posted on

Angular para leigos (parte 2)

Angular é um framework muito poderoso para criar aplicações web. Uma de suas características mais marcantes é a capacidade de dividir a aplicação em componentes reutilizáveis. Neste post, vamos dar uma olhada em como criar componentes em Angular e usar boas práticas de HTML e SCSS.

Criando um componente

Para criar um componente em Angular, você deve usar o comando ng generate component. Esse comando criará uma pasta com o nome do componente e alguns arquivos dentro dela. O arquivo mais importante é o arquivo .ts, que contém a lógica do componente. O arquivo .html contém o template do componente e o arquivo .scss contém os estilos do componente.

Aqui está um exemplo de como criar um componente chamado meu-componente:

ng generate component meu-componente

Depois de executar esse comando, o Angular criará uma pasta chamada meu-componente com vários arquivos dentro, são eles arquivo html, scss e arquivos typescript para lógica e testes.

Adotando boas práticas para o HTML de nossos componente

Ao criar o template do componente, você deve seguir algumas boas práticas para garantir que ele seja fácil de ler e manter.

Use tags semânticas

Sempre que possível, use tags semânticas para descrever o conteúdo do seu componente. Por exemplo, em vez de usar uma div genérica, use tags como header, section, article, footer, etc.

Use os atributos data-

Use atributos data- para fornecer informações adicionais sobre o seu componente. Esses atributos não afetam a funcionalidade do componente, mas podem ser úteis para fins de estilo ou análise.

`

Título do meu componente


Conteúdo do meu componente

Rodapé do meu componente


`

Por hoje encerramos a nossa segunda parte, mas em nossa terceira parte iremos conhecer sobre as diretivas do Angular, espero que tenham gostado do post de hoje. Grande abraço e até o próximo.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Instrument, monitor, fix: a hands-on debugging session

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️