ANGULAR

Antes de partir para o Angular em si, vamos entender alguns conceitos importantes que serão utilizados no Angular.

Shadow dom

O documento html existe só para quem criou o código, quando passamos o documento html para o browser(processo também chamado parsed) o documento html é transformado em DOM(document object model) que é formado de árvores. 

Shadow dom é uma ferramenta, que permite criar árvores dentro de uma árvore já existente do navegador. Nós podemos juntar essa shadow dom( ou árvore fantasma criada dentro do browser) com a árvore principal. Essa junção é feita através da criação de um elemento customizado(custom element) onde vamos dar um nome a ele, vamos criar uma tag html para invocar o nosso shadow dom. Esse processo é chamado de componente, onde criamos uma shadow dom independente da árvore principal, mexemos nela de forma isolada e depois anexamos a árvore principal. É útil para trabalhar a complexidade de algum componente. 

Com components podemos criar elementos, css e até props(iteração JavaScript) para ser reutilizado em alguma árvore, através de tags personalizadas que quando chamadas vão herdar tais características. Podemos criar até uma biblioteca com compents que será usada em outro código ou projeto, basta chamarmos a tag personalizada(custom-element). 

Um componet nada mais é do que uma função JavaScript que vai retornar html, css e props 

Typescript 

 É uma tipagem do JavaScript, dá alguns poderes ao JavaScript e faz com que possamos trabalhar com mais segurança. O Typescript é um superset do JavaScript 

No Typescript podemos tipar uma variável dizer o que ela aceita e não aceita, podemos também ver nossos erros em tempo de desenvolvimento. Podemos usar o Typescript em qualquer lugar que usaríamos o JavaScript, podemos usar em backend com node, no front-end… No final todo Typescript é transferido/convertido para JavaScript(processo chamado de transpilação). Então, temos no vscode um código typescript que no final será transpilado para JavaScript. Quem faz esse processo é o node(transforma typescript para JavaScript no final).

Camadas de uma web app (São conceitos que podemos aproveitar em vários frameworks)

- Componentes: é um elemento visual, customizável e reutilizável. É a parte em que trabalhamos com Html e Css e um pouco de JS. Trabalhamos com cada elemento de forma isolada pra reduzir a complexidade e melhorar a reutilização do código. Ao invés de ter um html e css da página toda e tudo junto, vamos ter um html e css personalizado para cada elemento. São pedaços da tela que trabalhamos de forma isolada.

- Gerenciamento de estado ou states: responsável por garantir que as informações dos componentes não estão dessincronizadas e facilitar a comunicação de um componente com outro.

ex: atualizar um carrinho de compras ao clicar no botão de comprar um produto.

exemplos de ferramentas para gerenciamento de estado: flux, redux, context api, recoil, storeon, vuex, ngrx, ngxs.

- Roteamento/Routes/Routing & Navigation: responsável pela forma de navegar fazendo a troca de URL sem recarregar a página, mudando somente os componentes que são mostrados.

ex: meuapp/login -> meuapp/home

exemplos de bibliotecas que cuidam disso: History API, React-Router, Vue-Router, Angular RoutingModule

- Renderização: responsável por decidir a melhor maneira de acessar e entregar para o browser o componente pronto para que ele seja desenhado na janela sem complicações. Temos 3 tipos de estratégias de renderização:

-100% server: uma aplicação normal, o servidor entrega exatamente o que precisamos já montado, ele já está montado no back-end e nós retorna tudo pronto dependendo da rota;

- Parte server e Parte Client: vai ter coisas que precisarão ser montadas/preenchidas dinamicamente

pelo lado do cliente.

- 100% client: tudo vai ser renderizado do lado do cliente, tudo será montado dinamicamente do lado do cliente.

- O angular e o react se encaixam na estratégia de renderização 100%client!

Angular 

Angular( é mantido pelo Google)

- É um framework baseado em JavaScript;

- Tem o typescript como linguagem principal;

- SPAs(aplicações concentradas em uma única página-single page aplication): são o seu foco;

- Componentes são a base da arquitetura;

- Sistema de Tooling(são ferramentas, o angular tem várias ferramentas dentro dele) muito rico: CLI, HTTP, Router...

- Se for um sistema simples, pequeno não precisa usar o Angular, dá pra usar Javascript ou Typescript. Porém, se for um sistema que vai crescer ou se formos precisar de alguma coisa para fazer o meio de campo é importante usar o Angular para deixar tudo mais organizado.

AngularJS é diferente de Angular!

 -AngularJS: criado pelo Google, em 2010 e escrito em Javascript. A proposta da Google era trabalhar com componentes de maneira mais amigável, sem ter que se preocupar tanto com os detalhes. Essa é a versão mais antiga que trabalha com Javascript puro e tem estratégias diferentes de organização.

 -Angular: quando o angular passou para a versão 2.0, todo o seu código foi reescrito. Virou um framework mais completo, e dessa vez utilizando typescript ao invés de Javascript. Essa é a versão mais atual, a versão do mercado.

ANGULAR X REACT × VUE X AURELIA

Ambos resolvem a mesma coisa, porém com estratégias diferentes. Todos esses frameworks criam Spas baseadas em componentes, dando alguma inteligência ao código, ou seja, são abordagens diferentes para resolver o mesmo problema.

Pastas no Angular

Toda a parte codável coloca dentro do src e a parte de configuração fica fora.

Exemplos:

Pasta src

-index.html: nosso arquivo final, vai apontar somente para um componente, que será o componente root-app. Os componentes serão injetados no root-app e o root-app será injetado no index.html.

-mais.ts: arquivo que inicia os módulos do Angular. É a porta de entrada.( vai conter dentro dele os módulos(app.module.ts))

-polyfills.ts: é um arquivo para que a gente consiga aumentar a compatibilidade com navegadores mais antigos.( Só vamos usar em casos bem específicos)

-styles.css: estiliza o angular

Pasta src/app

-app.module.ts: é um agrupador de componentes. Vai ser injetado no main.ts( que é o inicializador)

-app.component.css: estilização do componente

-app.component.html: arquivo HTML do componente

-app.component.ts: cria o componente que será injetado no index.html.(os arquivos -app.componet.css e app.componet.html estão injetados dentro dele).

E assim vai seguindo o fluxo, podemos ter várias páginas que serão injetadas em outra. Quanto maior ou mais complexo o projeto, terá mais quantidade de pastas.

Trabalhando com ng 

Comandos: 

ng new (nome do projeto) - o ng vai criar o esqueleto do projeto para você, com algumas configurações a mais;

cd (nome do projeto) - entra na pasta do seu projeto;

ng serve- cria um servidor para rodar nosso código; 

ng teste- cria um servidor para fazer um teste; 

ctrl+c- para o servidor; 

ng generate --help: mostra tudo o que podemos gerar; 

ng generate component (nome do component)- cria um componente com html, css, ts, module..

ou

ng g c (nome do componente)- cria um component através dos apelidos do ng; 

ng generate module(nome do módulo)- cria uma pasta com módulo e dentro dessa pasta desse módulo podemos criar vários componentes. 

ou

ng g m ( nome do módulo) 

LIFE CYCLE HOOKS( CICLO DE VIDA DOS COMPONENTES) ( TEMOS 8 CICLOS DE VIDA DIFERENTES PARA UM COMPONENTE ANGULAR)

Assim como um ser humano os componentes também tem ciclos de vida:

-O ngInit é carregado apenas 1 vez na inicialização da página, assim como, o ngAfterContentInit e o ngAfterViewInit

-O ngCheck é chamado sempre que tem algum evento ou alguma mudança, após ele é chamado o ngAfterContentCheck e ngAfterViewChecked

-O ngOnChang é chamado apenas quando há uma mudança com Input( )

-O ngOnDestroy é chamado quando um component é morto.

*Se tiver um input o NgOnChange é carregado antes do OnInit

Sempre vai ser nesse ordem, primeiro o componente e depois o view! 

ngDoCheck( ): tem alguns subeventos dentro dele. Executa quando uma propriedade do componente é verificada. 

Tem 4 eventos junto com ele:

- ngAfterContentInit( ): acontece depois do init

- ngAfterContentChecked( ): executa sempre depois do component verificado

- ngAfterViewInit( ): executa depois que o component é totalmente inicializado(quando já carregou tudo)

- ngAfterViewChecked( ): sempre quando a visualização do componente é verificada pelo algoritmo de detecção de alterações do Angular.

Diretivas

São comandos especiais do Angular, para que a gente consiga manipular e alterar a DOM dinamicamente. 

Diretivas de atributo

Alteram o comportamento ou aparência de um elemento em específico, de um componente ou até mesmo de outra diretiva:

-NgClass: adiciona ou remove conjunto de classes CSS;

-NgStyle: adiciona ou remove um conjunto de estilos ao HTML;

-NgModel: adiciona vinculação de dados bidirecional a um elemento de um formulário;

Diretivas estruturais

Moldam ou remodelam a estrutura da DOM, adicionando ou removendo elementos na tela.( Olha para a árvore como um todo, diferentes das diretivas de atributo):

-NgIf: condicional que verifica se o modelo deve ser visualizado ou não

-NgFor: repete um elemento para casa item em uma lista

-NgSwitch: utilizado para alternar entre comportamentos alternativos

Módulos em Angular

Toda a aplicação angular nasce com um module principal( que seria uma caixa que podemos guardar várias coisas, principalmente componentes)

App module

Guarda componentes, diretivas, pipes e services. Os submódulos serão adicionados dentro dele. O app module é como se fosse o módulo pai.

Todo componente precisa estar registrado em um module. Porém, conforme a aplicação vai crescendo vai ficando complicado se todos os componentes estiverem na mesma caixa. Para isso, surge a criação de outros módulos ou submódulos. Onde cada componente vai ficar dentro do seu módulo/submódulo específico criado.

Iremos carregar o módulo inteiro criado dentro do app module e não ficar importando componentes por componentes. O que vai ajudar a manutenção futura dos nossos componentes, em caso de aplicação muito grande.

Services

São arquivos Typescript isolados para cuidar da parte de negócios do projeto( como acessar uma API, requisitar o dado de algum client, montar alguma coisa mais complexa). É ideal que construímos essas coisas numa camada especifica de serviço e não nos components de typescript porque eles já cuidam da renderização, ou seja, o ideal é que componentes cuidam da parte visual e os services cuidam da regra de negócio. O Service é um provedor de informações, ele consume conteúdos lá fora e exibe.

Os services podem servir a mais de um componente, ou seja, um service pode ser usado em vários componentes dentro da aplicação. Além de conversar com components, um service também pode conversar com outros services, ennviroment...

O recomendado é criar um service especialista para cada assunto, para cada problema.