Posted on Dec 19, 2021

O desenvolvimento com Angular

Faala pessoal, tudo beleza?

Então, hoje eu venho aqui mostrar um pouco sobre o Angular, é uma tecnologia muito fera que é bem utilizada hoje nas empresas juntamente com React JS e Next JS.

Hoje vamos entender como começar um projeto e como o Angular pode ser muito efetivo para a sua empresa!

Mas o que é o Angular?

Angular é uma estrutura de aplicativo da web de código aberto baseada em TypeScript liderada pela Equipe Angular do Google e por uma comunidade de indivíduos e empresas. Angular é uma reescrita completa da mesma equipe que construiu AngularJS

Então vamos a alguns pontos:

É baseado em TypeScript. Isso é importante. Isso significa que em algum momento você precisará aprender TypeScript. Aqui está um guia para iniciantes.
É Open Source (FREEEE)
É para montar aplicações Web!
É um framework (ao contrário do React, que é feito de bibliotecas). A diferença? Inversão de controle. Uma boa discussão pode ser encontrada aqui. Em última análise, significa que temos um esqueleto no qual adicionamos funcionalidade.

Tanto o Angular quanto o React possuem arquitetura baseada em componentes, o que significa que possuem componentes coesos, reutilizáveis e modulares. Mas, a diferença vem no ponto da pilha de tecnologia. O React usa JavaScript, enquanto o Angular usa o Typescript para desenvolvimento web, que é mais compacto e sem erros.

As aplicações em Angular também tendem a ser usados para construir aplicativos de página única (SPAs).

Um aplicativo de página única (SPA) é um aplicativo da web ou site que interage com o usuário reescrevendo dinamicamente a página atual em vez de carregar páginas novas inteiras de um servidor.

Bom, então vamos lá criar a nossa primeira aplicação com Angular!

Vamos primeiramente começar com a configuração do ambiente

Usaremos Visual Studio Code como nosso ambiente de desenvolvimento. Se você não tiver, pode fazer o download aqui.
Também precisaremos instalar o node.js. Isso pode ser baixado aqui. Não escreveremos nenhum código, mas nos ajudará a agrupar e otimizar nosso código, bem como nos dará acesso ao gerenciador de pacotes npm.

E quanto ao desenvolvimento?

Com nossas ferramentas instaladas, iniciaremos nosso aplicativo usando a interface de linha de comando angular ou CLI. Este é o método recomendado para iniciar um novo projeto.

Precisaremos de um diretório em seu computador para armazenar o aplicativo. Você pode criar isso conforme desejado, mas o meu se chamará simplesmente FirstAngularApp.

Esta é uma pasta para seu aplicativo, não o nome do aplicativo. Isso virá mais tarde.
Abra o VSCode e abra a pasta na qual sua aplicação está, (FirstAngularApp.)

Abra um novo terminal.

Se você instalou o Node de forma global, rode este comando:

npm install -g @angular/cli or npm install -g @angular/cli@latest

Se você NÃO instalou o node de forma global:

npm install

E depois:

npm install -g @angular/cli or npm install -g @angular/cli@latest

Criando sua aplicação

Para criar sua aplicação dentro da pasta que você criou, digite este comando:

ng new learning-angular

Onde learning-angular é o nome da nossa aplicação.

Serão feitas duas perguntas a você.

Uma é se você deseja instalar o Roteamento angular. O padrão é Não. Basta pressionar Enter.

O roteamento é muito importante e é o que nos permite carregar diferentes componentes para criar um SPA, mas pode ser, e geralmente é instalado, mais tarde.

Mais informações sobre Roteamento Angular podem ser encontradas aqui.

A outra questão é que tipo de estilo você deseja usar. O padrão é CSS. Usaremos esse padrão. Basta clicar em Enter.

Observe durante a instalação, muitos arquivos têm a extensão, ts. Isso é para TypeScript. Uma nota abaixo.

Na verdade, o Typescript não é executado diretamente nos navegadores. Ele é primeiro compilado em códigos JavaScript. Portanto, você pode dizer que o Typescript oferece suporte a todos os navegadores que oferecem suporte ao JavaScript.

Abrindo a aplicação no seu navegador

Em seguida, compilamos nosso aplicativo e iniciamos o servidor da web de desenvolvimento digitando:

ng serve

Agora podemos acessar a URL e ver nossa aplicação rodando!

https://localhost:4200

Um olhar nos arquivos do projeto

No VSCode, olhe no explorador de arquivos e você verá a estrutura do framework do seu aplicativo Angular.

Em partes futuras, iremos adicionar pastas e nossos próprios componentes.

Conclusão

Inicialmente para ter um visão sobre como o Angular atua, está ótimo!
Você pode agora começar a brincar, mudar textos, estilos e afins para ver as mudanças serem refletidas na sua página que está rodando.

Viu só como foi fácil começar a desenvolver com Angular?
:)