Curso rápido de Angular!

1. 0101O que é Angular: O que é angular? Angular é uma estrutura para criar aplicativos dinâmicos de página única. Obviamente, se você é iniciante, essa definição pode não estar fazendo todo o sentido Então, para entender essa definição, vamos começar entendendo como um aplicativo web simples funciona. Digamos que você tenha visitado um site de comércio eletrônico e tenha inserido esta barra eletrônica do Oral shop.com. Talvez tenha clicado Talvez tenha O navegador então enviaria a solicitação ao servidor solicitando uma lista de itens eletrônicos O servidor processaria a solicitação e, em seguida, poderia consultar o banco de dados solicitando uma lista de registros, que neste caso são eletrônicos Depois de recuperado, ele enviaria a resposta de volta ao cliente ou ao navegador Agora, antigamente, costumávamos usar tecnologias como php, asp.net, RubonRails ou jango para gerar dinamicamente o STML e enviá-lo de volta ao o STML e enviá-lo Portanto, esse STML tem os dados agrupados com STML ou a lógica de apresentação necessária para que possam ser renderizados no navegador Mas há muitos problemas com essa abordagem. Você pode pausar o vídeo e tentar adivinhar? Em primeiro lugar, teremos problemas com o desempenho porque gerar STML dinâmico consome muitos recursos e, se houver uma grande quantidade de tráfego chegando ao servidor, isso exigirá muitos recursos, afetará o desempenho, aumentará o custo e, eventualmente, também poderá afetar a experiência do usuário, porque as páginas da Web podem estar renderizando muito lento. Pode haver alguma latência. Outro problema em que podemos pensar é a complexidade da base de código. Os desenvolvedores de back-end precisam escrever código para gerar STML dinamicamente, e isso aumentará a complexidade da base de código e portanto, a capacidade de manutenção da base de código Além disso, os desenvolvedores de back-end também precisam aprender tecnologias de front-end para realizar seu trabalho. Em terceiro lugar, e o mais importante, haveria problemas de compatibilidade Agora, o HTML pode ser entendido por um navegador, mas e se o cliente for um aplicativo móvel Ou se algum outro aplicativo quiser ler os dados? Bem, se um aplicativo está solicitando dados, não podemos enviar HTML para eles. Eles precisam fazer esse trabalho adicional de remover toda a parte da apresentação, remover todas as tags TML e extrair os dados, o que não é nada prático Então, temos uma solução para esse problema? Bem, que tal enviarmos os dados e deixarmos o cliente cuidar da parte da apresentação? Isso resolveria o problema? Vamos dar uma olhada. Então, em vez de enviar STML, agora enviaríamos JSON Se você está se perguntando o que é JSON, simplesmente dados em um formato padronizado que todos os outros clientes estão dispostos a entender Por exemplo, se estivermos solicitando uma lista de eletrônicos , a resposta JSON do servidor pode ser mais ou menos assim, e todos os clientes estão preparados para entender Por exemplo, desenvolvedores de aplicativos móveis podem escrever algum código, que passará por esse JSON e extrairá os dados de que precisam Da mesma forma, algum outro aplicativo pode usar algumas bibliotecas existentes para ler facilmente os dados da resposta JSON E hoje em dia, todas essas tecnologias de supervisão, como Java, jango, PHP, node JS, que são uma escolha muito popular atualmente, enviam apenas dados JSON e não se preocupam em gerar tamicamente ou incluir Mas temos um problema aqui. Esse JSON pode ser lido pelo aplicativo móvel ou por algum outro aplicativo ou algum outro cliente Mas e quanto aos navegadores? Não podemos simplesmente mostrar imediatamente esses dados JSON no navegador e esperar que o usuário tenha uma experiência muito boa Eles querem ver os dados de uma forma visualmente agradável e querem poder interagir com o aplicativo com links, botões, formulários, etc Portanto, ainda precisamos ter HTML, CSS e JavaScript em algum lugar para que possamos fazer isso. Como podemos fazer isso? Vamos dar uma olhada. Então, digamos que o usuário tenha visitado shop.com. No momento em que o cliente visita esse site, o navegador envia a solicitação ao servidor solicitando o arquivo Index SML. Dessa vez, o servidor responderia com todos os arquivos HTML CSS e JavaScript de que você precisar E para todas essas solicitações subsequentes, ele responderá apenas com os dados no formato JSON Quando você visita um site tradicional, toda vez que clica em um link ou acessa uma página específica, o navegador recarrega a página inteira, enviando uma solicitação ao servidor e recebendo uma nova página HTML em resposta No entanto, nesse caso, o navegador carrega toda a estrutura do aplicativo, HTML, CSS, JavaScript, tudo apenas uma vez. Depois disso, quando você clica em um link ou navega pelas páginas, a página não é recarregada Em vez disso, o aplicativo atualiza dinamicamente o conteúdo usando JavaScript. Ele atualiza dinamicamente o conteúdo ou os dados JSON usando o JavaScript, que já está presente Então, essencialmente, ele age como um aplicativo de página única. Assim como você tem um aplicativo móvel em execução no Android, você terá esse aplicativo criado usando TML, CSS e JavaScript em um navegador E assim como seu aplicativo móvel não precisa ser recarregado toda vez que você interage com ele Mesmo isso, não exige que a página recarregada toda vez que o cliente interage com o aplicativo no navegador Alguns dos exemplos de aplicativos de página única são Facebook, LinkedIn, Twitter e muitos outros O Instagram também é um aplicativo de página única. Ao percorrer a postagem, você não verá a página sendo recarregada Isso porque ele está funcionando nesse modelo. A primeira vez que você visita facebook.com, ele já baixou todo o CSS e JavaScript HTML necessários E para todas as solicitações subsequentes, o servidor responde apenas com os dados no formato JSON e está sendo preenchido em vários componentes A verdadeira questão é: como vamos construir esses HTML, CSS e JavaScript? Vamos literalmente usar SML, CSS e JavaScript para criar esses aplicativos Isso não faz sentido. Isso exigirá uma quantidade inimaginável de esforço, tempo e energia, e é simplesmente impossível É aí que o angular entra em cena. Angular é uma estrutura. O que é a estrutura é apenas um monte de bibliotecas ou código pré-escrito, o que facilitará a vida do desenvolvedor , para que ele não precise escrever CSS e JavaScript em HTML do zero Usamos o angular para criar esses aplicativos dinâmicos de página única. Se você quer construir um carro, não faz sentido construir cada componente do zero. Você deseja obter componentes de vários fornecedores e montá-los da maneira que desejar Da mesma forma, você usará a estrutura angular para criar os aplicativos conforme desejar. Espero que faça sentido. Te vejo em seguida. 2. 0102 NodeJS vs Angular: É muito importante entender a diferença entre angular e node J, porque geralmente pensamos nodejs como algo que acontece no lado do servidor e no angular é algo que acontece no lado do cliente No entanto, precisamos do nodejs para poder construir ou desenvolver aplicativos angulares Na verdade, seja qualquer tipo de aplicativo JavaScript, como nodejs, react ou até mesmo view Precisamos do nodejs para poder criar ou desenvolver esses aplicativos Então, vamos tentar entender o papel do node JS no desenvolvimento angular. Angler é algo que funciona no lado do cliente, o que significa que é um aplicativo JavaScript executado no navegador Por outro lado, o nodejs é executado no servidor, e tanto o NodeJS quanto o angler são aplicativos JavaScript e precisam do tempo de execução do JavaScript para serem Para aplicativos de pescadores, temos um navegador que executa No entanto, para o node js, temos o tempo de execução do nodejs para que possamos implantar nosso aplicativo nesse ambiente e, em seguida, ele possa começar a atender à Agora, até agora, o nodejs não tem nenhum tipo de papel no angular Não precisamos do nodejs para poder executar aplicativos angulares O navegador já está fazendo esse trabalho. No entanto, para criar aplicativos angulares, precisamos do nodejs Para entender isso melhor, vamos dar uma olhada em como o aplicativo nodejs é realmente desenvolvido e Então, primeiro de tudo, você precisa instalar o nodejs em sua máquina local e, em seguida, normalmente você tende a executar esses comandos Agora, essa não é uma lista exclusiva de comandos, mas só para dar uma ideia, vou mostrar alguns comandos que podemos executar durante o desenvolvimento de aplicativos nodejs Em primeiro lugar, depois de instalar o node JS, você pode inserir este comando NPM nele, que inicializará o projeto e introduzirá o pacote dot js no arquivo com algumas informações básicas Portanto, ele pode basicamente pedir que você insira a descrição do nome do projeto, e assim por diante. Depois disso, você também pode instalar o Express. A instalação do Express é praticamente um padrão hoje em dia porque vem com alguns códigos e bibliotecas pré-escritos, que podemos usar imediatamente Por exemplo, facilita a introdução de roteamento, tratamento de solicitações, respostas, etc E você também pode instalar o typescript. Também é praticamente uma prática padrão usar texto datilografado em vez de JavaScript bruto, porque o texto datilografado é como uma versão evoluída do Isso tornará nosso trabalho muito mais fácil. Então, depois de instalar o texto datilografado, você começaria a escrever o código e, depois disso, teria que traduzir esses arquivos datilografados em arquivos Javascript equivalentes para que o registro do nodejs ou do nodejs Javascript, em tempo depois de instalar o texto datilografado, você começaria a escrever o código e, depois disso, teria que de execução, possa realmente executá-lo de execução, possa realmente executá-lo . Então, depois de fazer isso, você pode realmente testar as coisas com o NPM start E quando estiver pronto com tudo, você implantará esse aplicativo no servidor de produção e, em seguida, ele poderá começar a resolver a solicitação. No entanto, no que diz respeito ao angular, não podemos usar esses comandos nod Just porque a forma como os projetos angulares são tratados é um pouco diferente da forma como os projetos nod Jz Por exemplo, a estrutura do projeto será diferente no caso de angular. Portanto, para executar comandos específicos do anglo, precisamos de outra ferramenta chamada CLI angular Precisamos instalá-lo em nossa máquina local. E a forma como vamos instalá-lo é executando o comando NPM Portanto, todos esses comandos que começam com NPM são comandos específicos do nodejs Para instalar o angular CLI, precisamos primeiro ter o node JS instalado Só então poderemos realmente executar esse comando. Na verdade, a própria CLI angular foi escrita usando JavaScript e precisa de algum tempo de execução de JavaScript para poder se executar sozinha E mais uma vez, essa inscrição é node JS. Portanto, mesmo para desenvolver aplicativos angulares, precisamos primeiro instalar o Node js em nosso computador local. Em seguida, vamos instalar o angular CLI, que nos permitirá executar alguns comandos específicos do anglo Depois de instalar o angular CLI, você pode executar comandos específicos do anglo Por exemplo, o motor U, e então você mencionará o nome do projeto, ele criará uma estrutura básica do projeto com todos os pacotes e bibliotecas básicos que precisamos para começar a desenvolver aplicativos angulares. Tecnicamente, pode fazer tudo isso sem instalar o Anglo CLI, mas esse é um processo muito É por isso que temos o anglo CLI para facilitar nosso trabalho. Isso vai fazer muito trabalho pesado para nós. E então você pode realmente começar a escrever código em texto datilografado e, em seguida, servir o aplicativo para testar coisas e, eventualmente, criar o aplicativo, que basicamente traduzirá todos esses arquivos datilografados em JavaScript equivalente, porque é isso que os navegadores entenderiam todos esses arquivos datilografados em JavaScript equivalente, porque é isso que começar a escrever código em texto datilografado e, em seguida, servir o aplicativo para testar coisas e, eventualmente, criar o aplicativo, que basicamente traduzirá todos esses arquivos datilografados em JavaScript equivalente, porque é isso que os navegadores entenderiam. E então você vai mantê-lo em algum lugar no servidor. Sempre que alguém visita seu site, o servidor envia de volta todos esses arquivos e os carrega no navegador. Agora, o principal a entender aqui é que, no caso do nodejs, precisamos do nodejs não apenas para desenvolver ou construir o aplicativo, mas também para realmente executá-lo no lado do servidor Já no caso do pescador, precisaremos do nó J para construir ou desenvolver o aplicativo angular, mas não precisamos realmente dele para executar o aplicativo angular em produção porque temos um navegador que está fazendo esse trabalho. Espero que faça sentido. Te vejo em seguida. 3. 0103 Como configurar o ambiente de desenvolvimento: Configurar a inscrição de desenvolvimento para o angular é muito simples Envolve essas três etapas. Primeiro de tudo, vamos instalar o Node js e, em seguida, vamos usar o comando nodejs para instalar a CLI angular para que possamos começar executar os comandos específicos do anglo E então precisamos de um editor de código-fonte, uma ferramenta robusta que nos ajudará a escrever, criar e depurar o código com mais eficiência em comparação com um bloco de notas padrão O código do Visual Studio faz esse trabalho. Vamos ver como tudo isso é feito. Portanto, esta é a página inicial oficial do nodjs isndjs.org e já podemos ver a opção e já podemos Se você clicar nele, ele fará o download do instalador e, em seguida, você poderá instalar o NodeJS, mesma forma que instalaria qualquer outro software É muito simples. No entanto, se você quiser ter um melhor controle sobre como deseja fazer o download, acesse a guia Download e aqui podemos instalar e configurar o node JS usando um gerenciador de pacotes, ou podemos usar um instalador pré-construído como o que acabamos de ver, ou podemos simplesmente baixar os binários e instalar manualmente E se você quiser, também podemos baixar o código-fonte. Essa abordagem direta é, obviamente, usar um instalador pré-construído Você poderia escolher a versão que deseja baixar e o sistema operacional. Mas se você quiser mudar a versão, podemos fazer isso. Se você estiver trabalhando para uma empresa corporativa , é recomendável escolher uma das versões LTS. LTS significa suporte de longo prazo. Portanto, todas as versões rotuladas como LTS receberão suporte e manutenção da comunidade No Jess por vários anos após Portanto, essas são versões mais estáveis, mas para fins de aprendizado, podemos usar a versão mais recente e a melhor. Vou escolher a versão mais recente e clicar em Baixar. Eu já baixei e está lá no meu desktop. Mas se você quiser se aventurar mais, podemos escolher a opção de gerenciador de pacotes e, por padrão, ela escolheu F&M que significa fast Node Portanto, se você quiser usar o Node Manager rápido para instalar o Node JS , tudo o que você precisa fazer é executar todos esses comandos na ferramenta de linha de comando do Windows ou usando o PowerShell Mas antes de executar esses comandos, você precisa ter o gerenciador de pacotes do Windows instalado ou o Wind get. Você pode obtê-lo facilmente na Windows Store. Depois de instalar o Gerenciador de Pacotes do Windows, você pode executar todos esses comandos para instalar o Node Manager rápido e, em seguida, configurar o nroment e, seguida, configurar o nroment e finalmente, baixar Se você é iniciante, basta usar o instalador. Você não precisa seguir essa abordagem. Mas você pode estar se perguntando por que queremos usar o gerenciador de pacotes em vez de apenas instalar o node JS usando um instalador? Bem, a F&M nos dará alguma flexibilidade de alternar entre diferentes versões de nós Por exemplo, se você estiver testando compatibilidade e quiser testá-la em uma versão diferente do node JS, F&M tornará isso muito fácil Apenas executando alguns comandos, podemos mudar para uma versão diferente do nó. Basicamente, isso nos salvará de ter que desinstalar e reinstalar uma versão diferente do node JS Mas se você é iniciante, é provável que não queira fazer nada parecido Basta baixar o instalador e instalar o Node js. Também temos várias outras opções aqui. Se você quiser instalar o Node JS em um contêiner Docker , essas são todas as listas de comandos que precisamos executar e isso instalaria o Node JS Depois de baixar o instalador, basta clicar duas vezes nele. Deixe tudo como está, aceite a licença e conclua a instalação. Clique em Concluir. Depois de instalado para verificar nossa instalação, vamos iniciar a linha de comando parcial ou do Windows com privilégios de administrador É muito importante que você inicie seu Poial com privilégios administrativos Se você pressionar a tecla Shift e clicar com o botão direito na tela, poderá ver a opção de iniciar o Pill, mas isso não ocorre com privilégios de administrador Então, vamos clicar na tecla Windows e depois pesquisar o PowerShell Clique com o botão direito do mouse e clique em Executar como administrador. Então, isso abriu o Windows Power Shell. Vamos verificar se nosso node JS está instalado. Eu vou dizer o hífen do nó B, B para a versão, e ele exibiu a versão Da mesma forma, também vou verificar se NPM significa gerenciador de pacotes de nós É usando essa ferramenta que vamos instalar todos os pacotes que precisamos em nosso projeto. Agora, esse comando falhou porque, por padrão, por motivos de segurança, o PowerShell não nos permite executar nenhum script Para corrigir isso, precisamos mudar nossa política de execução. Vamos primeiro descobrir a política de execução. E atualmente está definido como restrito. Vamos mudar isso para irrestrito para que possamos executar scripts usando parcial Vou dizer sim digitando Y. Vamos limpar a tela e tentar executar o comando novamente E foi exibido. A próxima coisa que faremos é instalar o angular CLI, e o comando para isso é usar o gerenciador de pacotes node para gerenciador de pacotes node para instalar o angular CLI com uma opção global Com a opção hífen G, estamos dizendo que queremos instalar o angular CLI globalmente para que possamos executar os comandos angulares de qualquer diretório Se não definirmos isso como global , a CLI angular será limitada apenas ao diretório atual Se você quiser instalar pacotes limitados a um projeto específico , não queremos usar a opção hífen G. Podemos mantê-los locais. No entanto, queremos que a CLI angular esteja disponível para todos os projetos em todos os diretórios Então, queremos definir isso como global com essa opção hífen G. E então vamos especificar a CLI angular Isso deve instalar o anglo CLI e levará algum tempo Agora, vamos verificar se o anglo CLI está instalado executando o comando angular Essa é a versão de hífen NG. E exibiu a versão, o que significa que instalamos o Angular CLI com sucesso Em seguida, vamos instalar o Visual Studio Code, e este é o site oficial do Visual Studio Code. Isso é muito simples. Tudo o que você precisa fazer é baixar o instalador e instalá-lo. Uma vez feito isso, é assim que o código do Visual Studio deve ser. Espero que faça sentido. Te vejo em seguida. 4. 0104 Componentes em Angular: Então, quais são os componentes em ângulo? Vamos dar uma olhada. Imagine que esta é a sua página do Facebook. Agora, esta página é composta por vários blocos ou, por enquanto, vamos chamá-los de componentes de interface do Por exemplo, podemos ter um componente chamado fotos que exibiria suas fotos e, em seguida, você pode ter um componente chamado A, que fala sobre você. E então podemos ter outro componente chamado pose que exibiria sua pose. Também podemos ter componentes dentro de outro componente. Por exemplo, o componente post pode ser composto por dois componentes chamados criar postagem e exibir postagem Criar postagem permitiria que você criasse uma postagem, e a postagem de exibição exibiria apenas a postagem mais recente, e a pose de exibição seria atualizada dinamicamente à medida que percorremos a página Isso significa que, à medida que percorremos a página, veremos uma nova postagem sendo preenchida e todos esses componentes podem estar residindo em um componente principal Agora, eu tenho uma pergunta para você. O que é preciso para construir esses componentes? Vamos pegar o componente Display pose, por exemplo. O que é preciso para construir esse componente? Vou te dar uma pista. Precisamos de HTML porque é isso que o navegador entende. Caso contrário, não veríamos nada no navegador. O que mais precisamos? No estilo, é claro, precisamos de CSS ou algo semelhante para torná-lo visualmente atraente , também precisamos de dados, que geralmente são obtidos do servidor E então também precisamos da lógica ou do código que daria alguma inteligência ao componente. Por exemplo, o usuário pode querer interagir com o componente pressionando o botão curtir ou enviar um comentário Sempre que o usuário insere o texto e clica em enviar ou adicionar comentário, a lógica subjacente ou o código executados para que esse comentário seja adicionado à postagem A combinação de tudo isso, a visão que é TML e CSS, dados e lógica é o que é o componente angular Um componente angular seria composto por tudo isso, de modo que, quando executarmos nosso aplicativo, veremos esses componentes sendo carregados A melhor maneira de entender o componente angular é dando uma olhada em um código de amostra. Agora, obviamente, isso não é um código completo. Isso é apenas para dar uma ideia que é um componente angular. Isso inclui a visualização, que é uma combinação de TML e CSS Aqui, estamos tentando apontar para um arquivo TML e um arquivo CSS Portanto, todo o estimul e CSS necessários para esse componente específico residiriam nesses E então também temos a lógica subjacente que daria alguma inteligência ao componente. Por exemplo, no caso de exibição de postagem, podemos ter um método chamado post que terá algum código para dizer o que aconteceria se o usuário clicasse em um botão curtir. Então, também podemos ter outro método chamado adicionar comentário, definindo o que aconteceria se o usuário adicionasse um novo comentário. Os dados seriam obtidos do servidor, o que não estamos vendo nesse código específico, mas com certeza exploraremos isso no futuro Mas espero que você tenha uma ideia do que é um componente angular. Quando analisarmos o exemplo, você o entenderá ainda melhor. Te vejo em seguida. 5. 0105 Como criar um porjeto angular com passo a passo do projeto: Ok, vamos ver como podemos criar nosso primeiro projeto de pescador E para isso, lançaremos nosso código do Visual Studio e, em seguida, precisaremos iniciar o terminal. Podemos usar o terminal que já faz parte do Visual Studio Code ou também podemos usar qualquer ferramenta de linha de comando, como a linha de comando do Windows, o PowerShell etc Desde que você possa executar comandos anglo a partir dessa ferramenta, devemos estar bem Para iniciar o terminal no código do Visual Studio, devemos clicar no terminal no menu e depois clicar em Novo terminal. Também criei uma nova pasta no meu Windows, onde hospedaremos todos os nossos projetos angulares. Vou copiar seu caminho e vamos para esse diretório. Vou criar suportes de CD para diretório de cadeia e vou colar o caminho. Então, agora estamos nesse diretório recém-criado, e é aqui que vamos criar nosso novo projeto angular. O comando para criar um novo projeto angular é NG New. E então vamos especificar o nome do projeto. Vou simplesmente chamá-lo de meu aplicativo. Agora, aqui temos várias opções. Eu recomendaria que você usasse o SCSS. O SCSS é como uma versão evoluída do CSS. Se você estiver familiarizado com CSS, poderá entender facilmente o SCSS E mesmo que você não saiba nada sobre estilo, você pode entendê-lo facilmente à medida que avançamos neste curso Então, por enquanto, vamos escolher a opção SCSS e pressionar Enter ou Return Agora, ele está nos perguntando se queremos habilitar a renderização do lado do servidor e a geração estática do lado Vamos explorá-los mais tarde, mas tentarei dar uma ideia do que são. Normalmente, quando você visita uma página da web criada com angular, o navegador baixa todo o Javascript e, em seguida, cria a página no seu computador O servidor apenas enviará os dados. Isso é chamado de renderização do lado do cliente, e a renderização do lado do cliente é mais comumente usada A renderização do lado do servidor ou SSR funciona como sites tradicionais em que a página é criada primeiro no servidor e a estimativa completa é enviada ao navegador Agora, existem prós e contras, que exploraremos posteriormente, mas na maioria das vezes preferimos a renderização do lado do cliente A geração de sites estáticos ou SSG nos permitirá gerar arquivos TML estáticos para nosso site quando construirmos nosso projeto E esses arquivos estáticos são então servidos diretamente aos usuários, o que é rápido porque não há necessidade de esperar que o servidor crie nada. Funciona como um site estático e é útil para um site de documentação em que todas as páginas são pré-construídas como arquivos TML Mas, como eu disse antes, na maioria dos casos, se for uma aplicação angular, não usaremos nenhuma delas. Usaríamos a renderização padrão do lado do cliente. Mas, por enquanto, podemos dizer sim a essa opção para que o Angler inclua todas as configurações necessárias para elas E caso queiramos usá-los, podemos usá-los. Então, vamos dizer sim digitando Y e, em seguida, pressionando Enter Agora, isso vai demorar um pouco para criar o projeto. Deixe-me pausar o vídeo e voltar atrás quando estiver pronto. Ok, nosso projeto agora está criado e, se você acessar o Project Explorer, vemos uma opção para importar uma pasta ou abrir uma pasta, clique nela. Vamos novamente para o diretório e escolher o projeto angular que acabamos de criar. Clique nele e clique em Selecionar pasta. Então, isso importará nosso projeto, e essa é a estrutura angular típica do projeto. Deixe-me explicar rapidamente o que estamos vendo aqui. Então, primeiro, temos o diretório SRC. É aqui que reside o código real da aplicação angular. Ele contém os componentes, serviços, blocos, ativos e arquivos de configuração do aplicativo . Vamos explorar rapidamente suas principais subpastas e arquivos. Então, temos essa pasta de aplicativos, e é aqui que temos o componente raiz. Portanto, todos os arquivos que começam com componente app dot são todos correspondentes ao componente raiz. O arquivo dot Ts do componente app dot é o arquivo de texto datilografado do componente raiz E, assim como com qualquer outro componente, ele está apontando para o arquivo de modelo ou STML correspondente e também para o URL de estilo correspondente Então esse é o STML e esse é o arquivo de estilo correspondente Além da pasta do aplicativo, também temos vários outros arquivos. Por exemplo, o arquivo TS de ponto principal é como o ponto de entrada para nosso aplicativo. Basicamente, ele inicializa o módulo raiz ou o módulo do aplicativo E também temos o arquivo HTML de índice, que contém o próprio aplicativo pescador, e esse é o arquivo que é servido sempre que alguém visita nosso site pela primeira vez Também temos seu arquivo de estilos correspondente. E então temos um arquivo JSON de pontos angulares. Este é o arquivo de configuração principal da CLI angular. Basicamente, ele define as configurações para criar, testar e servir o aplicativo. Então, aqui é onde podemos configurar várias opções de construção e configurar quais ativos, estilos e scripts estão incluídos, etc Vamos explorar tudo isso mais tarde. E então também temos o pacote dot JSON. Esse arquivo contém metadados sobre o projeto, incluindo dependências e scripts Portanto, temos dependências que são necessárias durante o tempo de execução. Então, também temos várias dependências que precisamos para o desenvolvimento, mas não são necessariamente necessárias durante o tempo de execução Por exemplo, o anglo CLI é algo que precisamos para desenvolvimento e teste, mas não durante Outro arquivo importante éstsconft dot Json. É um arquivo de configuração do TypeScript que define como o texto datilografado Você pode alterar essas opções do compilador de acordo com sua necessidade E então também temos os módulos de nós. Esse diretório contém todas as dependências, bibliotecas e pacotes instalados via NPM Normalmente, você não precisa modificar nada aqui. Ele é gerado automaticamente. Também existem vários outros arquivos, mas não precisamos realmente prestar atenção a esses arquivos pois eles não agregarão nenhum valor ao nosso projeto ou ao nosso aprendizado. Então, essa é uma visão geral rápida do que temos no projeto anglo Vamos explorar tudo isso em detalhes mais tarde , mas, por enquanto, espero que isso tenha nos dado um bom começo para começar a escrever nosso código. Te vejo em seguida. 6. 0106 Como criar componente angular e lançar o aplicativo: Vamos dar uma olhada em como podemos gerar ou criar um novo componente em angular e, em seguida, também explicarei o que está dentro de um componente. Então, o comando para criar ou gerar um novo componente é NG generate component, e então você vai dar o nome para o componente. Vou chamar isso de pose. Então, isso criou uma nova pasta com o nome do componente, e essa pasta tem todos os arquivos específicos do componente. Vamos abrir esse arquivo datilografado e tentar entender o que está lá Em primeiro lugar, temos esse decorador de componentes que diz ao Angler que essa classe é um componente e fornece alguns metadados que ajudam pescador a entender como criar e Então, primeiro de tudo, temos o seletor. Isso define uma etiqueta de estimativa personalizada o pescador usará para exibir esse componente específico Se esse componente fosse parte de um componente pai, esse é um nome de tag que devemos usar. Temos o standalone definido como verdadeiro. Isso permite que esse componente exista sem fazer parte de nenhum módulo angular. Bem, antes do angular 14, precisamos ter todos os nossos componentes definidos dentro de um módulo. Com as versões mais recentes do angular, ele não é mais necessário e podemos definir componentes autônomos Se você não sabe o que é módulo, obviamente, não podemos falar sobre isso agora. Vamos explorá-lo em outra ocasião. Em seguida, temos as importações. É aqui que podemos listar todos os módulos angulares ou outros componentes autônomos dos quais esse componente específico depende. A seguir, temos o URL do modelo e isso aponta para o arquivo STML que define a estrutura ou a interface do usuário desse Nesse caso, o arquivo está localizado no mesmo diretório do componente e é chamado de post dot component dot dot HTML, que corresponde a esse arquivo específico. Da mesma forma, também temos esse URL de estilo que aponta para o arquivo SCSS que define os estilos desse componente específico Você pode escrever código SCSS nesse arquivo para estilizar o componente Então, agora, por padrão, pescador preencheu algum HTML no arquivo HTML da postagem Mas, no momento, não temos nenhum estilo para isso. Em breve, apresentaremos alguns códigos aqui. Também temos esse arquivo spec dot Ts, que é um arquivo de teste para o componente Obviamente, como você é iniciante, talvez não consiga entender esse código, então vamos guardá-lo para outra hora Agora vamos tentar iniciar esse aplicativo e ver o que vai acontecer. Mas antes disso, precisamos incluir esse componente específico como parte do componente mestre ou do componente do aplicativo. Então, vou copiar esse seletor e acessar o arquivo de estimativa do componente do aplicativo No momento, ele está preenchido com algum conteúdo padrão. Podemos simplesmente excluí-lo e apresentaremos nosso próprio código. Se você perceber que temos um erro aqui, é porque precisamos importar esse componente dentro do arquivo datilografado correspondente Vamos até esse componente do aplicativo dot Ts, o arquivo TypeScript, e então vamos incluir nosso componente post O nome do componente é o nome da classe. Vou copiá-lo e usá-lo aqui. Se eu usar meu mouse, podemos realmente importar esse componente automaticamente. Portanto, essa instrução de importação é gerada automaticamente pelo código do Visual Studio. Agora, deixe-me salvar o arquivo iniciar nosso aplicativo e ver o que vai acontecer. Para isso, vou usar o comando G serve. Portanto, esse comando compila seu aplicativo angular e inicia um servidor de desenvolvimento local, que pode ser acessado por meio de um host local Ele roda na porta 4.200, e é aí que podemos ver seu aplicativo em execução Isso também tem algum recurso de recarga ao vivo, o que significa que, à medida que fizermos alguma alteração em nosso código, ela será refletida instantaneamente no navegador Então, deixe-me copiar esse link específico. Acesse seu navegador. E funcionou. Vamos voltar e tentar mudar o HTML. Salve o arquivo. Assim que salvou o arquivo, Angular fez seu trabalho. E se você voltar ao navegador, as novas alterações agora serão refletidas. Te vejo em seguida. 7. 0107 Facebook Posts App Demo: Eu acredito em aprender fazendo e, para mim, é a maneira mais eficaz de aprender. Então, hoje, vamos criar um tipo de aplicativo de publicação no Facebook e, no processo, vamos aprender muitas coisas no Anglo Essa abordagem não é apenas divertida, mas também mostra como usamos o anjo em projetos em tempo real. Então, o aplicativo que você está vendo é o que vamos construir. Funciona como uma postagem no Facebook. Então, temos algumas postagens feitas por John Doe e Jane Smith, e essas são as postagens que eles fizeram Em seguida, podemos interagir com a postagem pressionando o botão curtir Depois de fazer isso, veremos uma mensagem dizendo que você gostou desta postagem e também podemos diferir dela para que não vejamos essa mensagem. Também podemos adicionar um comentário, clicar na postagem para que o comentário seja adicionado. Tudo bem, vamos começar nossa jornada para criar esse pequeno aplicativo divertido. Te vejo em seguida. 8. 0108 Interpolação de Encadernação de Dados e Encadernação de Propriedades: Até agora, criamos o projeto angular e também geramos um novo componente, que está simplesmente exibindo essa mensagem. Se você voltar ao navegador, essa é uma mensagem que vemos. Em breve, vamos transformar esse aplicativo em esse aplicativo. Mas, para isso, precisamos de uma fonte de dados de onde obtemos todos esses dados. Idealmente, devemos obter esses dados de um servidor no formato JSON Mas, como estamos aprendendo e simplificando as coisas, vamos obter esses dados do componente pai e depois exibi-los no componente filho. Deixe-me mostrar o que quero dizer. Portanto, temos o componente filho que acabamos de criar e já temos o componente pai. O que vou fazer agora é preencher uma propriedade ou um campo nesse componente com esses dados Eu já tenho esses dados. Deixe-me mostrar para você. Vou mudar o nome para pose e depois vou atribuir esse valor. Então, isso é basicamente uma matriz de pose que contém uma lista de objetos que simulam a estrutura de uma postagem de mídia social com detalhes sobre o autor da postagem, o conteúdo e seus comentários correspondentes A pose variável é inicializada como uma matriz de objetos e cada objeto representa uma postagem individual com seus próprios campos de dados O campo ID é do tipo número. O campo do usuário é do tipo string, o conteúdo é do tipo string e, em seguida, também temos comandos, que são uma matriz de strings. Este segmento de postagem no momento está contendo alguns objetos. Agora, precisamos de alguma forma obter esses dados no componente filho. Vamos ver como isso é feito. Vamos criar uma propriedade ou uma variável que conterá esses dados. Vamos chamá-la de pose de usuário, e isso também será uma matriz. Vou fazer todo o Shift F para formatar o código. Vamos dar um pouco de espaço para respirar. Ok, então User post é o nome da propriedade e é uma matriz de qualquer tipo, que significa que ela pode conter uma matriz de qualquer tipo de objetos de dados, cadeias de caracteres, números etc E, no momento, é uma MTRI sem nenhum dado. Agora, vamos definir essa propriedade específica nessa tag. Assim como temos elementos STML com suas próprias propriedades, também podemos usar nossas propriedades personalizadas como parte de nossos componentes Talvez tenhamos uma tag de imagem cuja propriedade pode ser ARC. Da mesma forma, temos essa tag de componente personalizada de pose do aplicativo, cuja propriedade pode usar uma pose. E agora vamos atribuir algum valor a isso. Você consegue adivinhar qual será o valor? Bem, é essa variável que contém os dados. Deixe-me copiá-lo e colá-lo aqui. Agora, para dar uma olhada no que essa propriedade de postagem do usuário contém, vamos tentar exibi-la na interface do usuário. E a sintaxe para isso é a seguinte: vamos usar colchetes para que ela seja exibida Isso é chamado de interpolação. Essa é uma técnica de vinculação de dados unidirecional que permitirá que você exiba dados do componente no modelo. Isso significa que os dados fluem da propriedade do componente para o elemento TML Deixe-me salvar o arquivo e vamos voltar ao navegador para ver se alguma coisa acontece lá. Não está exibindo nada. Isso significa que nada foi povoado aqui. Então, para dizer ao Angular que esperamos que essa propriedade seja preenchida pelo componente pai, precisamos usar um decorador essa propriedade seja preenchida pelo componente pai, precisamos usar um decorador chamado input. Deixe-me mostrar o que quero dizer. Assim. Um pescador já fez o trabalho para mim de importá-lo também Quando eu digo o arquivo, estamos vendo um erro. Você consegue adivinhar por que estamos vendo esse erro? Bem, o que temos aqui é uma matriz, mas o que estamos tentando atribuir aqui é uma string. Mas a questão é: não pretendemos atribuí-la como uma string. Pretendemos atribuir esse valor específico. Para fazer isso funcionar, precisamos usar algo chamado vinculação de propriedades. Basta colocar essa propriedade entre colchetes e isso resolverá o problema. Por que isso? Isso significa que você está, na verdade, vinculando uma propriedade do componente pai. Que é pose para um componente secundário chamado pose do usuário. E essa propriedade tem que ter esse decorador de entrada. Só então isso vai acontecer? Agora, vamos salvar o arquivo e voltar ao navegador, e tudo o que estamos vendo aqui são alguns objetos. Por que isso? Bem, isso é mostrado como uma matriz de objetos JavaScript, que podem não ser muito legíveis para torná-los legíveis, forma de usar pipe Isso formatará a matriz em uma string JSON. E isso faz parte dos módulos comuns. Precisamos importá-lo, salvar o arquivo e não temos mais esse erro. Vamos voltar e funcionou. Podemos exibir as informações da postagem. Vamos ver como podemos evoluir isso para esse aplicativo. Te vejo em seguida. 9. 0109 Diretivas que usam o NgFor para exibir postagens: No momento, estamos exibindo os dados no formato JSON. Obviamente, não é assim que queremos mostrar aos usuários. Queremos extrair os dados desse JSON e, em seguida, agrupar esses dados com tags ESTiml e, eventualmente, aplicar algum estilo para que possamos exibi-los assim Portanto, nosso objetivo para esta palestra em particular é extrair o nome ou o nome do autor e sua postagem correspondente e em seguida, exibi-los de uma forma significativa Se voltarmos ao código, agora mesmo, essa propriedade específica contém os dados e, só para reiterar, estamos obtendo os dados do componente pai por causa da vinculação da propriedade, em que vinculamos a propriedade do usuário do componente filho à propriedade post do componente pai E é assim que estamos obtendo os dados dessa propriedade específica. E isso só aconteceria se você tivesse esse decorador. Agora, vamos tentar exibir os dados. Vou colocar tudo em uma etiqueta DV para começar. E aqui queremos preencher o nome e o conteúdo da postagem Vou manter o nome na etiqueta H two. E então a postagem entrará em uma tag de parágrafo. Então, como vamos obter o nome de usuário e o conteúdo? Bem, é usando interpolação. Vamos usar alguns Colbrss para isso. E aqui, vamos dizer pose de usuário. Queremos acessar o primeiro elemento. Atualmente, o Pose tem alguns elementos. E estamos usando user post porque esse é um nome de propriedade no componente filho. Então, como acessamos o primeiro elemento? Bem, se eu disser zero, isso nos dará acesso ao primeiro elemento como usuário de pontos. Então eu vou fazer o mesmo com o conteúdo também. Eu vou definir o conteúdo. Então, com a interpolação, podemos vincular os dados do componente ao modelo Deixe-me salvar o arquivo e vamos ver como ele é renderizado no navegador. Vamos voltar. E exibiu o primeiro elemento. E também faremos o mesmo o segundo elemento. Vou copiar, pausar o código e aumentar o número em um Isso vai acessar o segundo elemento, que é isso. Vamos voltar e ele também foi renderizado. Agora, quão prático é escrever um código como esse? No momento, temos alguns elementos nessa matriz, então podemos escrever um código como esse. Mas e se tivermos centenas ou até milhares de elementos? É simplesmente impraticável escrever um código como esse. Temos uma solução? uma maneira de deixar o angular fazer o trabalho por nós? A resposta são diretivas angulares. Falaremos sobre as diretivas anglo mais detalhes posteriormente Mas, por enquanto, vamos nos concentrar em uma diretiva específica que nos ajudará a fazer esse trabalho, e essa diretiva é NG quatro. Deixe-me mostrar o que quero dizer. Então, vou definir apenas uma tag, uma tag de mergulho. E aqui, vou usar um direto. E a sintaxe para isso é a seguinte, estrela NG four. E aqui vou dizer deixe a postagem do usuário posar. diretiva G for nos permitirá iterar em uma matriz chamada pose de usuário E para cada item na matriz de pose do usuário, ele cria uma variável local chamada post, que representa o item atual na iteração Resumindo, vamos declarar uma variável para cada item na matriz e of especificar a matriz que estamos percorrendo, que neste caso Para acessar os dados do elemento atual, podemos usar essa variável. Vou substituir isso por post. Basicamente, o Tangler repetirá essa tag várias vezes, igual ao número de elementos na matriz ou ao número de elementos na postagem do usuário E podemos acessar os dados de cada item usando essa variável chamada post. Agora, se você está se perguntando como podemos usar essas diretivas no arquivo TML Bem, quando compilamos esse código, Angular os avaliará e gerará STML dinâmico Então, se tivermos centenas de elementos aqui, esse grande número de tags Du seria criado pelo Angular uma vez após a compilação O navegador não entende essas diretivas. Eles são fornecidos pela Angular para nossa conveniência. Então, deixe-me salvar o arquivo e vamos dar uma olhada no navegador e ver se ele renderiza os dados e, com certeza, funcionou Agora eu quero te dar uma tarefa. Vá em frente e exiba comentários para cada postagem. É fácil fazer isso e você já conhece a solução Espero que você faça isso. Te vejo em seguida. 10. 0110 Exibindo comentários de postagens: Podemos exibir o nome do autor e a postagem correspondente. Agora vamos continuar exibindo seus comentários correspondentes. Além disso, também adicionaremos esses botões de curtir e postar e também esse campo de entrada. Para esta palestra em particular, não vamos dar nenhum tipo de comportamento para esses botões Vamos fazer isso na próxima palestra ou nas próximas palestras Então, vamos voltar ao código do Visual Studio. Espero que você tenha tentado adicionar os comentários e espero que tenha sucesso. Caso contrário, basta dar uma olhada em como isso deve ser feito. Então, apenas para uma separação lógica, vou adicionar outra tag Dew Isso pode ser útil se quisermos estilizar seções específicas E dentro dessa tag Dev, vou criar uma lista não ordenada onde exibiremos os cometas Aqui é onde vamos usar a diretiva NGF para percorrer ou iterar toda a lista de comandos Então, estou usando exatamente a mesma sintaxe. Vamos chamá-lo de comentário, e vou copiar esse campo específico dessa forma. E, claro, precisamos obter isso dessa variável post, que conteria os comandos dos elementos atuais. Comandos de postagem de pontos. E dentro dessa tag, podemos usar a interpolação para exibir o comentário Assim, salve o arquivo. E se eu voltar para o navegador, deveríamos ver os comentários. Deixe-me adicionar rapidamente o botão também. Vou chamá-lo assim. Também precisamos de um botão semelhante para postar um comentário. Chame isso de correio. E então precisamos de um campo de entrada. Assim mesmo. Salve o arquivo. Vamos voltar ao navegador. Então, temos o botão curtir, o campo de entrada e o botão de postagem correspondente. Obviamente, não temos nenhum comportamento para esses botões no momento. É isso que faremos nas próximas palestras. Te vejo 11. 0111 Tratamento de eventos como adição de comportamento: Vamos agora trabalhar nesse botão de curtir. Eu quero que você preste atenção como esse botão de curtir está se comportando No momento em que lançarmos o aplicativo pela primeira vez, todas as postagens não serão curtidas. Ou seja, para cada postagem, vamos ver esse botão chamado L. Se eu clicar no botão curtir de qualquer postagem, o status deve mudar assim. O texto no botão deve mudar para diferente, e então devemos ser capazes de ver esse texto que diz: Você gostou desta postagem. E se eu clicar no botão Diferente, ele deve voltar para o botão L. E a maneira de fazer isso é mantendo uma lista ou um conjunto de postagens que foram curtidas. Se você se lembra, para cada elemento, temos esse campo de ID. No momento em que clico no botão curtir de uma postagem específica, adicionaremos o ID correspondente a essa lista ou ao conjunto. Dessa forma, podemos acompanhar todas as postagens curtidas e, com base nisso, podemos exibir o texto no botão, bem como o texto que estamos vendo ao lado dele. Então, vamos ver como isso é feito. Então, aqui vou apresentar um novo conjunto que mantém uma lista de postagens curtidas. Eu vou dizer definido. Isso manterá um conjunto de números porque o campo ID é do tipo número. E então eu vou apresentar um método chamado like post. E depois enviaremos o ID postal. Que é do tipo número. Esse método não retornará nada, então dizemos nulo Então, vamos condicionar que verifiquemos se esse ponto, como ponto de postagem , tem esse ID enviado. Se for esse o caso, queremos remover esse ID da lista de postagens curtidas. Esse método seria acionado toda vez que pressionássemos esse botão. Se clicarmos no botão curtir, basicamente adicionaremos esse ID nessa lista ou no conjunto e vice-versa. Se clicarmos no botão de curtir , verificaremos se a postagem já está presente na postagem curtida. Se sim, nós o excluiremos. Então, aqui, vamos definir isso como postagem, exclusão de pontos, ID da postagem, assim. Em seguida, teremos o bloco else e aqui apenas adicionaremos o ID da postagem. Eu sei que leva algum tempo para você entender isso, mas tudo fará sentido daqui a pouco. Vamos ao modelo. Aqui, vamos fazer a vinculação angular de eventos. Então, no momento em que clicarmos nesse botão, adivinhe, chamaremos esse método como post e, em seguida, passaremos o ID da postagem atual, curtidas, apenas para reiterar essa variável da postagem conterá os dados do elemento atual, e foi assim que obtivemos o ID E aqui, vamos usar a interpolação para verificar se a maré da postagem está presente na postagem curtida e, com base nisso, queremos exibir o Led post dot verifica se tem a identificação ensinada pela postagem. Eu quero usar o ponto de interrogação. Se estiver lá, isso significa que a postagem é semelhante, e agora queremos mostrar o texto diferente. Caso contrário, a postagem não está presente na lista, então queremos mostrar o texto como curtido. Deixe-me colocar isso dentro do DVTag e farei todo o Shift F para formatar nosso código E ao lado dela, vou introduzir uma tag span, e aqui é onde vamos preencher esse texto Aqui, vou usar o NG para verificar se ideia da postagem está presente na lista de postagens curtidas ou na mesma lista de postagens curtidas, e vou enviar a ID do post da seguinte forma. Se for esse o caso, queremos renderizar essa tag span exibindo esse texto. Eu gosto desse post. Assim. Vamos salvar o arquivo e ver se ele funciona. Vou gostar desse botão e, no momento em que pressiono o botão curtir, ele aciona o evento de clique desse botão , chamado de método, e verificará se essa condição é verdadeira. Nesse caso, é falso. É por isso que ele adicionou esse item específico ou o ID na lista de postagens. E com base nisso, estamos alterando o texto no botão , bem como esse texto específico. Vamos diferir, e parecia estar funcionando muito bem. Então, quando eu não gostei, basicamente removemos esse ID de postagem específico da lista e, com base nisso, estamos renderizando a tag span e Então, isso é chamado de manipulação de eventos em angular. Espero que faça sentido. Te vejo em seguida. 12. 0112 Dois sentidos de ligação Adicionando comentários à publicação: Ok, vamos agora tentar adicionar o recurso de adição de comando ao nosso aplicativo. A maneira como vamos fazer isso é usando combinação de vinculação bidirecional e tratamento de eventos. Deixe-me explicar o que quero dizer. Temos um campo de entrada para cada postagem. Sempre que eu digito algum texto aqui, quero que uma propriedade no componente seja atualizada instantaneamente Podemos fazer isso com uma ligação bidirecional. Quando o usuário clica no botão de publicação, chamamos um método com ID da postagem correspondente e, dentro do método, tentaremos encontrar essa postagem e, eventualmente, tentaremos inserir esse comentário na lista de seus comandos Embora estejamos vendo alguns comentários aqui, talvez estejamos inserindo um novo comentário nesta lista Então, vamos dar uma olhada em como isso é feito. Então, já temos o campo de entrada. Vamos primeiro preencher algum texto padrão. Se voltarmos, veremos um texto padrão chamado adicionar um comentário. Então, vamos adicionar isso primeiro. Espaço reservado, adicione um comentário. Assim. E agora, aqui vou usar uma das diretivas anglo Para ligação bidirecional, é chamada de NG moral. E será embrulhado com uma combinação de parênteses e colchetes Vou explicar para você o que está acontecendo aqui daqui a pouco. E aqui vou fazer um novo comentário. Precisamos ter essa propriedade adicionada ao componente. Vou copiá-lo e criar uma nova propriedade aqui. Será do tipo string porque é isso que o usuário insere. Por padrão, não terá nada. Salve o arquivo. Isso pertence ao módulo Forms, então precisamos importar e salvar o arquivo e não temos mais o erro. Portanto, o modelo ng é a diretiva anglo usada para vinculação bidirecional para todos esses elementos do formulário O campo de entrada agora está vinculado à nova propriedade de comando no componente. Quando o valor do campo de entrada muda, sempre que o usuário digita algo, ele atualiza automaticamente o valor do novo comentário. Essa propriedade seria atualizada instantaneamente. Mas por que isso é chamado de ligação bidirecional é algo que você entenderá até o final desta palestra. Em seguida, criaremos um método que corresponda a esse botão de postagem. Então, teremos um evento de clique como neste botão, vou copiar isso e aqui vamos alterar o nome do método para Adicionar comentário e, mais uma vez, enviaremos o ID da postagem. Vamos criar esse método. Novamente, deixe-me copiar esse código para economizar tempo. No entanto, vamos mudar a lógica. Em primeiro lugar, tentaremos encontrar a postagem pelo ID da postagem. Então, vamos fazer isso. Vou criar uma postagem constante igual a essa postagem do usuário dot find Estou tentando encontrar uma postagem com esse ID de postagem, e essa é uma sintaxe para isso É igual a igual, é igual à ID da postagem. Portanto, o método find é usado para pesquisar a matriz de postagem do usuário, mas a postagem, cuja ID corresponde à ID da postagem fornecida como argumento. Em seguida, teremos uma condição para ver se a postagem realmente existe e não é indefinida Então, se a postagem existir e esse novo comentário for cortado, só então queremos adicionar o comentário Portanto, se a postagem não for indefinida e o novo comentário for atualizado com algum valor após cortar os espaços em branco à direita , queremos realmente colocar esse comentário na lista de comentários dessa Eu vou dizer que post dot comanda ponto. Empurre este ponto Novo Comando. E, finalmente, quando pressionamos o comando, não queremos mais mostrar esse texto no campo de entrada. Então, para isso, vou atualizar a nova propriedade do comando e deixá-la vazia, salvar o arquivo. Eu vou guardar isso também. Vamos voltar e ver se o aplicativo se comporta conforme o esperado. E funcionou. Conseguimos adicionar um novo comando. Agora, por que isso é chamado de ligação bidirecional? Como você percebe, no momento em que algo é atualizado nesse campo de entrada, o mesmo também se refletirá nesse campo. Também é verdade de outra forma. No momento em que atualizamos essa propriedade específica, o mesmo se reflete aqui também. Essencialmente, os dados estão fluindo não apenas do modelo para o componente, mas também para o outro lado Os dados também estão sendo atualizados e são transferidos do componente para o modelo Já no caso de interpolação, esse não é o caso. É chamado de vinculação unidirecional, em que os dados estão apenas fluindo do componente para o modelo Então, não temos mais o texto aqui. Espero que faça sentido. Te vejo em seguida. 13. 0113 SCSS Mini Masterclass: Esta será uma classe minimestre em SCSS ou SASA CSS O SCSS é como uma versão evoluída do CSS. É semelhante ao CSS normal, mas com recursos extras para tornar nosso estilo mais eficiente Mas o SCSS é mais popular porque é totalmente compatível com CSS, que significa que você pode pegar qualquer arquivo CSS existente e começar a adicionar recursos do SCSS sem alterar Nesta palestra, falaremos sobre todos os recursos essenciais que você precisa conhecer, além de exemplos Primeiro, vamos falar sobre variáveis. Dê uma olhada nessa tradição de estilo CSS. Estamos usando exatamente o mesmo valor ou a cor para o atributo de cor em H um e H dois. Agora, isso pode ser um problema porque, se atualizássemos essa cor, teríamos que fazer isso nos dois locais. Agora, nesse caso, são apenas alguns locais, então talvez não tenhamos problemas. Mas e se atualizássemos a cor em vários locais? Bem, isso se torna um trabalho tedioso e propenso a erros. No SCSS, temos variáveis. Aqui, estamos tentando definir uma variável chamada cor primária, cujo valor é a cor em si, e estamos usando essa variável em vários locais. Portanto, sempre que atualizarmos o valor da cor primária, ele será refletido em todos os locais onde quer que estejamos usando essa variável. Também podemos usar propriedades personalizadas CSS ou variáveis CSS, mas elas não são tão flexíveis quanto as variáveis SCSS em termos de lógica de escrita , pois o SCSS nos permite escrever código com recursos avançados, como loops, condições e funções, que não são possíveis com propriedades personalizadas de CSS No entanto, há uma vantagem significativa nas propriedades CSS, que é poder atualizar os valores dinamicamente durante o tempo de execução Já no SCSS, as variáveis são estáticas e só funcionam em tempo de compilação Em outras palavras, o arquivo SCSS acabaria sendo compilado em um arquivo CSS equivalente para que os navegadores possam entender Não podemos alterar seus valores durante o tempo de execução quando o aplicativo é executado. Em seguida, vem o aninhamento. Em CSS, devemos escrever seletores repetidamente, mesmo que estejam relacionados, exatamente como você está vendo aqui Já no CSS, o aninhamento é permitido, que tornará o código mais legível e fácil de manter E só de olhar para esse código, podemos dizer como seria a aparência do STML correspondente Deve ser algo parecido com isso. Temos o elemento NAV cujo elemento filho é uma lista não ordenada ou UL, cujo elemento filho é o item da lista, a tag LI A mesma estrutura também é seguida no estilo, o que a torna mais legível e fácil Em seguida, vêm as parciais. O CSS suporta a regra de importação, mas cada entrada resulta em uma solicitação STDB adicional, o que pode diminuir o tempo de carregamento Por outro lado, o SCSS nos permitirá dividir as folhas de estilo em parciais e importá-las sem solicitações adicionais de SDP, pois elas são eventualmente compiladas em um único Todos os arquivos que você vê aqui que começam com sublinhado ou parciais, e estamos usando a instrução import para importá-los no arquivo SCSS principal Em seguida, vêm os mixins. Em CSS, se você estiver usando exatamente o mesmo estilo para vários elementos, precisará copiar e colar o código manualmente Já no SCSS, temos mixins, que nos permitem criar blocos de estilos reutilizáveis e reutilizá-los em toda a nossa folha de estilo Dessa forma, podemos evitar repetição e reutilizar os estilos existentes Semelhante às funções de escrita na programação. E nesse caso, temos a mistura no estilo de botão nomeado e estamos incluindo essa mistura em vários locais. E quando fazemos isso, também estamos transmitindo alguns argumentos. Nesse caso, os argumentos são a cor de fundo e a cor do texto. Por padrão, eles eram azuis e brancos, mas podemos sobrescrevê-los enviando nossos próprios argumentos Então, para o botão um, estamos enviando preto e branco, e para o botão dois, estamos enviando vermelho e branco. Em seguida, vem a herança. No CSS tradicional, se precisarmos usar exatamente o mesmo estilo em vários locais, mais uma vez, precisamos simplesmente copiar e colar Mas um CSS nos permitirá estender um seletor para outro e, dessa forma, podemos reutilizar os estilos existentes Em seguida, vêm os loops. Dê uma olhada nesse código CSS tradicional. Por outro lado, dê uma olhada no código SSS, onde usamos o loop para gerar dinamicamente esses estilos para O diretor FOR cria um loop e o dólar I é usado para inserir o número da iteração do loop atual no nome da classe e no valor da propriedade nesse caso Esse código gerará exatamente o mesmo estilo que você vê no lado esquerdo durante o tempo de compilação Em seguida, vêm as funções. O CSS tem um conjunto limitado de funções incorporadas como Calc, RGB ou URL No entanto, você não pode definir suas próprias funções em CSS. Já em um CSS, isso nos permitirá criar funções personalizadas para realizar operações como manipulação de cores, cálculos, basicamente, qualquer coisa que você deseje fazer Então, aqui temos a função chamada calcular largura e, em seguida, estamos chamando essa função enviando algum argumento. Nesse caso, estamos enviando 100 pixels, que seriam multiplicados por 1,5, e o mesmo valor seria retornado Em seguida, vêm as declarações condicionais. Dê uma olhada nesse código. Como você pode ver, o SCSS permite lógica condicional com declarações I Ls e elseif Então, aqui estamos verificando se a variável do tema é escura. Se tivermos um estilo específico para isso, veja, estamos introduzindo um estilo diferente Em seguida, vêm as operações matemáticas. O CSS tem operações matemáticas muito básicas que você pode realizar usando o Calc, mas o SCSS permite operações matemáticas complexas diretamente, sem a necessidade do método Calc Isso é tudo sobre SESS e parabéns. Você acabou de se formar na master class do SCSS. Te vejo em seguida. 14. Peça de revisão de Skillshare: Olá, este é o seu instrutor deste curso e espero que você esteja realmente gostando da viagem até agora O motivo deste vídeo é basicamente pedir que você reserve alguns minutos para avaliar e revisar este curso. Isso é muito importante porque, dependendo do número de avaliações e avaliações recebidas pelo curso, equipe do Skillshare decidirá se deseja manter o curso nesta plataforma ou removê-lo Infelizmente, alguns dos meus cursos foram removidos. E muitos estudantes foram impactados por causa disso, porque não tinham avaliações e avaliações suficientes Se não for um grande favor, reserve alguns minutos e faça a leitura deste curso e também descreva algumas linhas, o que você aprendeu até agora E se isso o beneficiou de uma forma ou de outra, isso ajudará este curso a permanecer vivo nesta plataforma E provavelmente você também não perderá o acesso a este curso. Espero que você faça isso. Muito obrigado e até a próxima. Tenha um ótimo dia pela frente. 15. 0114 Estilizando nossa aplicação de posts com SCSS: Eu fui em frente e introduzi a estilização nosso aplicativo para torná-lo assim Como agora você está familiarizado com o SCSS, você deve ser capaz de entender o que está acontecendo aqui Basicamente, eu introduzi atributo de classe para todas as tags DV no HTML e também forneci o estilo correspondente E se você notar, estamos tentando seguir e imitar a mesma estrutura do próprio HTML. Então, temos a tag Dv dentro da qual temos duas tags Du secundárias e estamos seguindo a mesma estrutura Portanto, temos o seletor DevTag pai. Post é o nome da classe que usamos aqui. Dentro do qual estamos tentando selecionar as subdivs, ações e comentários E fornecemos um estilo para seus elementos. Eu quero que você reserve um tempo e examine este arquivo e tente entender o que estamos tentando fazer aqui. Eu também coloquei alguns comentários para você entender. E eu não acho que fará muito sentido para mim explicar cada um desses atributos porque, honestamente, estilizar é uma das coisas mais fáceis de fazer Além disso, isso não é realmente considerado uma habilidade técnica. Espero que faça sentido. Te vejo em seguida. 16. 0115 Serviços Angulares: Imagine que você está criando um site de comércio eletrônico usando o angular Agora, como parte do seu projeto, você pode ter esses componentes, perfil e componente de pedidos. O componente de perfil tem como objetivo exibir o perfil do usuário, e o componente de pedidos tem como objetivo exibir o histórico de pedidos feitos pelo usuário. Obviamente, em um site de comércio eletrônico, você pode ter centenas de componentes Mas, por causa deste exemplo, vamos nos concentrar neles. Pode haver certas funcionalidades que permanecerão comuns em vários componentes Nesse caso, talvez precisemos de autenticação residente em ambos os componentes Talvez tenhamos algumas linhas de código para autenticar o usuário, e esse código de autenticação enviará a solicitação ao servidor, garantindo que o usuário seja realmente quem diz ser Agora, essa é uma maneira muito ineficiente de lidar com esse cenário. Você consegue adivinhar o porquê? Bem, primeiro de tudo, estamos tendo o mesmo design de código em vários componentes, então isso é repetição. Em segundo lugar, estamos fazendo várias solicitações, o que consumirá os recursos do servidor. Devemos ser capazes de enviar apenas uma solicitação e, em seguida, armazenar esse estado em algum lugar para que não precisemos continuar enviando a solicitação para autenticar o usuário É exatamente por isso que precisamos de serviços angulares. Nesse cenário, podemos introduzir um serviço chamado AT service, que terá um código específico de autenticação. Vamos mover o código de autenticação componentes para o serviço this at, para que ele possa permanecer em um só lugar e os componentes usem o serviço AT apenas para saber o status de autenticação do usuário. Mas é o serviço at que realmente enviará a solicitação ao servidor para autenticar o usuário Uma vez que isso aconteça, também manterá um estado. Essencialmente, dentro do serviço at, podemos ter uma propriedade para armazenar o status de autenticação do usuário. Ele enviará a solicitação apenas uma vez e depois atualizará o status ou o valor da propriedade. Os componentes apenas examinarão valor da propriedade e, com base nisso, saberão se devem ser renderizados ou não Então, basicamente, estamos usando serviços para buscar dados ou interagir com o servidor, mantendo o estado, como você acabou de ver Também podemos ter funções utilitárias residentes no serviço AT Portanto, se você tiver alguma função utilitária, como transformação de dados ou validação da entrada do usuário, por exemplo, poderá tê-las todas em um só lugar dentro do serviço E, é claro, também podemos ter a lógica de negócios. Nesse caso, estamos basicamente verificando se o usuário tem permissões suficientes ou não. Mas quais são as vantagens dessa abordagem? Bem, em primeiro lugar, a reutilização do código, a lógica pode ser escrita uma vez e usada em vários componentes Separação de preocupações, que manterá os componentes focados na lógica de apresentação, enquanto a lógica de negócios e a busca de dados serão transferidas para os serviços Isso também melhorará a confiabilidade dos serviços, pois eles não lidam com nenhuma lógica de interface do usuário Em seguida, apresentaremos o serviço em nosso aplicativo de postagem no Facebook. Te vejo em seguida. 17. 0116 Como configurar o endpoint e atender aos dados: No momento, estamos obtendo todos os dados de postagem do componente principal. Esse não é um cenário realista. Precisamos obter esses dados do servidor real e adivinhe? No momento, não temos nenhum servidor servindo esses dados. Idealmente, devemos criar um servidor no Cloud Enrollment e, em seguida, escrever algum código do site do servidor que realmente exponha essa API para enviar esses dados, mas eu tenho uma solução melhor para esse Simplesmente vou usar uma das ferramentas online existentes. deparei com este site com uma rápida pesquisa no Google, e isso parece estar resolvendo o problema. Portanto, o nome do site é bispto.com slash MOC hyphen API. E, como o nome sugere, isso nos permitirá criar uma API simulada que não tenhamos que nos preocupar em criar o servidor, escrever o código, blá, blá, blá No momento desta gravação, este site está ativo. Se você não conseguir ver este site ao vivo com uma rápida pesquisa no Google, poderá encontrar facilmente muitas dessas ferramentas. Então, o que vou fazer agora é copiar os dados dessa postagem. Antes de servi-lo, precisamos ter certeza de que ele está no formato JSON adequado Para isso, estou usando outra ferramenta, que é novamente algo que me deparei com uma rápida pesquisa no Google. Então, vou colar aqui e clicar em Processar. Se você está curioso sobre o nome do site, é jsonformata.usccept.com Então, aparentemente, esse não é um formato adjacente. Devemos ter aspas duplas para as chaves e também para os valores Então, ele fez o trabalho por nós. Vou copiá-lo e colá-lo aqui. Basicamente, estamos pedindo que essa ferramenta envie esses dados como resposta sempre que eu enviar a solicitação. E aqui vou dizer pose. Se o endpoint do URL ou se o UR terminar com uma pose de barra, é então que queremos que essa ferramenta envie esses dados Verifique se está 200 ok e clique em Create Mock server Para ter certeza de que está funcionando, vou copiar isso. Deixe-me ampliar para você. Vou copiar esse URL, colar aqui, posar e poderemos ver a resposta de que precisamos. Vamos continuar a partir da próxima palestra. 18. 0117 Como obter dados de serviço: Nesta palestra, veremos como podemos obter os dados desse servidor para que possamos fazer algo com Então, primeiro de tudo, vamos criar um serviço, e o comando para isso é NG generate service. Ele solicitará que forneçamos um nome para o serviço. Vou chamar isso de pose. Então Angler criou esses dois arquivos. Deixe-me abrir isso. criar uma variável que conterá essa URL. Privado, vamos chamá-lo de API URL equals, e eu vou copiar esse Em seguida, vou usar o construtor para injetar a dependência do cliente STTP Deixe-me mostrar o que quero dizer. Já temos o construtor criado E se você está se perguntando o que é um construtor, é basicamente um método especial que é chamado automaticamente quando uma instância da classe é criada Portanto, quando a instância do serviço postal for criada, Angler chamará automaticamente o construtor Normalmente usamos o construtor para injetar as dependências. Deixe-me mostrar o que quero dizer. Eu vou dizer cliente STTPE privado O cliente STDP é essencialmente um arquivo datilografado e terá algum código para enviar a solicitação ao servidor e recuperar os Então, basicamente usamos isso para fazer uma solicitação HDP ao servidor E ao especificá-lo no construtor, o sistema de injeção de dependência angular injeta automaticamente uma instância do cliente TDP Com isso, não precisamos criar manualmente uma instância de iluminação astrotípica Podemos pedir ao Angular que injete a instância para nós. Mas, para realmente criar a instância do cliente astrotípico, precisamos informar o angular sobre isso com a ajuda do provedor Deixe-me mostrar o que quero dizer. Vou abrir o app config dot Ts, e aqui já temos alguns provedores Além disso, vou especificar fornecer cliente ATT. Assim. Então, simplificando, estamos dizendo: Ei, angular, sempre que um componente ou serviço precisar de uma linha estodípica, certifique-se de que ela seja fornecida Isso é o que isso significa. Agora, vamos nos aprofundar na compreensão que é injeção de dependência, padrão singleton, etc., no Mas, por enquanto, espero que você tenha uma ideia. Ao especificar o provedor, estamos pedindo ao Angular que crie uma instância de stodypic line e, ao especificá-la como parte do construtor, estamos pedindo ao Angular que injete a instância de next Vou criar um método que realmente fará o trabalho de buscar os dados do servidor Vou chamar isso de pose de busca, mais ou menos. Eu vou dizer observável Então, esse método basicamente retorna um observável que emite uma matriz de qualquer tipo de elemento Novamente, vamos nos aprofundar nesses conceitos mais tarde Mas, por enquanto, pense nisso como algo que vai gerar dados para nós. E aqui vou retornar esse ponto STP G A. Vamos especificar a URL da API dessa forma O G é essencialmente o método do cliente tradicional que executa uma solicitação stdPgt para a URL especificada, e esperamos uma matriz de Vamos salvar o arquivo. Vamos salvar esse arquivo também. Continuaremos a partir da próxima palestra. 19. 0118 Como assinar dados e preencher: Ok, vamos continuar e preencher os dados na interface do usuário. Para isso, vou abrir o arquivo dot Ts do componente post. Atualmente, estamos obtendo os dados do componente pai com vinculação bidirecional. Então, como não vamos mais obter os dados do componente pai, vou me livrar disso, e isso deve gerar um erro no componente pai. Então, vamos abordar isso rapidamente. Vou remover isso daqui. E não precisamos mais desses dados no componente principal porque estamos obtendo do servidor. Salve o arquivo. Vamos voltar ao componente de postagem. E aqui, no momento, não temos um construtor Deixe-me criar um porque queremos injetar o serviço nesse componente Construtor : serviço postal privado , serviço postal. Isso também importou automaticamente o serviço postal para nós. Salve o arquivo. Com isso, estamos pedindo ao Angler que injete a instância do serviço postal Em seguida, vou usar um dos métodos de pescador chamado NG on então Gate é um dos ganchos do ciclo de vida dos pescadores Basicamente, ele é chamado uma vez após o angler inicializar todas as propriedades vinculadas aos dados dos componentes Normalmente, esse é um local onde inicializamos os dados dos componentes ou até mesmo executamos tarefas como buscar dados do servidor Nesse caso, usaremos esse método para obter os dados usando o serviço angular. Então, aqui vou dizer esse serviço de postagem, e vamos chamar o método que acabamos de criar fetch post dot subscribe Vou explicar para você o que estamos fazendo aqui daqui a pouco. E então eu vou dizer pose. Essa pose de usuário de ponto, preenchendo a propriedade, é igual a Salve o arquivo. Quando você chama o método de assinatura, eu faço todo o Shift F para formatar o código. Ao chamar o método subscribe, você está dizendo ao Angeler que execute o SDDPRquest e forneça os resultados quando ele estiver Se eu voltar, você pode pensar em observável como um fluxo de dados que envia os dados ao longo do tempo Imagine isso como um canal que pode enviar vários valores, como números ou objetos, ou qualquer outro dado, um após o outro. E esses valores não chegam de uma só vez. Eles vêm quando estão prontos, imediatamente ou mais tarde. E para realmente receber os dados de um observável, você precisa se inscrever nele Pense na assinatura como anexar um ouvinte que espera e reage sempre que novos dados E ao se inscrever, você decidirá o que fazer com cada dado, no sentido absorvível Agora você pode estar tendo uma pergunta. Por que não podemos simplesmente recuperar os dados sem esse conceito de observável e assinar Bem, os dados podem levar algum tempo para chegar. Enquanto isso, queremos que nosso aplicativo também esteja em execução Basicamente, você está permitindo que o aplicativo continue sendo executado enquanto aguardamos a resposta E quando os dados estão prontos, a assinatura os processa sem bloquear a interface do usuário. Deixe-me salvar o arquivo e ver se nosso aplicativo ainda funciona. OK. No momento, acho que nosso aplicativo não está sendo executado. Vamos voltar e fazer NG Sv. Vamos voltar ao navegador. E funcionou. Espero que faça sentido. Te vejo em seguida. 20. 0119 Diretivas personalizadas Angulares Diretivas Strucutal e Attibute: Para entender o uso direto e o angular, é muito importante que você entenda o que é um modelo de cúpula ou objeto de documento A cúpula é como um mapa que representa todo o conteúdo de uma página da web de forma estruturada Bem, o que isso significa? Imagine que esse é o seu HTML. Quando o navegador carrega esse HTML, ele lê o arquivo HTML linha por linha e constrói uma cúpula parecida com esta Tem uma estrutura semelhante à do próprio HTML , com o documento sendo o nó pai, e tem o STML como nó filho, cujos nós filhos são cabeça e corpo Segue essa estrutura em árvore e, geralmente, os navegadores criam uma cúpula para que o JavaScript possa realmente acessá-la e manipulá-la JavaScript pode selecionar, modificar, adicionar ou remover os nós na cúpula. O JavaScript não transmite HTML bruto diretamente. Na verdade, eles manipulam a cúpula para obter os resultados desejados ou obter a visão desejada Agora vamos entender o que é uma diretiva em angular. Dê uma olhada nesse código. Neste código, estamos tentando percorrer toda a lista de itens e exibi-los em formato de lista. Supondo que essa seja a lista, estamos basicamente exibindo todos esses itens em formato de lista não ordenada Agora, os navegadores não entendem essa diretiva NG four, é a diretiva específica do Anglo navegador só entende HTML e só pode executar JavaScript. Então, quando realmente construímos um projeto que tem esse código, Angular compila esse arquivo e gera JavaScript equivalente para os navegadores entenderem Esse JavaScript basicamente executa a mesma tarefa de percorrer todos os itens e fazer uma lista de itens com a tag Ai e, finalmente , criar um elemento de lista não ordenado e anexar todos os itens da lista a esse elemento anexar todos os itens da lista a Quando esse JavaScript é executado no navegador, a estrutura de cúpula resultante pode ser mais ou menos assim, que é equivalente a esse STML Agora, uma vez que esta diretiva NG four está manipulando com a estrutura de cúpula, ela se enquadra na categoria de diretiva estrutural Portanto, o NG four é denominado diretiva estrutural porque manipula com a estrutura da cúpula E, normalmente, as diretivas estruturais sempre começam com um asterisco, como no caso de Agora vamos falar sobre diretivas de atributos. diretivas de atributos são usadas para modificar a aparência ou o comportamento dos elementos Eles não alteram a estrutura da cúpula, mas afetam a aparência ou o comportamento do elemento Nesse caso, estamos usando o estilo NG. Essa é uma diretiva angular que aplica dinamicamente o estilo CSS embutido a um elemento Ele espera um objeto onde estão as propriedades e valores CSS ou os estilos a serem aplicados. Nesse caso, temos uma condição em que verificamos se a propriedade es red no componente está definida como verdadeira ou falsa e, com base nisso, escolhemos vermelho ou azul. Se Es red for definido como verdadeiro, escolheríamos o valor como vermelho. Se for falso, escolheríamos o valor como azul. Construindo o projeto e depois de compilar esse arquivo, o JavaScript resultante pode ter a seguinte aparência Estamos apenas chamando o método chamado update style, dentro do qual verificamos se a propriedade ese red está definida como verdadeira ou falsa e, com base nisso, estamos preenchendo o valor da cor com vermelho ou azul E esse método seria executado sempre que houvesse uma alteração na propriedade ese red. Agora, esse é um código JavaScript aproximado. Esse não é o código exato. Mas o fato de não estarmos realmente manipulando adicionando ou removendo elementos na estrutura de cúpula, o estilo G é um exemplo de diretiva de atributo Agora, pode haver casos em que angulares embutidos em diretores podem não ser suficientes Precisamos de uma funcionalidade diferente. Nesse caso, o angular nos permite criar nossas próprias diretivas Vamos dar uma olhada em um exemplo do mesmo. Nesse caso, tenho uma diretiva personalizada para a qual escrevi meu próprio código. Vou te mostrar esse código daqui a pouco. Mas o que estamos tentando fazer aqui é ter a tag DIV e queremos renderizar seu conteúdo somente se o usuário estiver logado ou somente após a autenticação do usuário Como você pode ver, a diretiva está começando com Asterix. Isso significa que esta é uma diretiva estrutural. Ele vai manipular a estrutura da cúpula. Agora, supondo que a propriedade do usuário registrada esteja definida como verdadeira no componente, renderizaremos esse texto específico como bem-vindo de volta ao usuário valorizado Agora vamos dar uma olhada no código dessa diretiva, App show se estiver logado, e é assim que pode parecer Podemos simplesmente criar outro arquivo datilografado com esse código ou executar um comando rápido, e o Angler realmente criará esse arquivo com algum Então, inicialmente, temos o decorador de diretiva, que diz ao Angular que essa é uma diretiva personalizada, cujo nome é Appshow se estiver logado E aqui dentro, temos essa seção de código. Agora, esse código é uma combinação de duas coisas diferentes. Primeiro, temos a propriedade chamada app show se estiver logada com o decorador de entrada e, em segundo lugar, ela também é um método setter para Portanto, o decorador de entrada marca o Appshow I logado como uma propriedade de entrada da diretiva, o que permitirá que ele aceite um valor do modelo de componente em que a diretiva Nesse caso, ele aceitará qualquer valor que atribuímos esteja registrado no valor de bullying, verdadeiro ou falso Então dissemos, defina app show if loged in como se estivéssemos definindo um método, e isso define um conjunto de métodos para a propriedade app show if logged in Isso significa que sempre que um novo valor é atribuído à diretiva com verdadeiro ou falso, esse método é executado com esse valor como argumento. Também estamos pedindo ao angular que injete algumas dependências Visualize o contêiner f e a referência do modelo. Basicamente, sempre que você aplica um diretório a um elemento Stem específico, como DIV nesse caso, o contêiner de visualização ref é criado para esse elemento específico e usamos esse objeto para inserir o conteúdo Nesse caso, usaremos contêiner de visualização f para inserir algum conteúdo nessa tag div E o template turf realmente contém a estrutura de conteúdo da tag div, incluindo qualquer STML aninhado O template troof é uma referência ao conteúdo do div que tem essa Nesse caso, o template turf basicamente contém todo o conteúdo dentro dessa tag div E, como você pode ver, dentro desse método, depois de verificar se o sinalizador está logado e, se for verdadeiro, estamos basicamente usando o contêiner de visualização para preencher o conteúdo dentro da tag Dv e o preenchemos com o conteúdo no E se não for verdade, estamos apenas dizendo: limpe tudo, isso significa não mostrar nada. Tenho certeza de que isso pode realmente parecer muito confuso Quando dermos uma olhada em um exemplo de diretiva personalizada nas próximas palestras, você definitivamente terá uma ideia melhor Agora vamos dar uma olhada em um exemplo de diretiva de atributo personalizado. E aqui temos essa diretiva personalizada chamada app Highlight. E, como o nome sugere, vamos simplesmente destacar o texto nesse elemento P. E é assim que o código da diretiva personalizada seria. Portanto, temos ouvintes anfitriões, que ouvem os eventos no elemento anfitrião Nesse caso, ele escuta os eventos de entrada e saída do mouse para aplicar ou remover o destaque E para realmente aplicar o estilo, estamos pedindo ao Angler que injete algumas dependências, o elemento ref e Na verdade, o elemento f fornecerá uma referência direta ao elemento dom, neste caso, a tag P, e renderizador two permite que você manipule o dom com segurança Então, dentro desse método de destaque, estamos essencialmente usando o renderizador para definir esse estilo Tem dois argumentos. A primeira é a referência do elemento e a segunda é o estilo que queríamos aplicar. Em seguida, vamos aprimorar nosso aplicativo de publicação no Facebook, introduzindo uma diretiva personalizada. Dessa forma, você entenderá melhor. Mas, como tarefa, quero que você experimente qualquer uma das incorporadas existentes diretivas anglo incorporadas existentes, pelo menos três delas Espero que você faça isso. Te vejo em seguida. 22. 0121 Tubos em tubos personalizados de tubos angulares incorporados: Os tubos no Anglo transformam os dados de entrada no formato de saída desejado Basicamente, eles pegam os dados como entrada e retornam uma versão transformada deles. A melhor maneira de entender isso é dando uma olhada em um exemplo. Aqui estão alguns dos tubos embutidos no Anglo. Aqui estamos usando os tubos maiúsculos e minúsculos. O tubo maiúsculo é usado para converter a corda em maiúsculas e o tubo minúsculo é usado para converter a corda em minúsculas usado para Tenha o canal JSON, que exibe um objeto ou uma matriz no formato JSON para que possa ser lido pelo usuário Normalmente, usamos esse tubo para fins de teste. Em seguida, temos o slice pipe, que extrairá uma parte de uma matriz ou string O tubo fatiado também é um exemplo de tubo parametrizado, que significa que o tubo usa argumentos adicionais para modificar seu comportamento A fatia é usada com dois parâmetros. Zero é o índice inicial e sete é o índice final. Da mesma forma, também podemos exibir uma parte de uma matriz usando slice pipe Também podemos combinar vários canais em uma única expressão, como você está vendo aqui. Nesse caso, estamos tentando combinar maiúsculos e tubos de corte, e a saída resultante é a combinação de ambos e a saída resultante é a combinação O Angular também nos permite criar tubos personalizados. Nesse caso, estamos criando um tubo personalizado que reverterá a string. Podemos executar um comando angular para criar o código básico, e essa classe aqui está implementando a transformação de tubos, que nos permitirá fornecer o comportamento do método transform Esse método de transformação está aceitando um parâmetro que é do tipo string. E dentro desse método, estamos usando alguma lógica para basicamente reverter a string. E é assim que você vai usar esse tubo no modelo. Basicamente, o texto angular seria exibido ao contrário. Para criar esse canal, esse é o comando que precisamos executar. O motor gera o tubo inverso, e isso criará o código básico, após o qual podemos fornecer a implementação Como isso é muito simples, quero que você considere isso uma tarefa para criar esse canal personalizado e, de alguma forma, fazê-lo No curso principal, discutiremos alguns dos outros conceitos relacionados a tubos, como tubos puros e impuros, tubos assíncronos, tubos multiparâmetros, Mas, por enquanto, espero que você tenha uma ideia do que são tubos em anglo. Te vejo em seguida. 23. 0122 Roteamento em carregamento angular e preguiçoso: Nesta palestra, entenderemos o que são rotas no anglo As rotas definiriam como o aplicativo navega entre diferentes visualizações ou componentes com base na URL Vamos entender isso implementando rotas em nosso aplicativo. No momento, é assim que nosso aplicativo está sendo renderizado. Estamos exibindo uma mensagem de boas-vindas e exibindo a pose. Agora vou introduzir um novo componente chamado Navegação e mover o código pertencente a essa mensagem para o componente de navegação Além disso, também teremos alguns links nesse componente. O primeiro link diz pose, em qual clicou? Vamos basicamente renderizar essas postagens, e o segundo link diz meu perfil. Qual deles clicou Basicamente, estamos exibindo o perfil do usuário. Você entenderá melhor quando implementarmos isso. Vou voltar ao nosso projeto, e este é nosso componente principal. No momento, estamos apenas exibindo a pose. Dentro do componente post, temos esse código que apresentamos anteriormente. Deixe-me copiar esta seção do código porque agora queremos torná-la parte de um novo componente chamado Navegação. Esse componente agora é dedicado somente para postagem. Deixe-me abrir um novo terminal e criar um novo componente chamado NG Generate Navigation. Temos que dizer ao Angler o que queremos gerar. É um componente. Então, o Angler criou uma nova pasta com arquivos específicos de componentes Além disso, também vou gerar outro componente chamado Perfil. Dentro desse componente de navegação, vamos mover o código que acabei de copiar. E em seu arquivo datilografado, também temos que introduzir isso diretamente Salve o arquivo. No componente pai, não vamos mais exibir a postagem, vamos nos livrar dela, mas sim exibir esse componente de navegação. Vou copiar esse seletor. Espero que você possa me acompanhar. No arquivo datilografado do componente do aplicativo, precisamos importar esse componente Não precisamos mais ter esse componente de postagem Vamos substituí-lo pelo componente de navegação. Salve o arquivo. Como parte do componente de navegação, também apresentaremos alguns links. O primeiro diz pose e o segundo diz Meu perfil. Vamos voltar ao navegador e ver como o aplicativo está renderizando Então, agora, é assim que está sendo renderizado, o que, é claro, não faz muito sentido Tudo faria sentido depois de introduzirmos o roteamento. Localize esse arquivo chamado arquivo app routes dot Ts. Se você não tiver esse arquivo, precisará criá-lo manualmente. E depois de fazer isso, vamos introduzir as chamadas rotas na forma de uma matriz. Vamos adicionar um item. Vou dizer caminho como pose e vamos associá-lo a um componente. Nesse caso, sempre que alguém visita uma URL com pose como caminho, queremos renderizar o componente pose. Da mesma forma, também vamos introduzir outra rota para o perfil, vai renderizar o componente do perfil. Salve o arquivo. E só para que você saiba, dentro do arquivo principal do ponto Ts, estamos na verdade inicializando o aplicativo Esse é o ponto de partida para nosso aplicativo. Anglo usa esse aplicativo bootstrap para inicializar o aplicativo e renderizar o componente do aplicativo, que é o componente raiz ou o componente pai que renderiza Então, isso corresponde ao componente do aplicativo dot HTML, que atualmente está exibindo esse componente que acabamos de criar Navigation. E também estamos fornecendo algumas configurações para o angular, que teria os provedores ou quaisquer configurações globais Vamos dar uma olhada no que está dentro disso. Portanto, o roteador do provedor é uma função auxiliar fornecida pelo Angular para configurar o roteador para o aplicativo E aceita uma variedade de rotas. Basicamente, sua configuração de roteamento configura todas as dependências necessárias para o roteamento no aplicativo Tudo isso é feito automaticamente. Eu nunca os criei manualmente, certo? Quando estamos criando o projeto em si, pedi ao Angular que também configurasse rotas, e ele fez isso por mim. Caso você esteja configurando rotas manualmente , além de criar o arquivo de rotas, você também precisará especificar isso Então, configuramos as rotas, e esse é exatamente o caminho que também queremos usar nos links. Aqui eu vou dizer link do roteador. Isso vai ser, adivinha? Pose, essa, e essa vai ser perfil. Sempre que inserimos uma URL, com esse caminho, angle tenta renderizar o componente do perfil. E se for com esse caminho , ele tentará renderizar o componente post. Deixe-me salvar o arquivo. Mas como estamos usando a tinta do roteador aqui, precisamos importar o módulo do roteador neste componente. Portanto, no arquivo datilografado de navegação, vamos também introduzir o módulo externo e salvar o E em nosso componente principal, vamos introduzir algo chamado Router Outlet. saída do roteador atua como um espaço reservado em seu aplicativo onde o conteúdo dos componentes roteados é carregado dinamicamente Então é aqui que o Angler tentaria renderizar os componentes roteados. E como estamos usando isso, precisamos inserir o módulo no datilografado do componente do aplicativo. Salve o arquivo. Devemos ser capazes de ver esse componente chamado navegação e esse componente está exibindo a mensagem de boas-vindas, bem como renderizar esses dois links para os quais configuramos rotas. A propósito, não preenchemos nada no componente de perfil Vamos fazer isso rapidamente. Acho que o padrão funciona por enquanto. Vamos salvar o arquivo e voltar e ver como o aplicativo está renderizando Então é assim que nosso aplicativo está renderizando. Se eu clicar na pose, ele renderizará o componente pose e se eu clicar no meu perfil, ele renderizará o componente do perfil Então é assim que o roteamento realmente funciona. Vamos nos aprofundar nesses conceitos mais tarde, quando entrarmos no curso principal E, claro, nosso aplicativo não está realmente visualmente atraente no momento Isso porque ainda não adicionamos esse estilo. Deixe-me fazer exatamente isso e voltar para você. Ok, eu introduzi o estilo para nosso aplicativo. Parte do estilo foi para o componente raiz e parte para o componente de navegação E, em última análise, é assim que nosso aplicativo está renderizando. Observe que quando em um desses links, por exemplo, se eu clicar no meu perfil, o URL resultante terá o perfil como caminho e, portanto, o Angler é capaz de renderizar o componente do perfil Além disso, o Angler suporta algo chamado carregamento lento, o que significa que ele não baixa todos os componentes que já existiram Ele baixaria os componentes absolutamente necessários para a visualização atual, o que significa que, à medida que interagimos com o aplicativo, novos componentes seriam baixados sob demanda. Isso melhorará o desempenho e melhorará o tempo de carregamento inicial e , portanto, a experiência do cliente. Portanto, os componentes só seriam carregados quando a rota também fosse navegada.