Introdução à folha de dicas Angular 2
Angular 2 é uma estrutura de código aberto que foi criada sobre JavaScript. Ele foi usado principalmente para o desenvolvimento de aplicativos Web front-end. É o sucessor do AngularJS. Está escrito em TypeScript. É desenvolvido pelo Google. O Angular 2 é baseado no JavaScript moderno que usa o ES6. O Angular 2 possui melhores recursos de manipulação de eventos, modelos poderosos, melhor suporte para dispositivos móveis e aplicativos da Web para desktop. Também é compatível com dispositivos móveis e em todas as plataformas, como Windows, Mac e Linux.
O Angular 2 possui os principais recursos para desenvolver aplicativos que são componentes, texto datilografado e serviços. O Angular 2 possui diferentes componentes que são módulos, componentes, modelos, metadados e serviço. Os componentes ajudam na criação de aplicativos em vários módulos e ajudam na manutenção do aplicativo por mais tempo. O diferente conjunto de códigos foi mantido e utilizado por diferentes módulos de aplicativo, atendidos pelo recurso de serviço. Os módulos ajudam a dividir o aplicativo em uma parte lógica codificada para executar uma tarefa específica.
Comandos e conteúdo na folha de dicas do Angular 2
A folha de dicas do Angular 2 possui uma extensa biblioteca, escalável, extensível, interativa e contém muitos métodos integrados para calcular operações comuns. Há uma sintaxe diferente para modelos, NgModules, diretivas internas, formulários e outras configurações disponíveis como abaixo:
| Sintaxe do modelo | DESCRIÇÃO |
| Liga a propriedade 'value' ao resultado da expressão 'name' | |
| Liga o atributo 'role' ao resultado da expressão 'my role' | |
| Ele chamará o método como Text, quando o evento click for acionado. | |
| Liga a propriedade a uma sequência interpolada | |
|
Olá meu nome)) | Liga o contexto a uma sequência interpolada |
| Ele configura a ligação bidirecional. | |
|
… | * símbolo transforma o elemento atual em uma temperatura incorporada. |
|
Aluno: ((student? .Sname)) | ? O operador de navegação is informa que o campo do aluno é opcional |
| Ele vincula a largura da propriedade de estilo para expressar o resultado mysize. | |
| Usado para ligação de dados e expressão de ligação de eventos no modelo. | |
|
Nº de carro: ((vehicleNumber | myCarNuFormat)) | Ele transforma o valor atual do número do veículo através do tubo mycarNuformat. |
| Desambigua o elemento de um componente HTML | |
| Liga a presença de classe na expressão da verdade. |
NgModules: - As diferentes diretivas do Ngmodule são:
| Diretivas | DESCRIÇÃO |
| @NgModule ((declarações ..)) | Ele define um módulo que contém diretivas etc. |
| declarações: (MyRedComponent, MyBlueComponent, MyDatePipe) | Ele informará a lista de componentes, diretrizes e tubulações pertencentes a este módulo. |
| exportações: (MyRedComponent, MyDatePipe) | Ele listará os componentes e tubulações visíveis para importar este módulo |
| importações: (BrowserModule, SomeOtherModule) | Ele listará os módulos a serem importados para este módulo |
| provedores: (MyService, (fornecer:…)) | Ele fornece a lista de provedores de injeção de dependência visíveis tanto para o conteúdo do módulo |
| entryComponents: (SomeComponent, OtherComponent) | Ele fornecerá a lista de componentes não referenciados em um modelo acessível. |
Existem outras diretrizes e detecção de alterações de componentes e ganchos de ciclo de vida disponíveis que podem ser implementados conforme os métodos de classe abaixo:
| Diretivas | Descrição |
| construtor (myService: MyService, …) (…) | É usado para injetar dependências. |
| ngOnChanges (changeRecord) (…) | É chamado após cada alteração nas propriedades de entrada e antes de processar o conteúdo ou visualizações filho |
| ngOnInit () (…) | É chamado após o construtor e as propriedades de inicialização |
| ngDoCheck () (…) | É chamado sempre que propriedades de componentes ou diretivas são verificadas. É usado para estender a execução de uma verificação alfandegária. |
| ngAfterContentInit () (…) | É chamado após o ngOninit quando o conteúdo dos componentes ou diretivas foi inicializado. |
| ngAfterContentChecked () (…) | É chamado após cada verificação do conteúdo do componente ou diretiva. |
| ngAfterViewInit () (…) | É chamado após ngaftercontentint quando a diretiva de visualizações de componentes e visualizações de filhos foi inicializada. |
| ngAfterViewChecked () (…) | Ele está sendo chamado após cada verificação das visualizações de componente e visualizações filho em que a diretiva já está. |
| ngOnDestroy () (…) | Ele está sendo chamado uma vez, antes de destruir a instância. |
Dicas e truques gratuitos para usar os comandos do Angular 2 Cheat Sheet: -
- Na cábula Angular2, platformBrowserDynamic (). BootstrapModule (AppModule); ajuda na inicialização do aplicativo, usando o componente root can do especificado.
- No Angular2, o bootstrap: (MyAppComponent) listará os componentes a serem inicializados quando este módulo for inicializado.
- isso é incorporado na diretiva angualr2 para remover ou recriar uma parte da árvore Dom com base na expressão.
- transforma o elemento da lista e seu conteúdo em modelo e está sendo usado para instanciar uma exibição para cada item da lista.
- "ExpressionExpresion"> esta diretiva está sendo usada para selecionar os modelos com base no valor da expressão ou em palavras simples, como alternar maiúsculas e minúsculas.
- , essas diretivas permitem atribuir estilos a um elemento HTML usando CSS e esse CSS pode ser acessado diretamente.
- essa diretiva vincula as classes CSS no elemento aos valores confiáveis do mapa.
- Essa diretiva fornece a ligação, análise e validação bidirecional para controles de formulário.
- selector: '.cool-button: not (a)' é a configuração da diretiva que especifica o seletor CSS que identifica essa diretiva no modelo. Ele não suporta o seletor filho pai.
- pro viders: (MyService, (fornecer:…)) fornece a lista de provedores de injeção de dependência para diretiva e filhos.
- (fornecer: MyService, useClass: MyMockService), ele definirá ou substituirá o provedor pelo serviço da classe.
- (fornecer: Meu valor, use Valor: 4) definirá ou substituirá o valor do provedor para 4
Conclusão - Folha de dicas Angular 2
A folha de dicas do Angular 2 possui muitos recursos e diretivas diferentes; estão disponíveis módulos para desenvolvimento que ajudam a tornar o aplicativo mais interativo para usuários e desenvolvedores para rastrear problemas e funcionalidades. É extenso e reutilizável para outras aplicações. Angular2 está usando o texto datilografado, completamente diferente da versão anterior do AngularJS.
A folha de dicas angular 2 é mais fácil de aprender, pois sua curva de aprendizado é simples e direta para iniciantes e também para estudantes. O conhecimento de JavaScript seria uma vantagem ao usar o angular para desenvolvimento. É sempre bom nos capacitar.
Artigos recomendados
Este foi um guia para a seção de dicas do Angular 2, aqui discutimos o conteúdo e o comando, além de dicas e truques gratuitos da folha de dicas do Angular 2. Você também pode consultar o seguinte artigo para saber mais -
- A folha de dicas do UNIX
- Cheat Sheet HTML
- Cheat Sheet CCNA
- Batota JQuery