Get best of the week

10 recursos angulares úteis que você perdeu


Se você escreve aplicativos regularmente em Angular e gasta mais de cem horas nele, provavelmente conhece essas funções. Mas, no entanto, para ter certeza - leia :)

Antes de prosseguirmos para as funções do Angular, vale a pena mencionar uma ferramenta muito útil. O Bit (Github) facilita o trabalho em componentes Angular juntos e o compartilhamento. Eu sinceramente recomendo manter uma interface consistente, acelerar o desenvolvimento e minimizar o número de erros no código.


Exemplo: Carregadores circulares para Angular com bit.dev


1. Título


A tag title é um elemento HTML que define o título de uma página da web. Os títulos aparecem na página de resultados da pesquisa (SERP) como um título clicável para o resultado. Eles são muito importantes para usabilidade, SEO e promoção social. redes.

Aplicativos angulares recebem o título da tag ... em index.html. Por padrão, a transição entre os componentes no Angular não altera esse cabeçalho.

Você sabia que um título pode ser definido separadamente de cada componente?

Angular tem um serviço de título emangular/ plataforma-navegador. Você pode incorporá-lo facilmente a outros componentes e usar o método setTitle para substituir o título.

import { Title } from "@angular/platform-browser"@Component({
   ...
})
export class LoginComponent implements OnInit {
   constructor(private title: Title) {}    ngOnInit() {
       title.setTitle("Login")
   }
}

Ao navegar para o LoginComponent no aplicativo, o título da janela do navegador mudará para "Login".

O mesmo pode ser feito em qualquer componente e, consequentemente, à medida que você navega dentro do aplicativo, o título muda, respondendo às ações do usuário.

2. Meta


As metatags de aplicativos angulares também são obtidas do arquivo index.html. E para defini-los a partir de componentes, o serviço Meta deangular/ plataforma-navegador.

E novamente: o uso de metatags é útil em termos de SEO e promoção de páginas nas redes sociais. redes, eles contêm informações sobre uma página da web que os mecanismos de pesquisa usam para classificar e exibir corretamente nos resultados da pesquisa.

Para usar o componente da metatag, importe o Meta deangular/ platform-browser e incorpore no componente desejado.

import { Meta } from "@angular/platform-browser"@Component({
    ...
})
export class BlogComponent implements OnInit {
    constructor(private meta: Meta) {}    ngOnInit() {
        meta.updateTag({name: "title", content: ""})
        meta.updateTag({name: "description", content: "Lorem ipsum dolor"})
        meta.updateTag({name: "image", content: "./assets/blog-image.jpg"})
        meta.updateTag({name: "site", content: "My Site"})
    }
}

Agora, o BlogComponent pode ser exibido corretamente no Twitter, Facebook etc. Ao mesmo tempo, exibindo descrições, títulos e imagens na forma correta e legível.
Você já ouviu falar sobre isso também? Então aqui está algo mais interessante.

3. Interpolação do padrão de substituição


O interpolador padrão em padrões é {{}}. Se você inserir uma variável entre {{e}}, seu valor será exibido no DOM final.

Você sabia que é possível substituir os delimitadores de encapsulamento padrão em qualquer caractere? É simples. Você só precisa especificar novos valores na propriedade interpolação no decorador de componentes.

@Component({
   interpolation: ["((","))"]
})
export class AppComponent {}

A interpolação usada no modelo AppComponent foi alterada para (()) e {{}} não funciona mais.

@Component({
   template: `
       <div>
           ((data))
       </div>
   `,
   interpolation: ["((","))"]
})
export class AppComponent {
   data: any = "dataVar"
}

No navegador, você verá que a string "dataVar" será exibida no lugar de ((data)).

4. Localização


Podemos abrir o URL atual da página no navegador usando o serviço Localização. Dependendo de qual LocationStrategy for usada, o Location será armazenado pelo caminho no URL (/ exemplo / página /) ou pela parte do URL após a libra (# test / page /).

Com Localização, podemos acessar o URL, avançar na história, voltar, alterar o URL atual ou substituir o item principal da história.

O serviço de localização do CommonModule ajudará aqui.

import { Location } from "@angular/common"@Component({
   ...
})
export class AppComponent {
   constructor(private location: Location) {}    navigateTo(url) {
       this.location.go(url)
   }    goBack() {
       location.back()
   }    goForward() {
       location.forward()
   }
}


5. Documento


Às vezes, você precisa obter um modelo de documento para executar operações DOM diretamente de um aplicativo Angular.

DOCUMENT serve apenas a esse propósito. DOCUMENT é um token DI que representa o contexto de renderização principal. Em um navegador, este é um documento DOM. Ele fornece operações DOM, independentemente do tempo de execução.

Nota: O documento pode não estar disponível no Contexto do Aplicativo se os contextos Aplicativo e Renderização não corresponderem (por exemplo, ao iniciar o aplicativo no Web Worker).

Digamos que temos algum tipo de elemento HTML:

<canvas id="canvas"></canvas>


Para obter um HTMLElement de tela, implemente DOCUMENT:

@Component({})
export class CanvasElement {
   constructor(@Inject(DOCUMENT) _doc: Document) {}
}


Obtenha a tela HTMLElement usando getElementById ()

@Component({})
export class CanvasElement {
   constructor(@Inject(DOCUMENT) _doc: Document) {}    renderCanvas() {
       this._doc.getElementById("canvas")
   }
}


Aviso: use DOCUMENT com cuidado! A interação com o DOM é diretamente perigosa e aumenta o risco de XSS.

6. Decorador @ Atributo


Basicamente, em um aplicativo Angular, eles usam os decoradores de Componentes, Módulos e Diretivas.

No entanto, também há um decorador de Atributos que permite passar uma sequência estática sem sobrecarga de desempenho desnecessária, ignorando a verificação de alterações.

Os valores do decorador de atributo são verificados apenas uma vez. Usado como um decoradorEntrada:

@Component({
   ...
})
export class BlogComponent {
   constructor(@Attribute("type") private type: string ) {}
}


7. HttpInterceptor


O HttpInterceptor é um recurso muito poderoso no Angular que permite interceptar solicitações HttpRequest e processá-las.

A maioria dos interceptores converte a solicitação de saída antes de passá-la para o próximo interceptador na cadeia chamando next.handle (transformReq).

Em casos raros, os interceptadores podem processar completamente a solicitação e não delegar o restante da cadeia. Esse comportamento é permitido.

O HttpInterceptor é mais frequentemente usado em:

  • Autenticação
  • Armazenamento em cache
  • Back-end falso
  • Transformação de URL
  • Subversão do cabeçalho

Para usar esse interceptador, você precisa criar um serviço e implementar a interface HttpInterceptor.

@Injectable()
export class MockBackendInterceptor implements HttpInterceptor {
   constructor() {}    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       ...
   }
}

Insira-o no módulo principal:
@NgModule({
   ...
   providers: [
       {
           provide: HTTP_INTERCEPTORS,
           useClass: MockBackendInterceptor,
           multi: true
       }
   ]
   ...
})
export class AppModule {}


8. AppInitializer


Às vezes, ao iniciar um aplicativo Angular, é necessário inicializar uma parte específica do código. Por exemplo, carregue configurações, carregue cache, carregue quaisquer configurações ou execute verificações. O token do AppInitialzer é criado especificamente para isso.
APP_INITIALIZER: função executada imediatamente após o lançamento do aplicativo.
Suponha que precisamos executar alguma função runSettings ao iniciar um aplicativo Angular:

function runSettingsOnInit() {
   ...
}

Para fazer isso, vamos para o módulo AppModule principal e o adicionamos à seção de fornecedores do decorador NgModule:

@NgModule({
   providers: [
       { provide: APP_INITIALIZER, useFactory: runSettingsOnInit }
   ]
})

9. Ouvinte de Bootstrap


Por analogia com o AppInitialzer, o Angular possui uma função que permite rastrear o carregamento de um componente. Este é APP_BOOTSTRAP_LISTENER.

Todos os retornos de chamada retornados por esse token serão chamados para cada componente para download.

Você pode usar esse recurso para rastrear a inicialização dos componentes em muitos casos. Por exemplo, o módulo Roteador o utiliza para destruir e criar componentes com base na navegação de rota.

Para usar APP_BOOTSTRAP_LISTENER, você precisa adicioná-lo à seção de provedores no AppModule com uma função de retorno de chamada:

@NgModule({
   {
       provide: APP_BOOTSTRAP_LISTENER, multi: true,
       useExisting: runOnBootstrap
   }
   ...
})
export class AppModule {}


10. NgPlural


Pluralização é uma dor de cabeça para programadores. A tarefa de ajuste gramatical das formas das palavras, dependendo do uso do singular / plural, surge constantemente. Alguns sites simplesmente usam o (s) final (is) para isso. Por exemplo:

1 component(s) removed
3 component(s) removed

Ou seja, o próprio leitor deve entender qual número está implícito :)

Angular sugere resolver esse problema de uma maneira mais civilizada, usando a diretiva NgPlural.

O NgPlural adiciona ou remove sub-ramificações do DOM com base em um valor numérico. Para pluralização, é disso que você precisa.

Para usar esta diretiva, você deve definir o atributo [ngPlural] no contêiner do elemento como uma expressão de opção. Os elementos internos com o atributo [ngPluralCase] ​​serão exibidos dependendo das condições especificadas:

<p [ngPlural]="components">
   <ng-template ngPluralCase="=1">1 component removed</ng-template>   
   <ng-template ngPluralCase=">1">{{components}} components removed </ng-template>   
</p>


Agora você pode jogar fora "(s)". A diretiva NgPlural ajudará a derivar a forma correta da palavra, dependendo do significado. Total:

// if 1 component
1 component removed

// if 5 components
5 components removed


Source: https://habr.com/ru/post/undefined/

More articles:


All Articles