O Angular se tornou rapidamente um dos frameworks mais populares para a criação de aplicativos web, graças ao seu conjunto robusto de recursos e à facilidade de uso. Mas como você o utiliza?

Hoje, abordaremos tudo o que você precisa saber sobre o Angular, desde seu histórico e sua importância no desenvolvimento web até um guia passo a passo sobre como instalá-lo em vários sistemas operacionais. Não há tempo a perder, então vamos começar.

O que é Angular?

Angular website
Angular.

O Angular é um framework de aplicativos web de código aberto desenvolvido pelo Google em 2010. Ele se baseia no TypeScript, um superconjunto de JavaScript com tipagem estática que adiciona tipos opcionais e outros recursos para um código mais robusto e de fácil manutenção.

O Angular tem uma arquitetura baseada em componentes, o que significa que os aplicativos são criados usando componentes reutilizáveis que podem ser facilmente integrados a um aplicativo maior. Essa abordagem permite uma melhor organização, manutenção e escalabilidade de seus projetos.

Alguns dos principais recursos do Angular incluem:

  • É baseado em componentes
  • Foco na escalabilidade e na capacidade de manutenção
  • Forte suporte para vinculação de dados bidirecional e injeção de dependência
  • Um conjunto abrangente de diretivas e serviços integrados

Quem usa Angular?

O Angular é uma escolha popular entre vários tipos de desenvolvedores, incluindo:

Muitas empresas importantes também usam o Angular em seus projetos devido ao seu poder e flexibilidade.

Algumas dessas empresas incluem:

  • Google: Não é surpresa que o Google, o criador do Angular, também seja um de seus maiores usuários. O Google usa o Angular em vários produtos, como o Google AdWords, o Google Cloud Platform e o pacote Google Analytics.
  • Microsoft: A Microsoft adotou o Angular para vários de seus produtos, incluindo o popular editor de código Visual Studio Code, que foi criado usando o Angular e outras tecnologias web. Além disso, a Microsoft integrou o Angular à sua plataforma Azure para criar e implantar aplicativos em nuvem.
  • IBM: Outra grande empresa de tecnologia que adotou o Angular em seus projetos foi a IBM, que usou o Angular em sua plataforma de suporte ao cliente.
  • PayPal: A principal plataforma global de pagamentos on-line escolheu o Angular para seus projetos de desenvolvimento web. O produto PayPal Checkout da empresa, que permite que as empresas aceitem pagamentos on-line com segurança, foi desenvolvido usando o Angular, demonstrando a capacidade do framework de lidar com aplicativos seguros e de grande escala.
  • Upwork: A popular plataforma de freelancer que conecta empresas a profissionais também utiliza o Angular para suas necessidades de desenvolvimento web. A Upwork Talent Platform da empresa foi criada usando o Angular, demonstrando os recursos da framework na criação de uma interface responsiva e fácil de usar para gerenciar projetos e contratar freelancers.
  • Lyft: A plataforma de compartilhamento de caronas usa o Angular para o desenvolvimento de seus aplicativos web. A plataforma Lyft Business da empresa, que fornece soluções de transporte para empresas e organizações, foi criada usando o Angular, demonstrando a capacidade do framework de criar aplicativos escaláveis e robustos para diversos setores.

Com uma variedade tão grande de empresas adotando o Angular, fica claro que esse framework poderoso é uma excelente opção para projetos de desenvolvimento web de todos os tamanhos e complexidades.

Vantagens de usar o Angular

Antes de nos aprofundarmos no processo de instalação, vamos discutir brevemente algumas das principais vantagens de usar o Angular em seus projetos de desenvolvimento da Web:

O design baseado em componentes promove a reusabilidade

A arquitetura baseada em componentes do Angular incentiva os desenvolvedores a criar componentes modulares e reutilizáveis que podem ser facilmente integrados em aplicativos maiores. Essa abordagem não apenas torna seu código mais organizado, mas também promove a reutilização, o que pode economizar tempo e esforço a longo prazo.

Forte suporte ao TypeScript

O TypeScript, o superconjunto de JavaScript com tipagem estática, é uma parte essencial do Angular. Os tipos opcionais e outros recursos do TypeScript facilitam a criação de código robusto e de fácil manutenção, o que é especialmente importante para projetos de grande escala.

Ênfase na arquitetura modular

O foco do Angular na modularidade significa que seus aplicativos podem ser facilmente organizados em partes menores e mais gerenciáveis. Isso simplifica o dimensionamento de seus projetos, bem como sua manutenção e atualização ao longo do tempo.

Suporte integrado para programação reativa

Angular includes support for reactive programming.
Biblioteca de extensões React.

O Angular tem suporte integrado para programação reativa por meio da biblioteca RxJS. A programação reativa é um paradigma poderoso que permite que você trabalhe com fluxos de dados assíncronos, facilitando a manipulação de fluxos de dados complexos e interações de usuários em seus aplicativos.

Ecossistema e ferramentas robustos

O Angular conta com um rico ecossistema de ferramentas, bibliotecas e recursos para ajudar você a aproveitar ao máximo o framework. Desde a CLI (Command Line Interface) do Angular até a ampla coleção de bibliotecas de terceiros, você terá tudo o que precisa para criar, testar e implantar seus aplicativos com facilidade.

Pré-requisitos do Angular

Antes de você começar a instalar o Angular, é essencial ter alguns conhecimentos e ferramentas básicos. Aqui está uma lista de pré-requisitos com os quais você deve estar familiarizado:

  • Conhecimento básico de JavaScript: O Angular foi desenvolvido em JavaScript, portanto, é fundamental que você tenha um sólido conhecimento da linguagem. Se você for novato em JavaScript, talvez seja melhor aprimorar suas habilidades primeiro.
  • Familiaridade com a linha de comando/terminal: Durante todo o processo de instalação e ao usar o Angular, você precisará trabalhar com a linha de comando (no Windows) ou com o terminal (no macOS e no Linux). Para que você possa começar a usar o Angular, é essencial conhecer os comandos básicos e a navegação.
  • Familiaridade com o TypeScript (opcional): Embora não seja estritamente necessário, ter um conhecimento básico de TypeScript pode ser útil quando você trabalha com o Angular, pois o framework é desenvolvido em TypeScript. Você pode saber mais sobre o TypeScript na documentação oficial.
  • Node.js e npm instalados: O Angular requer que o Node.js e o Node Package Manager (npm) estejam instalados em seu sistema. Se ainda não os tiver instalado, você pode seguir as instruções do nosso guia sobre como instalar o Node.js.

Requisitos do sistema

Antes de instalar o Angular em seu computador, é essencial garantir que seu sistema atenda aos seguintes requisitos:

  • Sistema operacional: Windows 10, macOS 10.10 (Yosemite) ou posterior, ou uma distribuição recente do Linux (como o Ubuntu 18.04 ou posterior)
  • Memória: Pelo menos 4 GB de RAM
  • Espaço de armazenamento: Pelo menos 10 GB de espaço livre em disco

Esses requisitos garantem que o Angular seja executado sem problemas em seu sistema e que você possa desenvolver e testar seus aplicativos com eficiência.

Como instalar o Angular

O processo de instalação do Angular é muito semelhante nos sistemas operacionais Windows, macOS e Linux. No entanto, ainda é uma boa ideia seguir as instruções específicas do seu sistema para obter os melhores resultados.

Como instalar o Angular no Windows

Nesta seção, orientaremos você no processo de instalação do Angular em uma máquina Windows. Siga as etapas abaixo para colocar o Angular em funcionamento em seu sistema:

  1. Instale o Node.js e o npm
  2. Instale a CLI do Angular
  3. Execute comandos da CLI do Angular
  4. Crie um espaço de trabalho para o aplicativo
  5. Execute o Angular em seu navegador

Etapa 1: Instale o Node.js e o npm

Antes de instalar o Angular, você precisará ter o Node.js e o npm (Node Package Manager) instalados em seu computador. Novamente, se você ainda não os instalou, siga as instruções do nosso guia sobre como instalar o Node.js.

Etapa 2: Instale a CLI do Angular globalmente

Em seguida, você precisará instalar a ferramenta Angular CLI. Para instalar a CLI do Angular globalmente em seu sistema, abra o prompt de comando e execute o seguinte comando:

npm install -g @angular/cli

Esse comando instala a versão estável mais recente da ferramenta CLI do Angular e a torna disponível para uso em todo o sistema.

Etapa 3: Execute comandos da CLI do Angular

Depois de instalar a CLI do Angular, você pode usar seus comandos para gerenciar seus projetos do Angular. Para verificar se a instalação foi bem-sucedida, execute o seguinte comando no prompt de comando:

ng --version

Esse comando exibe a versão instalada da CLI do Angular, juntamente com outras informações relevantes sobre seu ambiente.

Etapa 4: Crie um espaço de trabalho inicial para o aplicativo

Para criar um novo aplicativo Angular, você precisará criar um espaço de trabalho. Um espaço de trabalho é um diretório que contém os arquivos de configuração e o código-fonte de seus projetos do Angular. Para criar um novo espaço de trabalho, execute o seguinte comando no prompt de comando, substituindo my-app pelo nome desejado para o seu aplicativo:

ng new my-app

Esse comando cria um novo diretório com o nome especificado, define os arquivos de configuração necessários e gera um aplicativo Angular inicial dentro do espaço de trabalho.

Etapa 5: Execute o aplicativo Angular em seu navegador

Para testar seu novo aplicativo Angular, navegue até o diretório recém-criado usando o comando cd:

cd my-app

Em seguida, inicie o servidor de desenvolvimento executando o seguinte comando:

ng serve

Esse comando compila seu aplicativo Angular e inicia um servidor de desenvolvimento. Por padrão, o servidor é executado na porta 4200.

Abra o navegador web de sua preferência e navegue até http://localhost:4200/. Você deverá ver seu novo aplicativo Angular em execução no navegador.

Angular running in a Windows-based web browser post-installation.
Angular em execução em um navegador web baseado no Windows após a instalação.

Parabéns! Você instalou o Angular com êxito em seu computador Windows e criou seu primeiro aplicativo Angular. Agora você pode começar a criar seus projetos.

Como instalar o Angular no macOS

Nesta seção, orientaremos você no processo de instalação do Angular em um computador macOS. Siga estas etapas para colocar o Angular em funcionamento em seu sistema:

  1. Instale o Node.js e o npm
  2. Instale a CLI do Angular globalmente
  3. Teste se o Angular foi instalado corretamente
  4. Crie um aplicativo do Angular
  5. Execute o aplicativo

Etapa 1: Instale o Node.js e o npm (se ainda não estiverem instalados)

Como mencionado anteriormente, você precisa ter o Node.js e o npm instalados em seu computador antes de instalar o Angular. Se você já os tiver, prossiga para a etapa 2. Caso contrário, siga primeiro o nosso guia de instruções e, em seguida, continue com este tutorial.

Etapa 2: Instale a CLI do Angular globalmente

Da mesma forma que nas instruções do Windows, você precisa instalar a CLI do Angular, que é o que você precisa para criar (e gerenciar) aplicativos Angular. Para fazer isso, abra o Terminal e execute o seguinte comando:

npm install -g @angular/cli

Ao executar esse comando, você pode instalar a versão estável mais recente da ferramenta Angular CLI e acessá-la em seu sistema.

Etapa 3: Teste se o Angular está instalado corretamente

Depois de instalar a CLI do Angular, você pode utilizar seus comandos para gerenciar projetos do Angular. Para confirmar se a instalação foi bem-sucedida, execute o comando a seguir no Terminal:

ng --version

Você deverá ver a versão da CLI do Angular exibida.

Etapa 4: Crie um aplicativo do Angular

Para iniciar um novo aplicativo Angular, você precisa primeiro criar um espaço de trabalho. Isso envolve a criação de uma pasta que armazenará os arquivos de configuração e o código-fonte de seus projetos do Angular. Para criar o espaço de trabalho, abra o Terminal e digite o código abaixo. Mas, assim como nas instruções para Windows e macOS, lembre-se de substituir “my-app” pelo nome que você preferir para o seu aplicativo.

ng new my-app

Esse comando executa três tarefas: cria um novo diretório com um nome especificado, define os arquivos de configuração necessários e gera um aplicativo Angular inicial dentro do espaço de trabalho.

Etapa 5: Execute o aplicativo

Para verificar seu novo aplicativo Angular, use o comando cd para acessar o diretório em que ele foi criado.

cd my-app

Em seguida, inicie o servidor de desenvolvimento executando o seguinte comando:

ng serve

Para compilar seu aplicativo Angular e iniciar um servidor de desenvolvimento, use este comando. Por padrão, o servidor será executado na porta 4200.

Abra seu navegador web favorito e acesse http://localhost:4200/ para ver seu novo aplicativo Angular.

E isso é tudo o que você precisa fazer. Agora você tem o Angular instalado no macOS e criou um aplicativo Angular com êxito.

Como instalar o Angular no Linux

Por fim, vamos guiar você pelo processo de instalação do Angular em um computador com Linux.

Siga estas etapas para que você possa colocar o Angular em funcionamento rapidamente:

  1. Instale o Node.js e o npm
  2. Instale a CLI do Angular
  3. Crie um novo aplicativo do Angular
  4. Teste o aplicativo em seu navegador

Etapa 1: Instale o Node.js e o npm (se ainda não estiverem instalados)

Assim como nas instruções para Windows e Mac, você precisa ter o Node.js e o npm instalados antes de obter o Angular em seu computador Linux. Dê uma olhada no nosso guia de instalação detalhado para saber como fazer isso ou prossiga para a próxima etapa se você já tiver feito isso.

Etapa 2: Instale a CLI do Angular com o gerenciador de pacotes npm

O próximo passo é instalar a CLI do Angular em seu sistema. Para fazer isso, abra uma janela do Terminal e digite o comando abaixo:

npm install -g @angular/cli

Ou, em vez disso, você pode usar o seguinte:

$ sudo npm install -g @angular/cli

Esse comando instala a versão estável mais recente da ferramenta Angular CLI e a torna disponível para uso em todo o sistema.

Etapa 3: Crie um novo projeto do Angular

Para criar um novo aplicativo Angular, você precisará criar um espaço de trabalho. Um espaço de trabalho é um diretório que contém os arquivos de configuração e o código-fonte de seus projetos do Angular. Para criar um novo espaço de trabalho, execute o seguinte comando no Terminal, substituindo my-app pelo nome desejado para o seu aplicativo:

ng new my-app

Esse comando cria um novo diretório com o nome especificado e define os arquivos de configuração necessários para ele. Ele também gera um aplicativo Angular inicial.

Etapa 4: Teste o novo aplicativo em um navegador web

Para testar seu novo aplicativo Angular, navegue até o diretório recém-criado usando o comando cd:

cd my-app

Em seguida, digite o seguinte:

ng serve

O servidor é executado na porta 4200, portanto, para acessá-lo, você precisará abrir um navegador da web e ir para http://localhost:4200/.

Se tudo tiver ocorrido corretamente, você deverá ver seu novo aplicativo Angular no navegador.

E com isso, agora você tem o Angular instalado no Linux. Não há como dizer o que você pode fazer a seguir!

Resumo

Se você acompanhou o processo, hoje nós o guiamos pelo processo de instalação do Angular no Windows, macOS e Linux. E, seguindo as etapas descritas para cada plataforma, você agora deve ter um ambiente de desenvolvimento Angular funcional e estar pronto para começar a criar aplicativos web usando esse poderoso framework.

Conforme você começa a aprender e usar o Angular, não se esqueça de explorar os extensos recursos disponíveis para ajudá-lo a dominar o framework. Desde a documentação oficial do Angular até recursos movidos pela comunidade como a Angular University, você encontrará muito material para apoiar sua jornada de aprendizado.

Você também pode considerar a participação em comunidades focadas em Angular, como o subreddit r/Angular, onde você pode fazer perguntas, compartilhar suas experiências e aprender com outros desenvolvedores.

Quando estiver pronto para implantar seus aplicativos Angular, considere usar a Hospedagem de Aplicativos da Kinsta. A Kinsta oferece soluções de hospedagem de alto desempenho projetadas para aplicativos construídos com frameworks como o Angular, garantindo uma experiência rápida, segura e confiável para seus usuários.

Com o Angular instalado e uma grande quantidade de recursos na ponta dos dedos, você está no caminho certo para se tornar um desenvolvedor Angular proficiente. Boa sorte!