Conhecendo o framework Angular
Tags: angular, frontend, framework
Published: 2021-10-07 13:59:58

![Angular logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ao4f4b65svz5rbh83c0t.png)
# O que é esse tal Angular?
Angular é um framework JavaScript de código aberto amplamente usado para o desenvolvimento de Single Page Applications (SPA) mas que também pode ser usado em aplicações completas que fazem requisições a um servidor. (Procure mais sobre a stack MEAN -- MongoDB, Express.js, Angular e Node.js, uma solução inteira escrita em JavaScript)

# Por que aprender Angular?
Se pensarmos em frameworks e sua curva de aprendizado, podemos dizer que Vue é um framework relativamente fácil de aprender, seguido de ReactJS (que tecnicamente é uma lib), e depois vem o Angular. Então por que eu aprenderia Angular e não outro framework?

Angular é um framework bem completinho. Ele vem com algumas bibliotecas já incluídas, como router e http, por exemplo. Ele tem Typescript integrado, mas você não precisa escrever em Typescript se não quiser. Angular é muito usado nas grandes empresas para construção de aplicações mais robustas, por ter uma estrutura mais bem definida que outros frameworks, o que o faz mais fácil de manter. Angular também é baseado em componentes, assim como outros frameworks. Além de tudo isso, quem está por trás do Angular é ninguém menos que o time da Google.

# O que preciso saber pra aprender Angular?
Assim como com outros frameworks, é recomendável que você já tenha familiaridade com HTML, CSS e os fundamentos de JavaScript, incluindo programação assíncrona, métodos de array, requisições HTTP, Fetch API e como usar o npm (gerenciador de pacotes do Node).

#Já sei tudo isso, o que faço agora?
Pra começar a criar projetos com Angular, instalamos sua interface de linha de comando (CLI) através do terminal, usando o comando abaixo:
`$npm install -g @angular/cli`
Depois de instalar, confira se a instalação deu certo com o comando `ng --version`, se ele retornar a versão, deu tudo certo.

Pronto, podemos começar a criar projetos em Angular! Pra isso, entre pelo terminal na pasta onde você quer criar o projeto e use o comando `ng new nome-projeto`. Durante a criação, a CLI vai te perguntar se você quer criar um projeto usando o sistema de rotas (responda que não, por enquanto) e qual tipo de arquivo você vai usar pras folhas de estilo (CSS, SCSS, SASS - escolha o que você quiser usar). Vai demorar um bocadinho pra criar o projeto, mas vai dar certo, tenha fé.

Com o projeto criado, mude pro diretório com o nome do projeto e digite o comando `ng serve --open`. Esse comando vai dar build na sua aplicação, iniciar o servidor de desenvolvimento e abrir sua aplicação no navegador, no endereço `http://localhost:4200/`. Abriu? Deu tudo certo! Agora você tem a estrutura base do seu projeto Angular. Abra a pasta do projeto no editor de código que você usa. 

# A estrutura de um projeto Angular
Como eu disse antes, o Angular é bem estruturado, o que quer dizer que cada componente tem suas partes bem definidas: lógica, estilização e marcação, separadas em arquivos .ts, .css (também é possível usar preprocessadores css) e .html. Além disso, suas aplicações são separadas em módulos e cada módulo tem seu conjunto de componentes, serviços e outros arquivos que compartilham o escopo do módulo. Toda aplicação Angular tem pelo menos um módulo: o raiz, `AppModule` que está no arquivo `app.module.ts`. Mas projetos maiores terão outros módulos, pra que haja uma divisão das responsabilidades na aplicação e facilite a sua manutenção.

Você pode editar o `app.component.html`, apagar seu conteúdo e digitar a seguinte linha: `<h1>Hello World</h1>` e você verá no navegador essas alterações. Já dá pra começar a se divertir!

Pra aprender mais sobre o Angular, recomendo dar uma olhada na sua documentação em [angular.io](https://angular.io/)