O desenvolvimento com Angular
Published: 2021-12-19 22:48:02

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.](https://www.valentinog.com/blog/typescript/)

- É 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](https://www.geeksforgeeks.org/software-framework-vs-library/). 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](https://code.visualstudio.com/).
Também precisaremos instalar o node.js. Isso pode ser baixado [aqui](https://nodejs.org/en/). 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](https://angular.io/guide/router).

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
```

![Angular first page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj2fravldxf7h2lxwzrb.png)
 
###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?
:)

###Agora vamos ver algumas diferenças do Angular para seus concorrentes, para isso deixo alguns links!

[GeekHunter](https://blog.geekhunter.com.br/react-vs-vue-vs-angular-qual-escolher/)
[Artigo do Medium](https://medium.com/@contato.viniciuscesar/javascript-framework-qual-escolher-em-2018-angular5-reactjs-vue-js-9df39e7c5b65)
[Felipe Fialho Blog](https://www.felipefialho.com/blog/react-angular-vue-qual-framework-javascript-escolheria-hoje/)
[Vídeo no Youtube do Felipe Fialho](https://www.youtube.com/watch?v=L78ENSEHXLE&ab_channel=FelipeFialho)