Criando uma aplicação básica com Angular
Criando uma aplicação básica com Angular

Criando uma aplicação básica com Angular

Rodrigo Zandonadi
Code & Write

--

O Angular é um dos frameworks front-end mais utilizados da atualidade. Segundo o site do Angular, ele é uma plataforma de desenvolvimento construída em TypeScript. O framework Angular inclui:

  • Uma estrutura baseada em componentes para a construção de aplicativos da web escaláveis
  • Uma coleção de bibliotecas bem integradas que cobrem uma ampla variedade de recursos, incluindo roteamento, gerenciamento de formulários, comunicação cliente-servidor e muito mais
  • Um conjunto de ferramentas de desenvolvedor para ajudá-lo a desenvolver, construir, testar e atualizar seu código

Com o Angular é possível construir aplicativos com Angular e reutilizar seu código e habilidades para construir aplicativos para qualquer destino de implantação. Para web, web móvel, móvel nativo e desktop nativo.

Instalando o Angular

Para iniciar no desenvolvimento web com o Angular, você precisa ter o Node.js instalado em sua máquina, para usar o instalador de pacotes NPM, que vem com o Node:

npm install -g @angular/cli

Criando a aplicação

Depois de instalado o Angular, use o comando ng new para criar um novo app.

ng new my-app

O comandong newsolicita informações sobre os recursos a serem incluídos no aplicativo inicial. Aceite os padrões pressionando a tecla Enter ou Return.

O Angular CLI instala os pacotes Angular npm necessários e outras dependências. Isso pode levar alguns minutos.

A CLI cria um novo espaço de trabalho e um aplicativo Bem-vindo simples, pronto para ser executado.

Iniciando a aplicação

Entre na pasta pelo terminal, utilizando o comando cd my-app. Execute o comando para iniciar a aplicação:

ng serve --open

O comandong serve inicia o servidor, observa seus arquivos e reconstrói o aplicativo conforme você faz alterações nesses arquivos.

A opção --open(ou apenas -o) abre automaticamente seu navegador no url http://localhost:4200/.

Se sua instalação e configuração foram bem-sucedidas, você deverá ver uma página semelhante à seguinte:

No próximo artigo sobre Angular, vamos falar sobre a estrutura do projeto.

--

--

Rodrigo Zandonadi
Code & Write

Desenvolvedor front end apaixonado por, CSS/SASS, JavaScript/Node.js (MEAN, MERN e MEVN).