Angular – Criando o Seu Primeiro Projeto

O Angular é uma framework frontend open-source, bastante conhecida e utilizada para construir a interface de aplicações web e também mobile (utilizando Ionic). Essa framework possui um rico conjunto de recursos que juntos são capazes de elevar nossa produtividade a um excelente nível. Inicialmente, o Angular foi chamado de AngularJS, e utilizava Javascript para funcionar, mas depois ele foi completamente reescrito utilizando a linguagem Typescript, que é um super conjunto do Javascript.

Para poder começar a criar uma aplicação em Angular, é preciso que você já tenha o Node instalado na sua máquina. Então, vamos instalar o Angular CLI, que nos dá uma forma simples de fazer várias coisas em nosso projeto. Para instalar o Angular CLI globalmente, abra a linha de comando, e rode o seguinte comando:

npm install -g @angular/cli

ou

npm i -g @angular/cli

Para testar se o Angular CLI foi instalado corretamente, rode o comando ng –version, se tudo estiver correto então irá aparecer informações sobre a versão do Angular e de outras coisas. Tendo instalado o CLI, é hora de rodarmos o primeiro comando, aquele que irá criar o seu projeto:

ng new nome-do-projeto

Depois de teclar Enter e esperar um pouco, algumas informações serão solicitadas pelo terminal. Eu chamei o meu projeto de “primeiro-projeto”, e aqui está a primeira informação solicitada no terminal:

Primeira informação solicitada no terminal, após executar o comando ng new nome-do-projeto.

Ele pergunta primeiramente se queremos instalar já de imediato o sistema de rotas, mas se você está começando a entender o Angular não há necessidade de fazer isso, então você decide sobre a opção que achar mais adequada. Em seguida, ele pergunta sobre que ferramenta de estilo queremos utilizar, sendo que o CSS é selecionado por padrão, e usando as teclas de setas você pode selecionar algum pré-processador CSS, caso você tenha conhecimento de algum deles.

Agora está sendo perguntado ao desenvolvedor qual ferramenta de estilo que ele quer usar em seu projeto, tendo o CSS normal como padrão.

Agora, basta esperar que todos os pacotes necessários ao funcionamento do Angular sejam instalados, o que pode demorar um pouco dependendo da sua máquina. Depois que isso for concluído, digite o comando no terminal para entrar na pasta do projeto criada, no meu caso, primeiro-projeto.

cd primeiro-projeto

Feito isso, para ver o seu projeto funcionando basta digitar o comando:

ng serve --open

A flag –open é opcional, pois basta que no seu navegador você digite o endereço localhost:4200, que é onde a sua aplicação Angular estará rodando. Na primeira vez que você usar esse comando, pode demorar bastante também para que a aplicação seja compilada, mas enquanto você vai fazendo modificações no seu projeto ele vai sendo compilado automaticamente, fazendo live reload, e sendo um processo muito mais rápido.

Por enquanto é apenas isso, em outros posts falarei mais sobre o Angular e sua estrutura, e você pode conferir conferir todos os posts sobre Angular na sua respectiva categoria aqui no site. Visite a documentação oficial para obter informações mais detalhadas.