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
Top comments (0)