Componentes do Angular

Name: Componentes do Angular
Author: Michaela Ochnich

Aprende as funções dos componentes, como usares o decorador de componentes e como exibires dados no modelo de componente

Preview the first lesson free — get full access to all 5 lessons.

Solicitar uma demonstração Entrar

Curso: sob demanda

Olá, esta lição apresentará o que é um componente angular, e como criar um usando a CLI Angular. Os componentes são a base da estrutura angular. Um componente é uma parte do aplicativo, como uma barra de navegação, ou uma barra de navegação lateral. Pode ser um campo de pesquisa, ou talvez um formulário de registro. Os componentes são as diferentes peças que constroem seu aplicativo, fornecendo uma visão para os usuários interagirem, e uma aula para responder aos eventos, e lidar com os dados e a lógica. A classe controla a lógica e o comportamento do componente, e o modelo configura como é renderizado na tela para o usuário. A classe e o modelo do componente são capazes de interagir e compartilhar informações usando vinculação. Vinculação de propriedade permite que a classe para passar dados ao modelo para exibir ao usuário. Se o usuário alterar algum dado na visualização, associação de evento pode ser usada para disparar um evento que atualiza os dados da classe. Os metadados fornecem informações de configuração extras para a classe de componente. Os componentes são nomeados com uma propriedade chamada seletor que é definido nos metadados. O seletor é usado para dizer ao Angular onde na aplicação este componente deve ser criado e mostrado. Usando o seletor, você pode incorporar componentes, e outros modelos de componentes começando com este componente raiz, que contém toda a aplicação Angular. Esses componentes incorporados têm relacionamentos pai / filho que permitem que eles interajam e passem dados. Um componente filho é incorporado a um componente pai. Então, aqui, o componente raiz é o pai, e então tem dois componentes filhos, A e B. O componente A aqui é o componente pai a este componente aqui embaixo, o componente neto. Este componente é neto do componente raiz uma vez que é filho de um dos componentes filhos da raiz. Agora, para criar um componente, abrir uma janela do Terminal, e você deseja ter certeza de que está no diretório correto. Você quer estar na pasta raiz de sua aplicação Angular. Então, para mim, essa é a pasta de componentes aqui. Em seguida, o comando para criar um novo componente é do componente de geração, e o nome do componente. Então você pode ver na saída impressa que quatro novos arquivos foram criados, e o arquivo app.module foi modificado. Dentro do arquivo do módulo, você pode ver que importa automaticamente o componente aqui, e então o declara para uso no módulo aqui. A ferramenta CLI cuida dessa etapa ao gerar o componente. Então, se você estiver criando seus arquivos de componente manualmente, não se esqueça de declará-los aqui, ou o aplicativo será compilado com erros. A pasta do componente está aqui dentro desta pasta principal do aplicativo, e há quatro arquivos criados pela CLI. Este primeiro arquivo TypeScript aqui é usado para escrever testes para o componente. Este segundo arquivo TypeScript aqui é aquele que é para a classe. Aqui está o decorador que marca esta classe como um componente, e os metadados para configurá-lo. Abordaremos isso com mais detalhes na próxima lição, mas lembre-se do nome do seletor aqui. Isso é o que você precisa para adicionar este componente ao aplicativo. Se você abrir o arquivo HTML do componente, você pode ver que começa com esta tag de parágrafo aqui que afirma que o componente está funcionando. E então, se você abrir o arquivo CSS aqui, este começa em branco, mas podemos escrever rapidamente uma regra para mudar a cor da fonte dessa tag de parágrafo. Agora, para exibir este componente no aplicativo, abra o arquivo app.component.html, que é o arquivo de modelo para o componente raiz. Aqui você pode excluir todo o código do modelo inicial. E então vou adicionar rapidamente uma tag h1 que diz meu aplicativo angular. Então, para adicionar o novo componente, escreva uma tag usando o seletor que foi definido para o componente. Nesse caso, era app-hello-world. Agora vou executar o comando's ng serve na janela Terminal para construir o aplicativo. Agora que o aplicativo está em execução, Vou abri-lo em uma janela do navegador, e você pode ir para localhost: 4200 para visualizar o aplicativo. E aqui você pode ver o app está exibindo aquele componente que foi criado. Isso é tudo para esta lição, Apresentando componentes angulares. Confira a próxima lição onde cobriremos o decorador e os metadados.

Principiante Fornecedor : Michaela Ochnich 5 lições · 25m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Chinese

Descrição do curso

Estas lições apresentam os componentes Angular e como eles controlam a visualização de uma aplicação Angular. Aprenderás sobre o decorador de componentes e como ele é usado para configurar o componente. Também aprenderás a exibires dados no modelo de componente. Por fim, aprenderás sobre os diferentes tipos de vinculação de dados e os ganchos do ciclo de vida do componente.

O Que Você Vai Aprender

Compreender o que é um componente Angular e como ele controla a visualização de uma aplicação Angular
Configurar componentes usando o decorador de componente
Exibir dados no modelo de componente
Aplicar os diferentes tipos de vinculação de dados
Trabalhar com os hooks do ciclo de vida do componente

Principais Conclusões

Os componentes Angular controlam a visualização de uma aplicação Angular.
O decorador de componente é usado para configurar o componente.
Os modelos são usados para exibir dados no componente.
Angular suporta diferentes tipos de vinculação de dados.
Os componentes têm hooks de ciclo de vida que podem ser usados durante o seu ciclo de vida.

Perguntas Frequentes

O que este curso abrange?

Ele apresenta os componentes Angular e como controlam a visualização de uma aplicação Angular, incluindo o decorador de componente, exibição de dados no modelo de componente, os diferentes tipos de vinculação de dados e os hooks do ciclo de vida do componente.

Quais habilidades vou ganhar com este curso?

Você ganhará habilidades em Angular (Web Framework), Angular Components, Angular UI, Component Libraries, HTML Components e UI Components.

Quais tópicos são ensinados nas lições?

As lições cobrem o que é um componente, o decorador de componente, modelos, vinculação e o ciclo de vida do componente.

Quais são os objetivos de aprendizado deste curso?

Os objetivos são aprender sobre componentes Angular e suas funções e aprender os diferentes tipos de vinculação de dados.