Conceitos - sabrinabm94/angular GitHub Wiki

Conceitos

O angular é um framework open source de javascript que usa componentes e directivas para construir uma aplicação web. É construido inteiramente em typescript e foi desenvolvido para trabalhar com SPAs (single page applications) em ambientes multiplataforma (web, desktop e mobile). É mantido pelo Google.

Single pages applications

Single pages applications são aplicações que carregam somente uma vez e as interações do usuário não farão a página ser carregada.

Por que usar o Angular?

Ele adiciona interatividade para as páginas web, trazendo estrutura, consistência, escalabilidade e manutenibilidade.

Funcionalidades

  • Document Object Model (DOM)
  • Typescript
  • Data binding
  • Testing

DOM

Trata um documento html como se fosse uma árvore de nódulos que representa objetos do documento.

Cada vez que tem uma alteração no html o seu DOM será atualizado pois a estrutura de nódulos correspondente aquele html deverá ser atualizado.

Arquitetura

A arquitetura do Angular é conhecida como MVVM: Model - View - ViewModel permitindo que a view e os componentes possam ser separados da lógica de negócio, ficando por responsabilidade da ViewModel que atua nas informações dos modelos e envia as informações para serem renderizadas pela View.

Componentes

São como peças de legos que ao juntar formam uma aplicação web.

  • Somente uma instância por DOM (Document Object Model)
  • Adicionam comportamentos na DOM
  • Suporta o uso de Views (templates)

Entry components

Onde é especificado a listagem de componentes que devem ser compilados quando um modulo for definido. Os componentes listados aqui podem ser carregados dinamicamente na view.

Injeção de dependências

A injeção de dependências é realizada nos providers, que aceita um array de valores, tornando o código flexível e desacoplado, separando responsabilidade de classe / objeto, definindo pela injeção as dependências daquela classe.

Binding

Property

As propriedades de um elemento HTML podem ter seus valores alterados pelo binding.

<input [value]="'Some value'" type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">

let text = "Some awesome text"; 
<p [innerText] = "text"></p>

<table>
	<tr>
		<td [attr.aria-label] = "name">
		</td>
	</tr>
</table>

Event

Também podemos chamar funções ou alterar valores de variáveis utilizando os [eventos javascript](https://www.marciobrasil.net.br/javascript-2/lista-completa-de-eventos-javascript.html).

let buttonText = "Not clicked!";

someMethod(buttonText) {
	console.log("Button was clicked and this value changed to ");
	console.log(buttonText);
}

<button (click) = "someMethod(buttonText = 'Clicked!')">{{buttonText}}</button>

<button [style.color] = "isValid ? 'green' : 'red'"> (click)="isValid" = !isValid">Click here</button>

NgModel

É um fluxo bidirecional, atualizando o valor dinâmicamente pelo disparo de eventos.

<input [ngModel]="valor" (ngModelChange)="valorMaiusculo($event)" id="exemplo-maiusculo">

Directives

  • Múltiplas instâncias por DOM
  • Não suporta Views

Decorators

É uma feature experimental do Typescript, serve para definir classes e propriedades do Angular, no qual uma classe pode ser definida como modulo, componente, service, pipe ou directive pelo decorator atribuído a esta.

Ex. @NgModule, @Component, @Pipe, @Directive, @Injectable (service)…

Models

O angular tem um um sistema modular chamado de engenharia de módulos (@NgModules) onde uma aplicação em angular tem pelo menos um modulo que é o AppModule.

Os módulos é uma ótima forma de organizar a aplicação e extender sua utilização, sendo que muitas libs do angular são módulos como FormModule, RouterModule… como também libs externas vistos no AngularMaterial, Ionic…

Declarations

Usado para registrar um componente, pipe ou directiva no angular module.

Um componente só pode estar registrado dentro de um módulo.

Pipes

Life cycle hooks

life

changes in angular: timeout, intervals, button clicks, select value change, input keybords, api calls…

View queries

Utilizado para obter elementos por referencia.

ViewChild/ViewChildren

Pega um elemento por referência da view via component type ou template.

//OneComponent
export class OneComponent {
	@input() name: string;
	private lastname: string;

	message() {
		console.log("OneComponent: hello!");
	}
}

//app.component.html
<one-component name="{{ name }}"></one-component> //*1
<one-component #oneComponent name="{{ name }}"></one-component> //*2

//app.component.ts
import { OneComponent } from './one-component.component';

export class AppComponent implements AfterViewInit {
	name = 'Angular';
	
	//*1 pega informação do component filho existente no template deste componente
	@ViewChild(OneComponent) oneComponent: OneComponent;

	//*2 pega informação pelo apelido do component #oneComponent
	@ViewChild(oneComponent) oneComponentByNickname: OneComponent;

	//*3 pega informação pelo apelido do component #oneComponent lendo o View Container Ref
	@ViewChild("oneComponent"), { read: ViewContainerRef } ) oneComponentByNicknameVCRef: ViewContainerRef;

	//*4 pega informação pelo apelido do component #oneComponent lendo o View Container Ref
	@ViewChild(oneComponent, { read: TemplateRef } ) oneComponentByNicknameTemplateRef: TemplateRef<HTMLElement>;

	ngAfterViewInit() {
		console.log('oneComponent: ', this.oneComponent);
		console.log('oneComponentByNickname: ', this.oneComponentByNickname);
		console.log('oneComponentByNicknameVCRef: ', this.oneComponentByNicknameVCRef);
		console.log('oneComponentByNicknameTemplateRef: ', this.oneComponentByNicknameTemplateRef);
	}
}

ContentChild/ContentChildren

Referências

https://www.youtube.com/watch?v=iZ1mlcCkY8A

⚠️ **GitHub.com Fallback** ⚠️