Angular

Angular Detalhes

Conteúdo do curso

Introdução
Componentes
Estrutura do projeto
Angular CLI
Módulos
Data Binding

Diretivas Estruturais
Diretivas de Atributos
Services
Pipes
Template-Driven Forms

Conteúdo do curso

Reactive Forms
Validações
Ciclo de vida
Rotas
Guards
Lazy Loading

Requisições HTTP
Interceptors
Diretivas customizadas
Injeção de dependência
Segurança

Exemplo Final

Arquitetura

Exemplo

Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data.

Components use services, which provide specific functionality not directly related to views. Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient.

Each component defines a class that contains application data and logic, and is associated with an HTML template that defines a view to be displayed in a target environment.

moduleId: module.id

If set, the templateUrl and styleUrl are resolved relative to the component.

viewProviders: [MyService, { provide: ... }]

List of dependency injection providers scoped to this component’s view.

template: 'Hello {{name}}'
templateUrl: 'my-component.html'

Inline template or external template URL of the component’s view.

styles: ['.primary {color: red}']
styleUrls: ['my-component.css']

List of inline CSS styles or external stylesheet URLs for styling the component’s view.

The basic building blocks of an Angular application are NgModules, which provide a compilation context for components. NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules.

@NgModule({ declarations: ..., imports: ...,
exports: ..., providers: ..., bootstrap: ...})
class MyModule {}

Defines a module that contains components, directives, pipes, and providers.

declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]

List of components, directives, and pipes that belong to this module.

imports: [BrowserModule, SomeOtherModule]

List of modules to import into this module. Everything from the imported modules is available to declarations of this module.

exports: [MyRedComponent, MyDatePipe]

List of components, directives, and pipes visible to modules that import this module.

providers: [MyService, { provide: ... }]

List of dependency injection providers visible both to the contents of this module and to importers of this module.

entryComponents: [SomeComponent, OtherComponent]

List of components not referenced in any reachable template, for example dynamically created from code.

bootstrap: [MyAppComponent]

List of components to bootstrap when this module is bootstrapped.

Angular CLI

npm install -g @angular/cli

ng version
ng help
ng generate --help

ng new primeiro-projeto
cd primeiro-projeto
ng serve

ng generate module pessoa --routing

ng generate componente pessoa/cadastro

Data Binding

Data Binding - Exemplos

<li>{{itens[0]}}</li>

<li [innerHtml]="itens[0]"></li>

<a (click)="adicionar('Item')">Adicionar item a ser feito</a>

<input [(ngModel)]="movie.name">

Exemplo

Diretivas

Componentes são uma extensão de uma diretiva, com a adição de templates.

Existem dois tipos de diretivas:

Estruturais
Atributos

Diretivas estruturais

Alteram o Layout adicionando, removendo ou substituindo elementos da árvore de elementos do HTML (DOM).

ngIf: Exibe o elemento somente se a condição for verdadeira
ngFor: Adiciona um elemento para cada item da lista

Exemplo ngIf

Exemplo ngFor

Diretivas de atributo

Altera a aparência ou adiciona um comportamento a um elemento.

ngStyle
ngClass
ngModel

<input [(ngModel)]="movie.name">

Exemplo

Services

São valores, funções ou funcionalidades que uma aplicação precisa. São criados usando o decorator @Injectable().

@Injectable() class Car {

}

For data or logic that isn’t associated with a specific view, and that you want to share across components, you create a service class. A service class definition is immediately preceded by the @Injectable() decorator. The decorator provides the metadata that allows other providers to be injected as dependencies into your class.

Dependency injection (DI) lets you keep your component classes lean and efficient. They don’t fetch data from the server, validate user input, or log directly to the console; they delegate such tasks to services.

{ provide: MyService, useClass: MyMockService }

Sets or overrides the provider for MyService to the MyMockService class.

{ provide: MyService, useFactory: myFactory }

Sets or overrides the provider for MyService to the myFactory factory function.

{ provide: MyValue, useValue: 41 }

Sets or overrides the provider for MyValue to the value 41.

Services - Uso

@Injectable({ providedIn: 'root' })
class Car {
  constructor(@Inject("MyEngine") public engine:Engine) {}
}

@NgModule({
  // ...
  providers: [ ItemService ],
  // ...
})

Exemplo

Pipes

Facilidade para transformar valores nos templates.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {                                transform(value: number, exponent: string): number {
    let exp = parseFloat(exponent);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }
}

Pipes

AsyncPipe
CurrencyPipe
DatePipe
DecimalPipe
UpperCasePipe
TitleCasePipe

LowerCasePipe
JsonPipe
I18nPluralPipe
KeyValuePipe
PercentPipe
SlicePipe

Pipes - Uso

import { Component } from '@angular/core';
@Component({
  selector: 'app-hero-birthday',
  template: `<p>The hero's birthday is {{ birthday | date }}</p>` })
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988
}

@NgModule({
  // ...
  declarations: [
    // ...
    HeroBirthdayComponent
  ],
  // ...
})

Exemplo

Template-driven Forms

import { FormsModule } from '@angular/forms';
@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  // ...
})
export class AppModule { }

<input type="text" [(ngModel)]="item.nome" />

Exemplo

Template-driven Forms - Validação

<input type="text" [(ngModel)]="item.nome" required="true" #itemAdicionar="ngModel"/>

Exemplo

Template-driven Forms - Validação

Classes especiais de controle de validação:

State	Verdadeiro	Falso
Visitado	ng-touched	ng-untouched
Modificado	ng-dirty	ng-pristine
Válido	ng-valid	ng-invalid

State

Verdadeiro

Falso

Visitado

ng-touched

ng-untouched

Modificado

ng-dirty

ng-pristine

Válido

ng-valid

ng-invalid

Template-driven Forms - Validação

Atributos da template reference variable do ngModel:

State	Verdadeiro	Falso
Visitado	touched	untouched
Modificado	dirty	pristine
Válido	valid	invalid

State

Verdadeiro

Falso

Visitado

touched

untouched

Modificado

dirty

pristine

Válido

valid

invalid

Template-driven Forms - Validação

<form (ngSubmit)="adicionar()" #itemForm="ngForm">
    <input name="nome" type="text" [(ngModel)]="item.nome" required />
</form>

Exemplo

Components - Class field decorators

@Input()  botao: string;
@Output() itens = new EventEmitter<Item[]>();
@ViewChild(ItemListComponent) itemList: ItemListComponent;

Exemplo

Link

@Input() myProperty;

Declares an input property that you can update via property binding (example: <my-cmp [myProperty]="someExpression">).

@Output() myEvent = new EventEmitter();

Declares an output property that fires events that you can subscribe to with an event binding (example: <my-cmp (myEvent)="doSomething()">).

@HostBinding('class.valid') isValid;

Binds a host element property (here, the CSS class valid) to a directive/component property (isValid).

@HostListener('click', ['$event']) onClick(e) {...}

Subscribes to a host element event (click) with a directive/component method (onClick), optionally passing an argument ($event).

@ContentChild(myPredicate) myChildComponent;

Binds the first result of the component content query (myPredicate) to a property (myChildComponent) of the class.

@ContentChildren(myPredicate) myChildComponents;

Binds the results of the component content query (myPredicate) to a property (myChildComponents) of the class.

@ViewChild(myPredicate) myChildComponent;

Binds the first result of the component view query (myPredicate) to a property (myChildComponent) of the class. Not available for directives.

@ViewChildren(myPredicate) myChildComponents;

Binds the results of the component view query (myPredicate) to a property (myChildComponents) of the class. Not available for directives.

Reactive Forms

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
  imports:[
    // ...
    ReactiveFormsModule
  ],
  // ...
})
export class AppModule { }

  itemForm: FormGroup = new FormGroup({
    nome: new FormControl(''),
    realizado: new FormControl(false),
  });

<form (ngSubmit)="adicionar()" [formGroup]="itemForm">
  <input type="text" formControlName="nome" />
  <input type="checkbox" formControlName="realizado" />
</form>

Exemplo

Permitem um maior controle de validação e utilizar o método model-driven.

Each change to the form state returns a new state, which maintains the integrity of the model between changes. Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, which can be accessed synchronously.

Reactive forms differ from template-driven forms in distinct ways. Reactive forms provide more predictability with synchronous access to the data model, immutability with observable operators, and change tracking through observable streams. If you prefer direct access to modify data in your template, template-driven forms are less explicit because they rely on directives embedded in the template, along with mutable data to track changes asynchronously.

Link

Reactive Forms - patchValues e setValue

this.itemForm.get('nome').patchValue('');
this.itemForm.patchValue(new Item());

Exemplo

Reactive Forms - FormBuilder

this.itemForm = this.fb.group({
  nome: [''],
  realizado: [false],
});

Exemplo

Reactive Forms - Validação

<input type="text" formControlName="nome" required />
<input formControlName="realizado" type="checkbox" />

this.itemForm = this.fb.group({
  nome: ['', Validators.required],
  realizado: [false],
});

Exemplo

Reactive Forms - FormArray

import { FormArray } from '@angular/forms';
//...
profileForm = this.fb.group({
  aliases: this.fb.array([
    this.fb.control('')
  ])
});
//...
get aliases() {
  return this.profileForm.get('aliases') as FormArray;
}
//...
addAlias() {
  this.aliases.push(this.fb.control(''));
}
//...

Reactive Forms - FormArray

<div formArrayName="aliases">
  <h3>Aliases</h3> <button (click)="addAlias()">Add Alias</button>
  <div *ngFor="let address of aliases.controls; let i=index">
    <label>Alias: <input type="text" [formControlName]="i"></label>
  </div>
</div>

Reactive Forms - ValidatorFn

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? {'forbiddenName': {value: control.value}} : null;
  };
}

this.heroForm = new FormGroup({
  'name': new FormControl(this.hero.name, [
    Validators.required,
    Validators.minLength(4),
    forbiddenNameValidator(/bob/i)
  ])
])

Exemplo

Ciclo de vida

ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit

ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy

Documentação

Exemplo

São métodos especiais de components e directives que são executados ao longo de seu ciclo de vida.

Hook

Purpose and Timing

ngOnChanges()

Respond when Angular (re)sets data-bound input properties. The method receives a SimpleChanges object of current and previous property values. Called before ngOnInit() and whenever one or more data-bound input properties change.

ngOnInit()

Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component’s input properties. Called once, after the first ngOnChanges().

ngDoCheck()

Detect and act upon changes that Angular can’t or won’t detect on its own. Called during every change detection run, immediately after ngOnChanges() and ngOnInit().

ngAfterContentInit()

Respond after Angular projects external content into the component’s view / the view that a directive is in. Called once after the first ngDoCheck().

ngAfterContentChecked()

Respond after Angular checks the content projected into the directive/component. Called after the ngAfterContentInit() and every subsequent ngDoCheck().

ngAfterViewInit()

Respond after Angular initializes the component’s views and child views / the view that a directive is in. Called once after the first ngAfterContentChecked().

ngAfterViewChecked()

Respond after Angular checks the component’s views and child views / the view that a directive is in. Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked().

ngOnDestroy()

Cleanup just before Angular destroys the directive/component. Unsubscribe Observables and detach event handlers to avoid memory leaks. Called just before Angular destroys the directive/component.

Link

Feature Modules

São módulos que tem o propósito de organizar o código na aplicação. Ele é um conjunto de funcionalidades coesas e focados em necessidades específicas da aplicação.

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    CustomerDashboardComponent
  ],
  exports: [
    CustomerDashboardComponent
  ]
})

Exemplo

Route

@NgModule({
  imports: [
    RouterModule.forRoot(
      [
        { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
        { path: '**', component: PageNotFoundComponent }
      ]
    )
  ]
})

Exemplo

Route - routerLink

<nav>
  <a [routerLink]="['list']">Lista de itens a serem feitos</a>
  <a [routerLink]="['form']">Adicionar item a ser feito</a>
</nav>

Exemplo

Route - Router

import { Router } from '@angular/router';
// ...
constructor(private router: Router
// ...
this.router.navigate(['/item/list']);

Exemplo

Route - ActivatedRoute

import { ActivatedRoute } from '@angular/router';
// ...
constructor(private route: ActivatedRoute
// ...
this.router.navigate(['/item/list']);

Exemplo

Route - Guards

Um Route Guard é geralmente usado para impedir o acesso a determinadas rotas do sistema. Ele pode retornar os seguintes valores:

true: a navegação continua.
false: a navegação é interrompida e o usuário continua na rota atual.
UrlTree: o usuário é redirecionado para a rota de retorno.
any: Com o resolver guard.

Route - Guards

CanActivate: para mediar navegações para uma rota.
CanActivateChild: para mediar navegações para uma rota filha.
CanDeactivate: para mediar navegações de saída da rota atual.

Route - Guards

Resolve: para realizar recuperação de dados antes da ativação da rota atual.
CanLoad: para mediar a navegação para um feature module carregado de forma assíncrona.

Exemplo

Lazy Loading

Eager Loading: Por padrão os módulos são carregados junto com a aplicação, sendo eles necessários ou não.
Lazy Loading: Padrão utilizado para carregamento tardio do recurso. O módulo é carregado quando necessário.

Exemplo

HttpClient

import { HttpClientModule } from '@angular/common/http';
// ...
@NgModule({
  imports: [
    HttpClientModule,
// ...
})
// ...

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ConfigService {
  constructor(private http: HttpClient) { }
}

Exemplo

HttpClient - Interceptor

import { Injectable } from '@angular/core';
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class NoopInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpEvent<any>> {
    return next.handle(req);
  }
}

{ provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true },

Exemplo

Diretivas - Atributos

<p [item]="item"></p>

import { Directive, ElementRef, Input } from '@angular/core';
//...

@Directive({
  selector: '[item]'
})
export class HighlightDirective {

  @Input('item') item: Item;

  constructor(el: ElementRef) {
    // ..
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

Exemplo

Diretivas - Estrutural

<div *itensMostrar="itens">{{item.name}}</div>

<ng-template [itensMostrar]="itens">
  <div>{{item.name}}</div>
</ng-template>

import { Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
//...

@Directive({ selector: '[itensMostrar]'})
export class ItensMostrarDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) { }
//...
}

Exemplo

Injeção de dependência

O angular possue um injetor de dependência hierárquico, ou seja existe uma arvore de injetores de dependência que fica em paralelo a arvore de componentes da aplicação. Ele pode ser reconfigurado em qualquer nível da arvore de dependência do angular.

Injeção de dependência: Scope

Os services podem possuir escopo limitado a módulos do sistema. Quando declarados em módulos o escopo do módulos pode ser definido no providedIn do próprio componente ou dentro da declaração de provides dos módulos.

@Injectable({
  providedIn: UserModule,
})
export class UserService {}

@NgModule({
  providers: [UserService],
})
export class UserModule {}

Injeção de dependência: Scope

Quando o escopo é limitado a um componente ele é disponível a toda arvore daquele componente.

@Component({
  providers: [UserService]
})
export class UserComponent {}

Injeção de dependência: Singleton Services

Singleton services são serviços que possuem somente uma instância em todo a aplicação. São implementados sendo declarados no AppModule ou com providedIn igual a "root".

Segurança

XSS: Cross-site scripting
CSRF or XSRF: Cross-site request forgery
XSSI: Cross-site script inclusion

Security

Cross-site scripting

Cross-site scripting (XSS) enables attackers to inject malicious code into web pages. Such code can then, for example, steal user data (in particular, login data) or perform actions to impersonate the user. This is one of the most common attacks on the web.

To systematically block XSS bugs, Angular treats all values as untrusted by default. When a value is inserted into the DOM from a template, via property, attribute, style, class binding, or interpolation, Angular sanitizes and escapes untrusted values.

HTML: is used when interpreting a value as HTML, for example, when binding to innerHtml.
Style: is used when binding CSS into the style property.
URL: is used for URL properties, such as <a href>.
Resource URL: is a URL that will be loaded and executed as code, for example, in <script src>.

To mark a value as trusted use DomSanitizer:

bypassSecurityTrustHtml
bypassSecurityTrustScript
bypassSecurityTrustStyle
bypassSecurityTrustUrl
bypassSecurityTrustResourceUrl

Cross-site request forgery

In a cross-site request forgery (CSRF or XSRF), an attacker tricks the user into visiting a different web page (such as evil.com) with malignant code that secretly sends a malicious request to the application’s web server (such as example-bank.com).

Assume the user is logged into the application at example-bank.com. The user opens an email and clicks a link to evil.com, which opens in a new tab.

The evil.com page immediately sends a malicious request to example-bank.com. Perhaps it’s a request to transfer money from the user’s account to the attacker’s account. The browser automatically sends the example-bank.com cookies (including the authentication cookie) with this request.

If the example-bank.com server lacks XSRF protection, it can’t tell the difference between a legitimate request from the application and the forged request from evil.com.

To prevent this, the application must ensure that a user request originates from the real application, not from a different site. The server and client must cooperate to thwart this attack.

In a common anti-XSRF technique, the application server sends a randomly generated authentication token in a cookie. The client code reads the cookie and adds a custom request header with the token in all subsequent requests. The server compares the received cookie value to the request header value and rejects the request if the values are missing or don’t match.

This technique is effective because all browsers implement the same origin policy. Only code from the website on which cookies are set can read the cookies from that site and set custom headers on requests to that site. That means only your application can read this cookie token and set the custom header. The malicious code on evil.com can’t.

Cross-site script inclusion (XSSI)

Cross-site script inclusion, also known as JSON vulnerability, can allow an attacker’s website to read data from a JSON API. The attack works on older browsers by overriding native JavaScript object constructors, and then including an API URL using a <script> tag.

This attack is only successful if the returned JSON is executable as JavaScript. Servers can prevent an attack by prefixing all JSON responses to make them non-executable, by convention, using the well-known string ")]}',\n".

Angular’s HttpClient library recognizes this convention and automatically strips the string ")]}',\n" from all responses before further parsing.

For more information, see the XSSI section of this Google web security blog post.

Referências

http://angular.io

Dúvidas

Alguma pergunta?