Curso de choque angular - aplicativo de tarefas construído

1. Apresentação: Olá a todos e bem-vindos a este curso intensivo angular aqui no Skillshare. Por meio deste curso, trabalharemos com o Angular e o sólido básico. Além disso, você conhecerá todos os principais recursos que o Angular possui e suporta. Então, com isso, você realmente instalará o angular e construirá algo bem variado. Os recursos com os quais trabalharemos para essas pontuações seriam angulares, CLI, componentes, serviços e roteamento, também módulo http e muito, muito mais. Agora, o que vamos construir com essas pontuações? Bem, neste curso, ao lado dos recursos que exploraremos, também construiremos um projeto da vida real. O projeto em que criaremos o aplicativo de tarefas, esse aplicativo que você pode ver aqui na tela, parece bastante simples, mas na verdade suporta todos os principais recursos que iremos construa um lote retido de layout e também faça o roteamento para várias páginas. Também usaremos o módulo HTTP para extrair os dados do servidor e realmente mostrar esses dados em uma tela. Além disso, trabalharemos com nossos dados como uma de nossas tarefas completa ou incompleta. Agora, quem sou eu? Bem, meu nome é Stefano matter, que e eu ouço mais de sete anos de experiência em desenvolvimento web. Além disso, também sou instrutor on-line. Ao lado deste curso Skillshare, você também pode me encontrar no YouTube. No YouTube, você pode encontrar meu canal na América, onde eu posto novos tutoriais sobre desenvolvimento web semanalmente. Portanto, não deixe de conferir isso e também se inscrever no meu canal. Agora, no Skillshare, ao lado deste curso, você pode encontrar em muitos outros cursos que eu também tenho. Esses cursos que você pode encontrar serão sobre diferentes tecnologias. Portanto, há outro curso sobre Angular, mas se você quiser assistir aos cursos de diferentes tecnologias, como Bootstrap, JS, JavaScript. Você também pode encontrá-los. Agora, eu gostaria de recebê-lo mais uma vez neste curso. Então, vamos codificar. 2. Instalação angular: Olá mais uma vez e bem-vindo à primeira aula oficial deste curso. Nesta primeira lição, abordaremos alguns conceitos básicos do Angular. Vamos instalar o Angular. Veremos o que é uma ferramenta de terminal angular e também criaremos nosso aplicativo e executaremos esse aplicativo. Na próxima lição, falaremos sobre o que exatamente é Angular? E veremos alguns dos recursos interessantes que o Angular tem. Aqui na minha tela, você está vendo site oficial do Angular e muitos dados de IO. Neste site você pode encontrar tudo o que precisa sobre o Angular, você pode ver alguns dos recursos interessantes que são tão singulares, Sim. E você também pode ver sua própria documentação completa. tecnologias de risco angular são uma tecnologia vasta, então é natural que a documentação também seja grande. No menu do lado esquerdo, podemos clicar em Introdução e clicar nessa configuração, abrir esta página e rolar um pouco para baixo. Aqui, a primeira coisa que podemos ver e fazer é instalar o Angular CLI. Ao instalar essa CLI singular, também instalaremos a versão angular estável mais recente. Essa CLI é realmente muito importante. Nós o usaremos para criar nosso aplicativo. Também o usaremos para criar vários recursos diferentes que o Angular suporta. E também o usaremos para executar nosso aplicativo. Agora, para instalar o Angular e o Angular CLI, devemos copiar esse npm install dash g na CLI angular slash. Mais uma coisa antes de instalarmos o angular, certifique-se também de ter a versão mais recente do node.js instalada. Bem, última versão recomendada. A importância desse nó não está no Angular, mas em sua própria ferramenta chamada npm. Npm é o gerenciador de pacotes que nos permitirá instalar vários módulos diferentes, como o angular. E no script Angular, você já pode ver o NPM aqui, o que significa que já estamos utilizando isso e o PM. Então, depois de instalar o Node.js, ele também instalará esse NPM automaticamente. Nesse ponto, você pode simplesmente copiar esse comando aqui. Agora, no seu terminal, você pode colar esse comando e pressionar enter. Esse comando instalará automaticamente o Angular e o Angular CLI para nós globalmente em nossa máquina para que possamos usá-lo. Depois de instalado, podemos usar o EMG como um comando aqui. E g vem dessa CLI angular. Ao lado desses send g, usarei traço, traço, ajuda, uma bandeira aqui para apresentar toda a ajuda enquanto o auxiliar funciona do Angular para nós. Aqui podemos ver várias opções e comandos diferentes que podemos executar. Por exemplo, a conta de energia realmente construirá nosso projeto e a reimplantada poderá realmente implantar nosso projeto. Existem comandos para o gerador gerar arquivos específicos e também ser executado para realmente executar ou servir nosso projeto. Agora, esta é a ferramenta Angular CLI que eu já mencionei. A ferramenta em si é muito importante para nós desenvolvedores do Angular, porque a usamos diariamente. Então, deixe-me mostrar uma coisa legal que podemos fazer com essas ferramentas CLI. Então o comando que eu vou fazer é N G nu, esse motor, você deve ter um nome ao lado dele. E o que ele fará em relação à criação um novo espaço de trabalho angular para nós. Bem, o novo aplicativo Angular. Então, primeiro de tudo, usarei clear para limpar meu console para que você possa ver tudo com clareza. Agora, vamos usar esse comando juntos. Vou perder mg, depois Novo e passarei o nome do meu espaço de trabalho. Bem, o nome do meu aplicativo. Vamos criar esse aplicativo de tarefas. Em seguida, chamarei meu aplicativo de aplicativo de painel de tarefas. Agora, isso aqui deve gerar nosso aplicativo. Mas antes de fazer isso, ele também nos fará algumas perguntas. A primeira seria você gostaria de adicionar roteamento angular? Angular é uma biblioteca, também suporta roteamento. Então, aqui vou, sim, porque também trabalharemos com o roteamento neste curso. O próximo passo é escolher um formato de folha de estilo que gostaríamos de usar. Angular é um padrão que vem com CSS, SCSS, Sass ou Less. Vou simplesmente escolher aqui um CSS para mais aplicativos padrão que podemos criar. Nesse ponto, o angular criará todos os arquivos necessários instalados, todos os pacotes que, bem, o aplicativo precisa. Depois que o aplicativo for instalado, poderíamos realmente começar a trabalhar com ele. Você também pode ver vários avisos na minha tela, mas isso não é necessariamente um problema. Esses são apenas avisos. E talvez para você, isso nem mostre que isso depende do nosso espaço de trabalho e também depende de uma máquina. Então, mais uma vez, vou limpar meu terminal aqui. A próxima coisa que vou fazer, agora que tenho meu aplicativo, eu poderia usar cd e, em seguida, o nome da tarefa do aplicativo. Ao fazer isso, vou me mover diretamente para esse espaço de trabalho angular. Dentro desse espaço de trabalho angular, poderíamos realmente executar nosso projeto. Para executar o projeto. Eu já te mostrei um comando que é o soro N G. Portanto, podemos simplesmente executar esse projeto em um host local. Ao lado da descida, você serve. Também podemos usar, usar dash, dash Open ou apenas dash O para abrir automaticamente nosso aplicativo em nossos navegadores preferidos. Então eu vou fazer exatamente isso. Agora, Engler, vamos pegar nosso projeto, compilar tudo junto e aleatoriamente para nós. Então, vamos esperar um pouco. Quando isso estiver concluído, veremos que esse aplicativo padrão fictício foi criado pela Angular para nós. O Angular faz isso automaticamente e já tem alguma coordenada. O código de exemplo são apenas os links úteis que podem ser úteis para nós. Você pode ver os links onde você pode aprender o Angular, também a documentação da CLI e vários recursos diferentes que o Angler tem. Além disso, você pode ver os recursos que o Angular também suporta. É como criar um novo componente, sobre o qual aprenderemos um pouco mais tarde. Mas esse código inicial não é nada importante para nós. Mas, como já mencionei, deixe-me mostrar ao lado do meu terminal, abri outro porque é muito útil para mim ter dois terminais abertos. Você aprenderá neste curso. Por quê? Porque também geraremos e criaremos novos componentes ou serviços que a Angler tem e apoia. E para isso, ainda manteremos nossos aplicativos em execução no terminal esquerdo, enquanto no lado direito, podemos usá-lo para gerar esses recursos. Mas aqui, o que vou fazer, usarei o código para abrir meu aplicativo de tarefas no meu código do Visual Studio. Então aqui está. Este é um espaço de trabalho angular oficial. E no lado esquerdo aqui podemos ver, bem, todos os arquivos que Angler tem por enquanto. No próximo vídeo, aprenderemos mais sobre o Angular e o que cada um desses arquivos faz por nós. Então, vamos imediatamente entrar nisso. 3. O que é Angular: Então, o que é realmente Angular? Bem, Angular, simplificando, é uma estrutura JavaScript e é usada para criar aplicativos de página única. O que esse aplicativo de página única me faz? Bem, esses aplicativos seriam aplicativos com roteamento e também páginas diferentes sem recarregar essas páginas. Então, por exemplo, aqui no site oficial da Angular, quando eu me movo para a página de Recursos, você pode ver que a página foi alterada mas ela não atualizou a página. E esse é aquele aplicativo de página única. Tudo é apresentado em uma única página, mas isso renderizará novamente o conteúdo necessário para uma página específica. Agora, a seguir, Bangalore, existem muitas estruturas JavaScript diferentes que você pode usar. Alguns dos mais populares ao lado de Angular, React e Vue. Então, o que torna o singular diferente e manchado daquelas como a visão reagente? Bem, o Angular é uma estrutura vasta em sua própria base de código. Ele também suportará roteamento e até mesmo o próprio módulo HTTP. Além disso, existem muitos passivos Seibel diferentes da Angular que já estão integrados ao angular. E há até mesmo um JS de interrupção de luz de biblioteca de terceiros que vem por padrão com o Angular. Então, com dívidas, você pode ver que esse dedo é realmente vasto e há muito a aprender aqui. E você poderá criar aplicativos incríveis desde o início com o Angular. Agora, por ser uma estrutura tão vasta, obviamente é muito mais difícil aprender a estrutura. Mas vamos falar um pouco sobre a popularidade do Angular. De onde vem o Angular? Em primeiro lugar, bem, Angular foi desenvolvido pelo próprio Google, e o Google ainda trabalha Angular diariamente para torná-lo melhor a partir de um ou dois anos. cada seis a nove meses, você pode esperar uma grande atualização do Angular, que mudará sua própria versão. Atualmente, estamos na versão 14. E, como eu disse, a Inglaterra está bem no topo, ao lado da vista. E, ainda assim, como as estruturas de JavaScript mais populares que existem. Agora, antes de mergulharmos no código, eu também gostaria de mostrar alguns dos projetos interessantes que foram criados com o Angular. Por exemplo, o lift, como aplicativo, foi construído com Angular , Tinder e Snapchat também. Existem muitos projetos diferentes que foram construídos com o Angular. Muitos deles tiveram muito sucesso nisso. Então, com isso, você pode ver que você pode realmente construir o que quiser com o Angular. Portanto, é apenas uma novidade decidir que você deseja criar um pequeno aplicativo que faremos neste curso ou um aplicativo maior como um desses. Agora, vamos voltar ao nosso código. Em primeiro lugar, vamos falar um pouco sobre o angular e o código aqui também. A primeira coisa que preciso mostrar são esses módulos de nós. Esses módulos de nós serão instalados automaticamente quando criarmos nossa aplicação angular. Para esses módulos de node, é muito importante ter esse pacote dot json e o arquivo package.json nesta especificação e nesse arquivo JSON, podemos ver algumas informações simples sobre nosso aplicativo, como o nome e a versão. Podemos ver diferentes scripts ou comandos que podemos executar, como o NG serve para executar nosso aplicativo. E podemos ver diferentes dependências que foram instaladas automaticamente com o Angular. Você pode ver que o Angular tem um núcleo, um módulo que obviamente está instalado aqui, e esses são os principais recursos do Angular, o coelho. Recursos bem diferentes, como animações, formulários, roteador e assim por diante. E eu também mencionei isso, mas o adágio JS como biblioteca, mesmo sendo uma biblioteca de terceiros, não uma biblioteca angular será instalada aqui porque Angular é bastante utilizado nessa biblioteca JS de interrupção. Agora, se você quiser alterar a configuração do seu aplicativo Angular, você sempre pode abrir esse arquivo JSON Angular.js. Aqui você verá, bem, todo o esquema do seu projeto. Na verdade, você pode ver o nome do projeto e todo o esquema dele. Então, por exemplo, se você tiver alguns estilos externos que deseja usar, como importar a biblioteca Bootstrap. Bem, você pode fazer isso aqui, ou até mesmo Bootstrap JavaScript. Você pode fazer isso em um script aqui, aqui você também pode ver configurações diferentes para o projeto angular, como a própria produção. Você pode definir suas próprias configurações aqui. Agora, isso é apenas a configuração do aplicativo Angular. Vamos fechar esses arquivos e entrar nessa pasta SRC, a pasta de origem. Dentro dessa pasta, a primeira coisa que é realmente importante para nós é esse arquivo main.js. Isso significa que p é arquivo. Vamos pegar o módulo principal do Angular e Bootstrap desse módulo. O módulo principal do aplicativo Angular geralmente é esse módulo de aplicativo, que você verá em breve. No próximo vídeo, trabalharemos mais com módulos. Angular realmente usa esses módulos e você verá neste curso como ele faz isso. Mas nesse arquivo, angular, vamos pegar esse módulo e executar o aplicativo com base nesse módulo. Portanto, é muito importante que tudo o que você tenha em seu aplicativo. Deve ser importante neste arquivo de módulo do aplicativo, para que o aplicativo possa realmente conhecê-lo. Agora, aqui também temos o styles.css, que é nosso estilo global. Voltaremos a isso um pouco mais tarde e também indexaremos o HTML de pontos. Este é aquele arquivo HTML que sempre será renderizado novamente. Esse é aquele aplicativo de uma página e página única. Então, aqui, podemos ver essa abordagem de rota aprovada e por esse aplicativo quando extraída a rota atual que estamos analisando atualmente. E ao configurar corretamente nossas rotas, poderemos soldar, apresentar um conteúdo diferente para uma rota específica. É assim que a mágica acontece. É por isso que não precisamos realmente atualizar a página. Mas poderemos nos mover de uma rota para outra, de nossa página para outra, e o conteúdo será automaticamente renderizado novamente. Agora, aqui, poderíamos ter ambientes diferentes que desejamos configurar, como produção ou simplesmente nosso próprio ambiente de desenvolvimento normal. Além disso, poderíamos ter nossos próprios ativos aqui, como imagens, fontes e assim por diante. E poderíamos ter, bem, a aplicação real, essa aplicação sexual. Bem, existem alguns arquivos aqui. Vamos fazer com que todos comecemos pelo arquivo principal, como este aplicativo, aquele módulo que P S barra. Então, antes de tudo, por quê? Bem, peers é uma extensão para um TypeScript. E angular, por padrão, usa o TypeScript em todo o aplicativo. Portanto, é muito importante que você conheça pelo menos o básico do TypeScript para realmente funcionar com o Angular. Mas vamos voltar a esse arquivo do módulo do aplicativo. Aqui podemos ver esse decorador do módulo N G. Ao usar esse módulo de energia, estamos dizendo que esse arquivo será usado basicamente como um módulo. E como esse é nosso módulo principal para nossa aplicação, nosso módulo de aplicativo interno devemos ter todas as entradas necessárias. Por exemplo, nosso componente de aplicativo, que foi o primeiro componente que você já viu em um vídeo anterior, primeira página criada por padrão a partir do Angular. Há também um módulo de navegador que abrange, além de ótimos utilitários. E sem isso, não podemos codificar por meio do aplicativo Angular. E também há um módulo de passeio, que é o módulo que criamos em nossa estrada. Você se lembra de que nos perguntaram se desejávamos usar o roteamento angular e selecionamos sim por esse comando quando geramos nosso aplicativo. Bem, isso criou exatamente esse módulo de roteamento e o importou automaticamente para nós aqui. Agora, aqui você pode ver que os componentes devem ser importantes nas declarações. Os módulos devem ser importantes para serem importados nas importações, existem provedores como serviços e parte bootstrap representa o que o aplicativo realmente deve executar. E para nós, é o componente AB, nosso componente inicial. Então, vamos abrir esses componentes iniciais. Vamos abrir o arquivo HTML. E isso aqui é, na verdade , todo o código que podemos ver atualmente em nossa tela. Voltando rapidamente à minha tela. Esse é exatamente esse código. Agora, esse código não é muito importante , então podemos realmente pegá-lo. E vamos usar a tag H1 aqui e digamos olá, mundo. Ao fazer isso, eu poderia abrir meu host local e podemos ver que o conteúdo agora é, na verdade, apenas o olá, mundo. Agora, para que isso funcione e realmente recarregue nosso aplicativo automaticamente, você ainda precisa manter esses hosts locais funcionando com o comando desejado. Voltando ao meu código agora, posso ver que ao lado desse arquivo HTML, posso ver o arquivo CSS, essa especificação, esse arquivo ts e o arquivo ts. Esses são todos os arquivos que pertencem a um componente. Normalmente, quando criamos um componente, teremos quatro arquivos para esse componente. Em vez de codificar HTML, CSS e TypeScript juntos, o angular realmente os dividirá em arquivos diferentes. Então, ao visitar este aplicativo dot component dot ts file, bem, aqui a configuração desse componente realmente acontece. Cada componente terá seu próprio arquivo T e TypeScript. E ele terá esse decorador de componentes em seu interior. Teremos um seletor. Somos triviais, bem, podemos usá-lo para selecionar o componente da dívida e mostrar com som. Por exemplo, o seletor aqui é a rota do aplicativo. E, se você se lembrar, em nosso arquivo index.html, estamos usando esse componente aqui como um componente de rota do aplicativo. Agora, ao lado desse seletor ou fim de semana, especifique o modelo e o estilo do nosso componente, que seriam nossos arquivos HTML e CSS. Então, em poucas palavras, isso é sobre os componentes, por enquanto, trabalharemos com eles um pouco mais tarde. A próxima coisa aqui é essa especificação de ponto que é arquivo, arquivos de especificação em Angular. Bem, esses são usados para testes. Portanto, se você precisar escrever algum teste automático, você os fará bem aqui, em seus próprios arquivos de especificações. E a última coisa que realmente não verificamos é esse módulo de roteamento de aplicativos. Esses módulos de roteamento separados, nós apenas, bem, ele usará esse decorador de módulo de energia para configurar o módulo. Você já sabe que isso é importante em nosso módulo de aplicativos. Portanto, nosso aplicativo realmente conhece esse módulo. E aqui você pode ver a configuração da rota, que aprenderemos mais sobre ela posteriormente. Mas essas rotas devem ser passadas em um módulo de roteador da Angular. Portanto, o aplicativo Angular poderia realmente conhecer essas rotas. Agora, ao lado desses recursos, como os componentes do módulo, há muitos recursos diferentes que o Angular tem e suporta, como serviços, canais, diretivas e assim por diante. Mas antes de terminar esse vídeo, vamos voltar ao nosso estilo de CSS aqui. Aqui, vou estilizar meu aplicativo globalmente. Por exemplo, vou pegar todos os meus elementos no meu aplicativo e colocar o preenchimento neles para ser, por exemplo, 0 e também a margem para ser 0. Ao lado da morte ou pegaram meu corpo. E, por fim, defina a família de fontes a ser usada como família de fontes para ser Courier New. E também definirei a cor da minha fonte como 333333. É isso mesmo. Agora, vendo meu aplicativo, podemos ver que nosso hello world é uma fonte indiferente. Também podemos ver que não há muito espaço aqui na parte superior e esquerda, e estamos prontos para iniciar nosso aplicativo. No próximo vídeo, aprenderemos mais sobre os módulos. Uma das principais características do Angular. 4. Módulos: Agora já falamos sobre os módulos, mas gostaria de dizer mais algumas coisas. Também podemos dividir nossos módulos em nossos módulos raiz ou módulos de recursos. módulo escrito seria nossos principais módulos que poderíamos ter para o aplicativo, como este módulo de aplicativo. Mas os módulos futuros seriam como módulos específicos que serão usados para um futuro específico de nossa aplicação. Digamos que seu aplicativo ofereça suporte à autenticação e autenticação de dados possa ter várias páginas diferentes, como login ou login. Talvez redefina sua senha. E pequeno. Com muitas dessas páginas, muitas funcionalidades também haverá muitas funcionalidades . Portanto, é natural separar essa indicação relativa estranha como um recurso e criar o módulo futuro para ela. que significa que todos os componentes que teremos não precisamos importá-los em nosso módulo de aplicativo aqui, mas podemos importá-los em nosso módulo futuro que poderíamos criar. Ainda assim, nosso módulo de aplicativo deve conhecê-los. Portanto, poderíamos simplesmente importar esse módulo de recurso no módulo SAP e todo o aplicativo ainda funcionará bem. Um caso interessante de uso dessas rotas ou módulos futuros é que podemos ver isso quando abrimos esse módulo de roteamento de aplicativos. Nesse módulo de roteamento separado, podemos ver essa palavra-chave para root. Bem, um método chamado estrada. Para esse método, estamos passando nossas rotas, o que significa que essas rotas são as principais rotas da nossa raiz do nosso aplicativo. Bem, as principais rotas para nosso aplicativo voltarem a esse futuro de autenticação, já que esse recurso de autenticação terá suas próprias páginas e também seu próprio módulo futuro, é natural para criar suas próprias rotas futuras que possamos usar. Um caso de uso muito interessante desses módulos futuros. Bem, é esse módulo compartilhado no Angular, nós, como desenvolvedores, geralmente criamos esse módulo compartilhado onde temos todos os nossos, por exemplo, componentes, serviços e canais que são bem usados, compartilhados, amplamente usados em toda a nossa aplicação. Então, aqui, agora vou criar meu módulo compartilhado. E, novamente, usaremos novamente a ferramenta CLI para isso. Então, para fazer isso, perdemos em G, G para gerar, M para módulo. E então eu deveria usar o nome de um dos meus módulos, que será compartilhado. Aqui podemos ver que o módulo foi realmente criado para nós. Voltando ao meu aplicativo no nosso lado esquerdo, terei aqui uma pasta compartilhada. Agora, dentro dessa pasta compartilhada, posso ver meu compartilhamento daquele módulo, esse arquivo ts. Podemos ver que esse módulo compartilhado tem menos código do que nosso módulo de aplicativo , porque não é muito importante esse módulo compartilhado tenha todo esse código inicial. Esse é o primeiro módulo de recursos que temos. E esse módulo é realmente usado para recursos compartilhados que poderíamos ter. Por exemplo, na próxima palestra, criaremos nossa barra superior para nosso aplicativo. Em vez de criar essa barra superior em todas as nossas páginas, criaremos nosso componente compartilhado de uma barra superior. Portanto, importaremos esse componente compartilhado dentro desse módulo compartilhado e também exportaremos. Portanto, nosso aplicativo poderia saber sobre isso. Por dívida, podemos usar esse componente da barra superior sempre que desejarmos, e sempre podemos tê-lo em nossa tela sem reutilizá-lo repetidamente. Então, novamente, esse módulo compartilhado é muito útil para nós porque ele sempre pode conter todos os nossos recursos compartilhados que poderíamos ter, como diferentes componentes, serviços ou tubulações e assim por diante. Agora que mencionei aquela parte superior sobre um componente, vamos para o próximo vídeo, onde falarei mais sobre os componentes e, juntos, criaremos essa barra superior. 5. Componentes: Agora, próximos dois módulos, os componentes também são um recurso muito importante do Angular. Sem componentes, não teríamos nenhuma página e nem mesmo conteúdo em nossa tela Neste vídeo, mostrarei como podemos criar um componente no Angular. O componente que eu desejo criar é aquele componente da barra superior que podemos usar. Os componentes da barra superior devem ser apresentados em todas as nossas páginas que poderíamos ter em nosso aplicativo. Portanto, seria bom criar algum tipo de componente reutilizável. Bem, todos os componentes Angular são, na verdade, totalmente reutilizáveis. Mas para nós, aqui, daremos um passo adiante e criaremos esse componente da barra superior para estar em nosso módulo compartilhado. Dessa forma, indicaremos que o componente da barra superior é um componente compartilhado e não pertence a nenhuma página específica. Então, para criar esse componente da barra superior no meu terminal usando a ferramenta CLI da Angular. Novamente, usaremos o comando N, G, depois G para gerar, veja para componente. E eu vou gerar esse componente na pasta compartilhada, que é a barra superior do nosso módulo. Agora, no meu editor de código, posso realmente abrir esse módulo compartilhado. Compartilharemos a pasta e, em seguida, a barra superior. E aqui eu posso ver quatro arquivos diferentes. Há HTML, CSS, TypeScript e também arquivo de teste para esse componente. Eu já mencionei isso no início que cada componente geralmente vem com quatro arquivos para ele. Esses quatro arquivos serão, na verdade, esse único componente. Então, dividimos nosso HTML, CSS e TypeScript, então não escrevemos tudo em um arquivo. Pode ser um arquivo bem longo. Então, neste componente da barra superior, o Angular, uma vez que gera um componente de dívida, ele também adiciona esse tipo de conteúdo fictício para esse componente. Então, vamos nos certificar de que realmente apresentamos esse componente em nossa tela. Então, indo para o arquivo TypeScript da barra superior, posso ver o seletor da barra superior f traço, que significa que no componente de pontos do meu aplicativo onde eu tenho, onde eu tenho esse Hello World, eu removerei esse Hello World agora, e adicionarei o elemento HTML5 da barra superior f, f traço. E isso deve realmente apresentar nosso componente de barra superior. Mas aqui, temos um erro. Além disso, se abrirmos nosso host local, esse mesmo erro será visível em nosso host local. Isso é bom porque o Angular é muito mais fácil de depurar dessa forma. A razão pela qual temos esse centro é porque nosso componente do aplicativo não conhece a barra superior do aplicativo. E a razão pela qual não sabe, bem, essa barra superior do aplicativo pertence a esse módulo de compartilhamento. Então, dentro desse módulo compartilhado na matriz de declarações, posso encontrar esse componente da barra superior. Mas se eu acessasse meu arquivo app dot module dot txt, não existem esses componentes, isso é apenas um componente AB. Então, o que devemos fazer aqui? Bem, devemos importar esse componente da barra superior em nosso módulo de aplicativo para que possamos usá-lo por meio dos componentes do módulo de aplicativo que poderíamos ter. Mas como temos esse módulo compartilhado, desse módulo compartilhado, eu simplesmente exportarei. Então, vou acessar a matriz de exportações dos EUA e posso ouvir além do que eles desejam exportar. Para mim, isso pode ser o componente da barra superior. Agora, em vez de importar meu componente principal da bateria no módulo do meu aplicativo, posso simplesmente importar meu módulo compartilhado aqui. Dessa forma, vou importar o módulo compartilhado e tudo o que é exportado desse módulo compartilhado. E com isso, simplesmente corrigimos esse erro, o que significa que agora estamos usando a barra superior do aplicativo em nosso arquivo HTML do componente ponto do aplicativo, verificando meu host local. No momento, posso ver que o texto aqui da barra superior funciona, que significa que o componente é realmente apresentado na minha tela. O conteúdo desse componente é que a barra superior funciona. Falando sobre esse conteúdo. Vamos criar alguns aqui. Então, aqui, removerei esse parágrafo e adicionarei uma div com a classe da barra superior. Essa classe será usada posteriormente para estilização. Agora, nesta barra superior, você pode ouvir duas seções. A primeira seção pode ser uma seção de logotipo. A segunda seção pode ser uma seção de navegação. Então, agora que temos essas duas seções na minha seção de logotipo, eu não vou usar nenhuma imagem para um logotipo, ou elas usarão apenas H2, o que significa tarefas. Então, aumente a tarefa. Então, vamos usar um salto singular aqui. Agora, para minha navegação aqui, criarei navegação com lista não ordenada. Em seguida, o primeiro item da lista terá uma etiqueta de ancoragem. Esse árbitro H pode levar a um hash. Por enquanto, você verá mais tarde como fazer um roteamento adequado no Angular. Aqui, o que eu vou fazer, eu direi, uau, agora vou copiar este item da lista. Lá embaixo. E para o segundo item da lista, ele pode dizer sobre. Portanto, podemos ter a página inicial sobre duas páginas para verificação de nosso aplicativo. Agora, enquanto nosso anfitrião local, isso é o que estamos aqui, apenas algum tipo de logotipo, que são textos de limite de tarefas e dois links aqui. Então, vamos estilizar esse aplicativo que estamos escrevendo esse código em um componente da parte superior. Somos capazes de abrir o arquivo CSS dele e estilizar esse componente, na verdade, para estilizar essa barra superior, vou pegar minha barra superior dividida por n. Vou exibi-la como um fluxo. Então, justificarei o conteúdo interno como espaço entre eles. E eu poderia adicionar alguma sombra de caixa, por exemplo, de 02 pixels, cinco pixels. E digamos que possam ser zeros, zeros, zeros, zeros, zeros 0 para que D tenha alguma transparência. Além disso, posso configurar a roupa de cama de 20 pixels. Agora esse será o nosso melhor bar. Agora, vamos estilizar nossa navegação. Não vou me preocupar com o logotipo. Então, barra superior, depois minha seção de navegação que eles têm e, em seguida, listas não ordenadas que eu tenho. O estilo de lista para eles não será nenhum porque eu gostaria de apresentar links um ao lado outro e não uma lista real. Agora abaixo, eu poderia novamente atingir minha barra superior. Lista de navegação não ordenada e cada item específico da lista abaixo. Para cada item específico da lista, vou exibi-los em linha para ficarem um ao lado do outro. E adicionarei a margem no lado direito em dez pixels, para que eles possam ter um pouco de espaçamento entre eles. Agora, novamente, segmente minha barra superior e, em seguida, navegue pela lista não ordenada, item da lista e por cada tag âncora específica em nosso item da lista. Aqui, vou definir o tamanho da fonte de 20 pixels. Em seguida, usarei a decoração de texto para não ser nenhuma. E vamos mudar a cor aqui. A cor dos meus links pode ser 333333. E, finalmente, direcionarei novamente minhas etiquetas de ancoragem, mas desta vez com efeito de passar o mouse sobre elas. Então também ativo e também focado. Então, para tudo isso, vou mudar a cor para 777777. E com isso, na verdade temos nosso conteúdo, HTML, estilo, nosso código CSS para nossa barra superior. Em como esse componente sabe disso? Bem, nos componentes de pontos da barra superior, o arquivo ts, podemos ver onde declaramos nosso componente. Há um seletor, mas também há um modelo específico e estilos específicos que estão além desse modelo. Então, essa é basicamente a configuração do nosso componente. Na minha tela agora, podemos ver nossa barra superior. Há um registro no lado esquerdo e página inicial e sobre os links no lado direito. Posso até ampliar um pouco para que você possa ver melhor. A vantagem dessa barra superior, bem, é que é um componente compartilhado, que significa que, quando eu for à minha página inicial, ainda verei, ainda devo ver meu componente da barra superior. E também quando eu for para a página sobre, ainda verei novamente meu componente da barra superior depois de configurar tudo bem, meu roteamento e as páginas também, falando sobre dívidas, certo? No próximo vídeo, trabalharemos com nosso roteamento. 6. Roteamento: Portanto, o roteamento em geral, bem, na Web raramente é usado hoje em dia. Quase não há site ou aplicativo que realmente não tenha rotas. Então, basicamente, sempre que você quiser passar de uma página para outra ou clicar em um artigo específico para ler esse artigo. Esse seria o roteamento. Todas essas rotas devem ser configuradas dentro do aplicativo. Além disso, todas essas rotas devem saber exatamente qual conteúdo apresentar ao usuário. E na Inglaterra, isso é muito útil porque o Angular tem seu próprio roteamento angular. Então, por que é importante que o Angular tenha seu próprio roteamento? Bem, muitas tecnologias atuais, mesmo as mais populares, não suportam o roteamento desde o início. Portanto, você precisará configurar as rotas e o roteamento. E é muito agitado trabalhar com ele, mas no Angular isso já está configurado. Então, se você se lembra de quando geramos nosso aplicativo próximo ao módulo angular, também tínhamos esse módulo de roteamento de aplicativos. E este é o lugar onde estabeleceremos nossas rotas. Para essas rotas, gostaria de ouvir minha página inicial e sobre. Então, vou criar agora duas páginas, inicial e página sobre. As páginas não são nada diferentes do que apenas componentes. Então, o que poderíamos fazer na verdade é gerar aqui dois componentes. Então, novamente, vamos usar essa ferramenta CLI. Vou usar N, G, G para gerar o componente C4, e isso gerará minha página inicial aqui. Quando terminar, repetirei o mesmo comando, mas desta vez por cerca de uma página. Agora que temos nossas páginas sem componentes para uma casa. E também sobre a página, bem, poderíamos configurar nossas rotas aqui nessa matriz de rotas. Então, para configurar a rota aqui, vou usar o objeto. E dentro desse objeto, eu posso usar a propriedade path, esse path. Bem, também devemos declarar um par para onde desejamos levar nosso usuário. Então, como eu tenho essa página inicial, acredito que meu usuário segue uma rota para casa. Para esta rota doméstica, eu também deveria criar o componente que usará o componente específico que deve ser apresentado nesta rota doméstica. E para mim, isso será um componente doméstico. Apenas certifique-se de importar esse componente doméstico na parte superior. Visual Studio Code é inteligente o suficiente para fazer isso automaticamente para mim. Agora, vamos criar a próxima rota. Então, vírgula aqui e depois o próximo objeto para um animal de estimação de cerca de, então o componente desta página será sobre o componente. Eu também usei aqui capitalizado cerca de. Vou mudar isso para, bem, todas as letras para minúsculas. Bem, neste momento, temos nossas rotas aqui na URL. Se eu mudasse meu anfitrião local para Slash Home. Bem, a página inicial ainda estará na URL, o que é bom. Se eu mudasse para cerca de. Ele ainda está lá. Então Angular realmente sabe disso. Não há conteúdo na tela e também não podemos alterar a rota clicando aqui, você pode ver apenas dinheiro aqui, mas vamos corrigir isso. Então, também quando chego à porta de hospedagem local 8200, não há nada aqui porque eles têm essa página inicial e também a rota inicial. Seria bom redirecionar automaticamente o usuário para a página inicial para configurar esse redirecionamento na parte superior da minha matriz aqui, vou criar a nova rota. Essa nova rota terá, bem, um caminho que será apenas a string vazia, ou seja, quando o usuário apenas visita nosso domínio. E quando isso acontecer, usarei a propriedade de redirecionar para e redirecionarei o usuário para minha página inicial. E a última coisa, também devemos usar o path match, então como nosso animal de estimação deve combinar. E aqui eu posso usar a combinação completa para o meu caminho. Então, agora, verificando rapidamente meu navegador, se eu removesse esta coluna da minha página e inserisse meu domínio aqui, podemos ver que ainda somos redirecionados para a barra inicial porque essa direção vermelha era no lugar. Agora, como estou nesta página inicial, eu deveria ver algum conteúdo aqui, pelo menos aquele texto fictício que vem com o Angular. Trabalhos domésticos, certo? Mas não há conteúdo aqui embora exista a rota de origem. E sabemos que temos esse componente doméstico. Bem, embora tenhamos esse roteamento estabelecido, angular ainda não sabe onde deve mostrar esses componentes. Então, no meu arquivo HTML do componente ponto do aplicativo, onde tenho essa barra superior, logo abaixo, usarei o elemento chamado Router outlet. Essa rota e saída basicamente liberarão nossos componentes para dentro. Portanto, dependendo de qual rota estamos em casa ou por perto, ele pegará os componentes que são usados para essas rotas e apresentará aqui mesmo em displays, onde quer que usemos essa rota e saída, se eu o usasse em outro lugar, ele apresentaria esses componentes lá. E agora já podemos ver uma mudança. Nós vemos esses trabalhos de casa. Se eu alterasse manualmente a página para cortar , veria sobre trabalhos. Mas eu disse o manual e certo, então ainda não conseguimos alterar isso por cheque, alterando os links aqui, certo? Vamos apenas mudar para esse hash, que não é uma rota existente para nós. Então, para isso, na verdade, precisamos ir em nosso componente da barra superior, onde temos esses links. Então, no Angular e em vez de usar um rascunho como esse, temos algo diferente. É chamado de link de roteador. Esse link do roteador pode nos levar a algum lugar. Para mim aqui, isso me levará à página inicial do slash porque essa é uma rota para casa aqui, também quatro abaixo. Eu removerei novamente esse H ref e usarei a barra auditiva. Sobre. Agora temos alguns erros aqui. É porque esse link de roteador não é propriedade conhecida desse elemento específico. E não é que seja uma propriedade desconhecida. É porque neste componente da barra superior, bem, esse componente da parte superior pertence ao módulo compartilhado. Esse módulo compartilhado não sabe que realmente usamos o roteamento em alguns de seus próprios componentes. Portanto, é muito fácil enfrentar isso na matriz de entradas, onde normalmente importamos módulos. Bem, podemos simplesmente importar o módulo do módulo do roteador importando este módulo e também importá-lo na parte superior a partir de um roteador de barra angular. Ao importá-lo, perderemos essas flechas. Agora, o que isso significa? Se eu clicar em Sobre, isso me moverá para a página Sobre. Se eu clicar em home, isso me moverá para a página inicial, que significa que temos nossas páginas no roteamento em vigor. Agora, ao lado desse roteamento que você viu, o redirecionamento e também como configurar os links para trabalhar com o roteamento e as páginas. Isso é muito mais do que roteamento. O roteamento é um módulo inteiro que pode ser configurado também para módulos filhos, podemos ter rotas infantis, também podemos ter rotas dinâmicas por ideias específicas ou por lesmas específicas, conforme desejar. Também poderíamos passar dados de uma rota para outra rota. Também poderíamos explorar nossas rotas e fazer algo específico com nossas rotas, podem ser retirados os parâmetros das rotas e muito mais, muito mais. Mas o roteamento em Angular pode ser seu próprio curso; para ser honesto, provavelmente pode levar uma ou duas ou três horas para explicá-lo completamente. Então, em vez de fazer tudo isso neste curso intensivo, continuaremos com esse curso intensivo para finalizar nossa aplicação de tarefas. E continuaremos com os serviços. 7. serviços: Então, outro recurso muito importante do Angular, é chamado de serviço. Serviços ou serviços são, na verdade, recursos injetáveis, o que significa que podemos injetar cada serviço onde quisermos, em nossos diferentes componentes, em nossas diferentes diretivas, tubos, onde quer que estejamos desejo. E por que quereríamos isso? Bem, serviços porque são injetáveis. sua maioria, armazenamos nossos dados sempre que desejamos acessar nosso servidor para obter alguns dados específicos, ou apenas desejamos armazenar localmente alguns dos dados em nosso aplicativo. Faremos isso principalmente em nosso serviço. E como o serviço é um recurso injetável, ele pode ser injetado sempre que precisarmos e extrair esses dados desse serviço específico. Para criar um serviço, usaremos novamente a CLI. Então, aqui vou usar N, G, G para gerar, S para serviço. E o serviço é injetável sempre que precisarmos. Geraremos novamente esse serviço em nosso módulo compartilhado. Desta vez, vou gerar esse serviço no módulo compartilhado do que na pasta Serviços. E então o plano de estudos será chamado de Serviço de Dados porque, na verdade, trabalharemos com os dados dentro desse serviço. Agora, no meu Visual Studio Code, posso entrar na minha pasta compartilhada e depois serviços e abrir o Serviço de Dados. Quando geramos o serviço, ele vem com dois arquivos. Um arquivo é a classe do serviço em si e o outro arquivo é um arquivo de teste para esse serviço. Então, agora vamos nos concentrar nesses dados que atendem a barra de pontos. No topo, podemos ver que o plano de estudos em si é injetável. E aqui também podemos ver que estamos usando esse decorador injetável para descrever esse serviço. Então, onde podemos injetar esse serviço por padrão no Angular? O serviço será fornecido bem injetado em um nível raiz, o que significa que, sempre que usarmos esse serviço, poderemos usá-lo se você desejar fornecer esse serviço. Apenas um módulo específico. Você pode especificar esse módulo aqui e, na verdade serviço de dívida importante na matriz de fornecedores desse módulo. Dessa forma, você pode ter serviços específicos para um módulo específico. Mas tem, esse é um aplicativo pequeno. Não precisamos nos preocupar com isso. Podemos simplesmente deixá-lo como está para ser fornecido em um nível raiz para que possamos usar nosso serviço sempre que precisarmos, pois o serviço manterá nossos dados. Vamos trabalhar com alguns dados fictícios aqui e também compartilhar esses dados com componentes diferentes. Então, o que farei aqui na classe desse serviço, criarei uma propriedade pública. Nós realmente não precisamos declarar uma propriedade pública ou privada, mas é um bom exercício fazer isso porque angular é uma tecnologia TypeScript, certo? Portanto, o TypeScript no final será compilado em JavaScript usando essas palavras-chave específicas, como tipos públicos ou privados ou específicos. O TypeScript fará isso com muito mais facilidade. Então, aqui vou criar a propriedade pública do nome de usuário. E esse aqui será o tipo de corda. Por padrão, esse nome de usuário pode ser John Doe, por exemplo. Agora temos esses dados de nome de usuário em nosso serviço e podemos compartilhá-los aqui onde quisermos. Então, o que seria bom para nós compartilhá-lo aqui? Bem, depois do meu construtor aqui, eu poderia realmente criar uma propriedade pública, que será obter nome de usuário. Isso aqui será um método e retornará uma string de volta. Por que ele retornará uma string de volta? Bem, podemos usar aqui return e depois esse nome de usuário, isso significa que, sempre que usarmos esse método, ele concordará com o nome de usuário e retornará o valor desse nome de usuário. Então, vamos realmente tentar usar esse nome de usuário em nossa página inicial aqui. Então, abra o arquivo TypeScript desse objetivo. No momento, a casa não conhece esse Serviço de Dados. Então, no construtor do furo, podemos criar a propriedade privada, que pode ser um serviço de dados. E podemos definir o tipo como Serviço de dados. Apenas certifique-se de importar esse serviço de dados na parte superior aqui. Agora, o componente inicial conhece esse serviço de dados. Além disso, qual é a diferença entre propriedades privadas e públicas? Bem, propriedades públicas, você pode usar aquelas fora desse arquivo, mas propriedades privadas não podem ser usadas fora do arquivo. Eles podem ser usados apenas na classe específica em que estão declarados. Então, agora, na verdade, neste método Mg on init, pegaremos nosso nome de usuário. Então, para isso, vamos criar aqui primeiro lugar, propriedade pública. Novamente do nome de usuário, que será uma string. E, por padrão, será uma string vazia. Então, agora, neste mecanismo, vou usar esse nome de usuário e defini-lo igual a este, que o Data Service dot get nome de usuário. E com isso, esse nome de usuário get retornará a sequência de nome de usuário para nós. E essa string será armazenada em nossa propriedade de nome de usuário dentro desses componentes. Mas por que usamos isso nessa ONG? Ngo minute é um gancho do ciclo de vida em Angular. Esse gancho de ciclo de vida será executado sempre que esse componente específico for carregado e bem inicializado. O que significa que, quando visitarmos nossa página inicial, esse código será executado. Também existem outros ganchos de ciclo de vida que podemos usar N G em mudanças em junho, destruir e assim por diante. Mas não vamos nos preocupar com esses aqui só porque eles são muito mais complexos de explicar. E isso ainda é um curso intensivo. Então, como podemos saber se esse nome de usuário realmente tem dados? Bem, vamos entrar em nosso HTML aqui. E em vez deste parágrafo, vou usar a tag H1 aqui. Aqui, usarei a vinculação de propriedades em Angular para fazer isso, usarei colchetes encaracolados, colchetes duplos e, por dentro, poderemos passar nossa propriedade. Para isso, podemos passar, por exemplo, nosso nome de usuário. Portanto, esse nome de usuário, uma vez que tenha os dados, será apresentado aqui em H1. Então, podemos apresentar isso. Texto bem dinâmico. Agora, verificando minha inscrição, podemos ver John Doe aqui. Se eu quiser ir para a página Sobre trabalhos, volte para casa. Ainda podemos ver esse John Doe, que é muito bom. Isso significa que armazenamos nossos dados em um serviço. Em seguida, movemos esses dados para um componente específico e os mostramos em uma tela. Mas agora você pode dizer, bem, isso era apenas o nome de usuário, que não são dados reais. Isso foi apenas um dado fictício que criamos. Bem, no próximo vídeo, trabalharemos com o http, onde enviaremos chamadas continuadas de HTTP para extrair alguns dados de um servidor e, na verdade apresentar alguns dados reais no tela. 8. HTTP: Portanto, o HTTP ou Hypertext Transfer Protocol é um protocolo de camada de aplicação. Ele foi projetado para comunicação entre um aplicativo da web e servidores da web. Ele faz isso por meio de vários métodos que podemos usar. Como o método get para obter alguns dados específicos ou método post para salvar alguns dados específicos. Além disso, ele pode ser usado para passar cabeçalhos para o próprio servidor web. Assim, poderíamos, por exemplo, autenticar nosso usuário com o token adequado. Além disso, podemos enviar parâmetros específicos por meio dessa chamada HTTP. Dessa forma, nosso servidor poderia acessar nosso banco de dados com base nesses parâmetros e extrair dados específicos com base nesses parâmetros. Algo assim é usado principalmente para filtrar dados ou classificar dados. E o HTTP faz tudo isso com uma simples mensagem de solicitação e resposta. Agora, http não é nada específico para o Angular. Ele pode ser usado em qualquer tipo de tecnologia capaz de entrar em contato com o servidor. Então, poderíamos usá-lo em, bem, outras estruturas de JavaScript, como React ou view, também poderíamos usá-lo em JavaScript bruto. Além disso, poderíamos usá-lo em formato prateado com NodeJS, Python, C-Sharp, etc. Mas o Angular tem seu próprio módulo para o HTTP. Muitas outras tecnologias não suportam seu próprio módulo para HTTP, mas o angular sim. Com esse módulo. Somos capazes de usar bem o HTTP e todos os seus recursos, de forma muito mais fácil, que você verá em breve. Mas a primeira coisa aqui é que precisamos importar esse módulo HTTP em nosso aplicativo. Portanto, nosso aplicativo poderia realmente usá-lo. Para fazer isso. Vou abrir o arquivo dot txt do módulo de dados do meu aplicativo. Na matriz de entrada desse arquivo, adicionarei o módulo cliente HTTP. Agora, isso não será importado automaticamente. Então, no topo aqui, vou importar esse módulo cliente HTTP da barra angular, barra comum HTTP. E é isso. Com isso aqui, nosso aplicativo conhece esse módulo cliente HTTP que podemos usar e o usaremos. Portanto, usaremos esse módulo HTTP para extrair alguns dados específicos e extrairemos os dados da nossa API de espaço reservado JSON. Essa API também custará muitos dados fictícios diferentes. Então, poderíamos realmente usá-lo para testar nosso aplicativo, o que é um bom exemplo desse curso com o qual estamos trabalhando aqui. Se eu rolar para baixo neste site de espaço reservado JSON, aqui podemos ver diferentes recursos que podemos usar, como postagens, comentários, álbuns fotos para esses usuários. Se eu continuar rolando para baixo, podemos ver diferentes métodos HTTP que podemos usar o git para obter a postagem de dados para salvar dados, PUT ou patch para atualizar dados, excluir ou excluir dados. Agora, você ouvirá um link para este site nos recursos deste curso para que possa sempre visitá-lo e tentar trabalhar com dados específicos deste site. Os dados com os quais trabalharemos são essas tarefas. Portanto, mesmo que estejamos criando o aplicativo de tarefas, garantiremos que essas duas sejam, na verdade, nossas próprias tarefas. Então, vamos voltar ao código. Vamos entrar em nossos serviços compartilhados e abrir esses dados que atendem a barra de pontos. Agora que trabalhamos com esse método get username, eu poderia realmente remover esse método principal getUser e também remover esse nome de usuário daqui porque não precisaremos mais dele. Além disso, devo entrar na minha casa e não no componente doméstico. Remova o nome de usuário daqui e, na verdade, remova a chamada para esse método de obtenção de nome de usuário relacionado à entrada desse Serviço de Dados. Eu ainda vou mantê-lo aqui porque precisaremos dele. Então, voltando ao meu serviço aqui, eu deveria conseguir extrair os dados dessa API de espaço reservado JSON. Para fazer algo assim, devemos indicar a esse serviço que usaremos esse módulo cliente HTTP. E o HTTP tem seu próprio provedor que podemos usar, que também é injetável, o que significa que podemos injetá-lo aqui neste serviço. Então, criarei uma propriedade privada de HTTP e definirei o tipo dela como cliente HTTP. Esse cliente HTTP deve ser importante a partir de uma barra angular, barra comum HTTP. Apenas certifique-se de que, antes disso, você realmente importa esse módulo cliente HTTP em seu próprio aplicativo, esse arquivo de módulo. Dessa forma, você pode usar esse cliente HTTP. Agora, vamos criar o método pelo qual vamos extrair essas tarefas para nós. Então, aqui vou criar um método público porque usaremos esse método fora desse arquivo. E eu vou dar um nome a ele, obter tarefas. Mesmo que estejamos puxando as duas portas daquele local adjacente chamado API. Eu ainda vou renomeá-las para tarefas porque estamos criando aqui um aplicativo de tarefas. Esse método de obtenção de tarefas retornará algo para nós. Ele retornará o observável. E o observável deve ter um tipo específico aqui, ao qual voltarei. Em primeiro lugar, o que é observável? Você pode ver que observável é algo que pertence a essa biblioteca extra sim, que mencionei no início desta aula. Bem, a biblioteca Alex JS é vasta. Há muitos métodos e muitos recursos que ele possui. Portanto, não vou me aprofundar, porque pode ser necessário todo o curso apenas para explicá-lo. Mas, em poucas palavras, observável é algo que reunirá nossos dados para nós. Isso encerrará nossas tarefas. Ao encerrar nossas tarefas, poderemos explorar bem essas tarefas e usar métodos diferentes nessas tarefas. Portanto, se você precisar transformar seus dados, o observável é uma boa opção para você porque você pode realmente mapear essas tarefas, transformá-las conforme desejar e retornar apenas os dados de que precisa. para nós aqui. Isso deve retornar observável aqui, porque o cliente HTTP da Inglaterra sempre retorna o observável. Porque dessa forma, é muito mais fácil trabalhar com dados utilizando aquele observável, que você verá, mas agora relacionado a esse tipo genérico que deve ser passado para esse observável. Bem, devemos passar o tipo de dados real que abordaremos aqui. E, por enquanto, não sabemos realmente que tipo de dados obteremos desse espaço reservado JSON. Então, vou definir o tipo para ser qualquer um aqui. E mais tarde, quando tivermos dados reais, obteremos esses dados e verificaremos o que, bem, quais dados reais temos. E criaremos um modelo específico para esses dados, mas falaremos mais sobre isso posteriormente. Agora, dentro desse método, poderíamos realmente escrever nosso código para obter a tarefa. Então aqui eu usei o retorno e vou retornar isso, aquele HTTP. Então, eu estou chamando esse modelo HTTP. E só o tempo terá métodos diferentes que eu possa usar. Um desses métodos é o GetMethod. Dentro desse método get, devemos passar a string para a API. Bem, a sequência de código real que obterá os dados para nós. Voltando ao site do espaço reservado JSON, clicando nessas duas portas, pude ver aqui que ele trará 200 tarefas para mim. Aqui mesmo no URL, posso ver o URL real que fará isso por nós. Então, vamos copiá-lo de volta no código. Eu poderia simplesmente colar essas duas portas aqui. E como vai precisar de muita coisa para fazer, são cerca de 200 delas. Eu realmente não quero trabalhar com essa quantidade de dados. Então, eu pude ouvir definir o parâmetro, que é o limite de sublinhado, e vou defini-lo como igual a cinco. Dessa forma, vou extrair apenas as cinco tarefas dessa API de espaço reservado JSON. Esse limite de sublinhado nem sempre é o mesmo. Cada API terá seu próprio parâmetro. Então, se você estiver criando sua própria API, você terá seus próprios parâmetros. Acontece que a API de espaço reservado JSON usa esse limite de sublinhado. E com isso, estamos praticamente concluindo nosso Serviço de Dados. Agora, vamos aos nossos componentes domésticos no, na verdade, obter esses dados neste componente, no meu componente doméstico aqui, na minha energia ligada, nele. Vou usar novamente esse serviço de dados obscuro. Nesse momento, usarei um método chamado get tasks. Agora, esse método deve retornar, bem, nossas tarefas de volta para nós, mas, como é observável, podemos usar métodos específicos nele. Como é observável, ele retornará esse invólucro de dados. Então, aqui poderíamos realmente usar essa assinatura para assinar nosso observável. Ao assinar nosso observável, obteremos uma resposta direta dele. Então, aqui vou usar a resposta, que devo definir o tipo específico dessa resposta. O tipo será o dado real que estamos recebendo de volta. Atualmente, não temos o tipo específico, modelo específico para esses dados. Então, vou usar qualquer um aqui, mas voltarei a isso mais tarde. Depois de ouvir minha resposta de volta, meus dados, eu poderia realmente usar o método de seta aqui e simplesmente console.log minha resposta. Então, vou usar o registro de dados do console e, em seguida, a resposta. Então, pudemos realmente ver o que estamos recebendo de volta. A vantagem dessas assinaturas é que elas não lidam apenas com a resposta, mas também com o erro. Então, aqui eu poderia realmente passar o erro. E o console não registra esses dados. Portanto, se ocorrer um erro, saberemos qual é esse erro. E poderíamos realmente lidar com isso mostrando algum tipo de alerta em uma tela, por exemplo. A última coisa antes de verificar nossos dados, abrirei as visualizações do arquivo HTML de pontos do componente ponto inicial aqui neste nome de usuário. E à medida que removemos o nome de usuário, não sabemos muito sobre ele. Então, vou apenas mover esse texto para ser Hello World mais uma vez. Então, poderíamos realmente tornar esses componentes bem viáveis. Agora, dentro do meu aplicativo, se eu pudesse. Bem, verifique o console do aplicativo. Na verdade, eu poderia ver esse registro de dados, que apresentará a matriz de cinco itens dentro. E todos esses itens são, na verdade as tarefas dessa API de espaço reservado JSON, que significa que a solicitação da torre para os dados foi bem-sucedida e, na verdade, estamos recebendo a resposta desse HTTP. Agora, a última coisa antes de eu fechar este vídeo, ele já é longo o suficiente. Vou voltar para a pasta compartilhada e criar outra pasta no site chamada modelos. Agora, vou criar o modelo dos meus dados. Então, aqui vou criar um arquivo chamado Task Data Model Ts. Então, nesse arquivo, eu poderia exportar a interface de uma tarefa. E dentro dessa tarefa, devo declarar que tipo de propriedades os dados das tarefas devem ter. E no meu aplicativo, eu tenho essas propriedades aqui. Eu tenho um valor completo de booleano. Eu também tenho o ID do número, título da string e o ID do usuário do número. Então, na minha tarefa, criarei o valor completo do Boolean. Então eu terei o ID do número. Então eu terei o título da string. E, finalmente, o ID do usuário, que será o número. Então, agora que temos nosso modelo de tarefas, podemos realmente usar esse modelo em vez de dívidas. Bem, qualquer tipo que usamos. Então, primeiro de tudo, volta ao meu serviço aqui, estou usando o observável, que retornará todos os dados. Então, aqui ele deve retornar os dados da tarefa. Apenas certifique-se de importar a tarefa aqui de um arquivo de modelo de dados de tarefa adequado. Aqui dentro. Na verdade, ele não retornará apenas uma tarefa, mas a variedade de tarefas. Então, aqui vou definir que ele retornará o cursor da tarefa. E como estou declarando que o tipo genérico aqui, esse getMethod, também deve saber que tipo de dados ele receberá de volta para nós. Então, vou passar novamente o tipo genérico aqui e novamente usar essa matriz de tarefas com dívida. Também devemos corrigir o erro aqui. Agora, a partir daqui, vamos ao nosso componente de ponto inicial que P é arquivo. Aqui dentro. Temos nossa resposta, que retornaremos de qualquer tipo. Então, aqui vou definir novamente a tarefa a partir de um modelo de tarefa específico que criamos. E será uma matriz de tarefas. Com isso, estamos praticamente encerrados com esta palestra. Você viu como você pode usar o módulo HTTP? Como você pode obter os dados da sua API? Passe esses dados de um serviço para seu componente e, na verdade, crie o modelo para os dados e prepare os dados para serem utilizáveis em seu aplicativo. Ao falar sobre isso, na próxima palestra, faremos exatamente isso. 9. Template: Portanto, em relação a esta palestra, armazenaremos nossas tarefas localmente em nosso componente inicial e usaremos bem essas tarefas para apresentá-las em uma tela. Então, primeiro de tudo, vamos armazenar essas tarefas aqui, onde estou obtendo a resposta dos dados. Na verdade, eu poderia armazenar essa resposta em algum tipo de propriedade. Então, aqui no topo, criarei propriedades públicas de tarefas. E manterá o tipo de tarefa Curry porque espera esses dados. E, por padrão, será uma matriz vazia. Porque, por padrão, não sabemos se temos dados. Mas assim que obtivermos os dados, quando tivermos essas tarefas dentro daqui, usarei essa propriedade de tarefas obscuras que acabamos de criar. E vou defini-la como igual à resposta que estamos recebendo de volta, que são aquelas tarefas ricas da API de espaço reservado JSON. Agora que os temos, vamos para nossa casa, esse componente, esse arquivo HTML e criar algum conteúdo e também estilizar esse conteúdo. Então, dentro daqui, eu criarei o acordo. Nesta div pode conter uma classe de tarefas. Dessa forma, será mais fácil modelar mais tarde. Aqui dentro, colocarei a tag h3 como título, que veremos apenas tarefas. E depois do título, eu poderia realmente criar a lista de tarefas. Para fazer isso, criarei a tarefa de fotos, que manterá a classe de tarefas. E qual deveria realmente ser essa tarefa aqui? Bem, poderíamos abranger, bem, o título da tarefa e eu vou defini-lo em um intervalo. Também vou envolvê-lo com o texto em negrito e poderíamos digitar, por exemplo, aprender Angular. Essa é uma das tarefas, por exemplo. Agora, ao lado desse título de uma tarefa , pode ser bom realmente usar também o valor completo da tarefa. Assim, pudemos ver se concluímos uma tarefa específica. Então, aqui vou usar novamente esta caneta e, por dentro, usarei apenas o texto completo. Aqui você pode usar algum tipo de ícone ou imagem, mas vou usar textos completos. É mais fácil assim. Agora, vamos pegar toda essa tarefa e copiá-la. Digamos que três tipos, 12. Então, essas são três tarefas. Vamos mudar os valores dessas tarefas. Aqui, eu vou dizer lavar um carro. E também o último pode ser por uma refeição. É basicamente isso. Em nosso aplicativo, devemos ver algo parecido com isso. Deixe-me ampliar um pouco. Portanto, temos nosso título de tarefas. Cada tarefa terá seu próprio título semelhante e também completará o texto para ela. Vamos também estilizá-los um pouco agora. Então, para estilizá-los, abrirei o arquivo CSS de pontos do componente home dot. Lá dentro, vou pegar as principais tarefas que temos. Vou definir a largura da div como 500 pixels. Definirei a margem para 100 pixels, superior e inferior da esquerda e da direita. Assim, poderíamos alinhá-lo ao centro em Daniel definir o centro de alinhamento do texto também. Agora, a cada tarefa que me ajude, eu vou pegar essa tarefa. Vou mostrar isso como um fluxo e justificarei que o conteúdo interno seja espaçado entre eles. E por último, vou alinhar tudo no lado esquerdo do texto . Dessa forma, com esse espaço entre título de uma tarefa deve estar no lado esquerdo, nesse valor concluído deve estar no nosso lado direito. E, finalmente, vou pegar essa tarefa novamente. E os elementos de extensão que eu tenho, vou colocar um pouco de margem neles, como dez pixels, na parte superior e inferior, 0 pixels à esquerda e à direita. E isso é o que devemos agora, essas são as tarefas. Essa é a lista dessas tarefas. Mas, obviamente, essas tarefas são codificadas. Na verdade, não estamos usando as tarefas que obtivemos da API. Então, deixe-me mostrar como você pode lidar com a modelagem no Angular. Para fazer algo assim, vou voltar ao HTML. Usaremos a diretiva chamada MD4. Md4 é um loop que percorrerá alguns dados específicos. Em nosso exemplo, ele percorrerá os dados das tarefas. E para cada tarefa específica, geraremos um pacote de código como esse wrapper de tarefas, essa div de tarefas que temos com o conteúdo interno. Como precisaremos de apenas uma delas, na verdade removerei essas duas tarefas. Isso foi, essas eram apenas uma tarefa fictícia para que eu pudesse mostrá-la. Como podemos olhar? Mas agora vamos usar essa energia para direcionar um acordo. Vou usar star e depois mg para usar esse loop. Então, aqui vou dar uma olhada em minhas tarefas. Então, para cada tarefa, obterei a variável de tarefa de vida, por exemplo, aqui você pode nomeá-la como quiser. Limitarei a tarefa de uma convenção de nomenclatura. Então, vamos uma tarefa ou tarefas. Então, agora estamos examinando essas, todas as tarefas. E tudo aqui será, gerará cinco vezes porque temos cinco tarefas. Então, em vez de todos esses cinco, apenas mostrar este texto, vou remover esse aprendizado Angular. E aqui vou usar a tarefa em si. E em uma tarefa, eu tenho propriedade de título. Portanto, cada tarefa deve ter um título adequado aqui. E agora aqui está. Nós temos nossas tarefas apropriadas a partir dessa API de espaço reservado JSON. Você pode ver que todas as tarefas terão seu próprio título e o valor concluído ao lado delas, que ainda não foi usado corretamente. Nós o usaremos corretamente no próximo vídeo quando trabalharmos com um estilo específico para ele. Mas antes de terminar este vídeo, esqueci que também temos sobre a página. Então, vamos adicionar um pouco de conteúdo a essa página Sobre. Para esta página Sobre, criarei uma div, que manterá a classe do conteúdo principal. No interior, eu realmente crio o parágrafo com algum texto de Lorem Ipsum. Este parágrafo, deixe-me pegar esse texto e, na verdade, copiá-lo algumas vezes assim. Agora, a partir daqui, vou abrir o arquivo CSS, pegar a classe de conteúdo principal que temos. Definirei a largura para 900 pixels e também a margem para 50 pixels na parte superior e inferior da esquerda e da direita. Com isso aqui, com nossa página inicial quase finalizada. Também teremos a página sobre finalizada, bem, sobre finalizada também. Para a página Sobre, não quero mostrar muita coisa porque todo o conteúdo do aplicativo de tarefas acontecerá em uma página inicial. Mas como já temos essa página Sobre, vamos colocar um pouco de conteúdo fictício nela. Você pode brincar com isso. Você pode usar algumas imagens. Você pode, por exemplo, definir o título e até mesmo utilizar as tarefas daqui, também uma página Sobre. Depende de você. Mas para o próximo vídeo, vamos realmente trabalhar com o estilo. Assim, você pode ver quais estilos diferentes podemos usar no Angular. E também, como podemos usar o estilo dinâmico para cada elemento específico. 10. Estilo: Então, quais são esses estilos diferentes que podemos usar no Angular? Bem, em primeiro lugar, quando geramos nosso aplicativo, você já viu que poderia escolher um formato de folha de estilo diferente, como CSS, Sass, less e assim por diante. Mas também ao estilizar seu aplicativo, você também tem métodos diferentes. Então, por exemplo, se eu abrisse esse angular, aquele arquivo JSON, nesse arquivo, há uma matriz de estilos aqui. Na verdade, poderíamos importar aqui estilos externos como de bibliotecas de terceiros como Bootstrap ou Tailwind. Ao lado disso. Em nosso aplicativo, também devemos ter esses estilos nesse arquivo CSS, este é um arquivo de estilos global e você já pode ver o comentário aqui que você pode adicionar os estilos globais a este arquivo e também importe outros arquivos de estilos. Isso aqui é muito útil quando você está trabalhando com o SAS, por exemplo. Assim, você pode importar todos os seus próprios arquivos que você tem em um arquivo ao lado da dívida. Se eu fosse para casa. Dentro do componente inicial, podemos encontrar um arquivo CSS, que possamos estilizar cada componente com seu próprio estilo específico. E se eu estilizasse algo específico nesse componente, bem, esse código CSS é específico apenas para o componente de dívida, então ele não será passado para outros componentes. E, obviamente, existem estilos embutidos que já podemos usar em HTML. Mas também podemos utilizar ainda mais esses estilos embutidos para um estilo específico para nossos elementos específicos que desejamos. Então, por exemplo, eu tenho essas tarefas na minha tela, e algumas delas estão realmente concluídas, mas não estou indicando isso aqui. Acabou de completar o texto aqui. Então, agora vou usar esses estilos embutidos para estilizar apenas as tarefas específicas que são concluídas com a linha por meio desses textos. Então, para fazer isso no meu texto completo aqui, posso usar esses colchetes angulares e usar o estilo aqui. Com isso, estou vinculando o atributo de estilo desse elemento span. Aqui, vou usar pontos e depois usar decoração de texto, o que significa que estou segmentando o atributo específico da decoração de texto. Eu digitei errado aqui. Decoração de texto. Sim. E eu vou definir isso para ser igual aqui. O que vou fazer é verificar se minha tarefa foi concluída. Então, eu poderia verificar se é verdade ou apenas tarefas concluídas. Também verificaremos se o valor é verdadeiro. Se for esse o caso, usarei linha para governar o estilo aqui. Digitado incorretamente novamente, você tem. E se esse não for o caso, vou usar apenas uma string vazia aqui, então não há nenhum estilo aqui. Agora, na minha tela, eu posso realmente ver que essas tarefas foram concluídas. Ele tem esse valor completo. A tarefa já foi concluída, o que é ótimo. Como poderíamos continuar trabalhando com esse aplicativo de tarefas. Bem, seria bom se pudéssemos realmente concluir ou incompletar uma de nossas tarefas. Então, para isso, vou me mover para casa daquele arquivo txt ponto componente. E aqui vou criar um método. Então, depois desse mecanismo, criarei um método público porque esse método será usado fora desse arquivo. E o método dirá tarefa completa. O método não retornará nada, então será um método nulo aqui. Essa tarefa completa espera que a tarefa seja passada para ela. E a tarefa deve ter seu próprio tipo, que é o modelo de tarefa que já criamos. E o que eu vou fazer, vou pegar essa tarefa e um valor completo nela. E eu vou defini-lo como, bem, apenas invertido. Então, o ponto da tarefa foi concluído novamente com esse ponto de exclamação no início. Então, isso significa que se o valor completo for falso, ele será verdadeiro. Se for verdade, então será falso. Dessa forma, poderíamos concluir uma tarefa incompleta de uma só vez. Então, como podemos usar essa tarefa completa agora? Bem, na minha casa, nesse componente, nesse arquivo HTML, eu o usarei aqui mesmo quando clicar nesse texto completo. Em primeiro lugar, deixe-me diminuir um pouco isso para que você possa ver tudo com clareza. Então, temos nosso estilo aqui e aqui, agora vou usar o evento de clique. Para usar o evento de clique, usamos apenas chaves aqui e temos opções para eventos diferentes. Usarei o evento de clique e, quando esse texto for clicado, usarei o método de tarefa completo que há um erro no momento porque essa tarefa completa realmente espera uma tarefa específica. Então, aqui vou apenas passar a tarefa específica da nossa regra, da nossa tarefa, nosso NG for loop. Agora, volte para minha inscrição aqui. Se eu clicar, por exemplo, nesses textos completos, podemos ver que está meio completo que moveremos seu valor de falso para verdadeiro. E se o valor for verdadeiro, teremos que alinhar a decoração do texto . Então, estamos concluindo nossas tarefas aqui. Além disso, eu poderia clicar novamente para concluir essas tarefas. Então, com isso, você viu como é simples , com apenas uma função no estilo embutido, ter estilos específicos para cada uma de nossas tarefas em nossa matriz. E com isso aqui, terminamos. É isso, esse é o nosso aplicativo, mas ainda estamos aqui. Uma coisa a fazer é a implantação. 11. Implementação: Então, ao implantar o aplicativo Angular, ouvimos várias opções para fazer isso. Além disso, antes da implantação, há algumas etapas que devemos seguir. Por exemplo, devemos criar nosso aplicativo. Como você sabe, nosso aplicativo atual que ouvimos, bem, todos os componentes são, na verdade, arquivos TypeScript. datilografado é algo que não pode ser lido em um navegador. O navegador lê JavaScript. Então, ao criar o aplicativo Angular, também compilaremos o código TypeScript em nosso código JavaScript. E é por isso que o Angular é uma estrutura de JavaScript, embora use tipos. Então, onde podemos implantar esse aplicativo singular? Bem, existem várias opções. Poderíamos simplesmente implantá-lo, por exemplo, na Netlify, ou criar um pouco de prata personalizada e implantar tudo junto no Heroku. Mas provavelmente vou adotar a abordagem mais fácil aqui, que é a implantação no Firebase. Essa abordagem também é mais profissional porque o Firebase é frequentemente usado com o Angular. Então, por que Firebase? Firebase e angular will, ambos são, na verdade, produtos do Google. Por morto. Eles estão muito bem conectados. Portanto, é muito fácil implantar o aplicativo da Inglaterra no Firebase. Firebase é um produto do Google, que nos oferecerá muitos recursos diferentes. Ele pode nos oferecer, como banco de dados em tempo real ou uma loja de bombeiros, seu próprio banco de dados. Ele pode nos oferecer uma hospedagem que usaremos neste vídeo. Bem, para publicar nosso aplicativo no Firebase Hosting. Existem vários recursos e produtos diferentes que os usuários do Firebase. E você verá esses Wellstone quando eu realmente entrar no Firebase. Portanto, antes de fazermos qualquer coisa aqui, certifique-se de ter uma conta firebase. Então pegue seu e-mail e inscreva-se no Firebase. É gratuito, então você pode fazer isso. Depois de configurar sua conta, você pode acompanhar este vídeo e realmente implantar seu aplicativo de tarefas. Portanto, se você tiver sua própria conta do Firebase, deverá ser redirecionado para esse espaço de trabalho do console do Firebase. Então, aqui, podemos realmente criar um projeto. Bem, um projeto do Firebase. Você já pode ver que eu tenho alguns projetos fictícios de tutoriais anteriores, mas vamos nos concentrar nesse. Então, para criar o projeto, clique em Adicionar projeto. Obviamente, aqui, devemos escrever o nome do produto para que ele perca a tarefa. O nome será Task up, mas na verdade haverá um ID específico atribuído a esse projeto. Portanto, será exclusivo para você, seu perfil. A partir daqui, posso clicar em Continuar e, em seguida, somos questionados sobre o Google Analytics. Então, será usado o Google Analytics para que o Firebase possa configurar isso automaticamente para nós. Vou desativar este ano porque, na verdade, não usamos o Google Analytics e nosso limite de tarefas é um aplicativo muito simples. Então, podemos simplesmente criar o projeto aqui. Você pode esperar um pouco e o projeto será criado em breve. Depois disso, você deve ser redirecionado para o painel do seu projeto. Bem, opa, erro meu. Você não estava pronto, dirigido. Portanto, você deve clicar no botão Continuar para ser ressuscitado. E aqui está. Isso é na verdade um projeto. Esse é o seu projeto. Vamos nos colocar na parede, ver o que temos neste projeto do Firebase. Isso não é importante para este tutorial, mas é muito bom saber porque o Firebase é um produto muito bom e é usado com muita frequência. Então, aqui, em primeiro lugar, podemos começar a usar o Firebase implantando um de nossos aplicativos, como iOS, Android, VAB, e até mesmo aplicativos Unity e flatter são compatíveis com o Firebase. Além disso, no lado esquerdo, temos opções diferentes. Se eu ativar essa compilação, haverá tudo o que nosso aplicativo precisará. Basicamente, temos autenticação específica, temos banco de dados, temos um banco de dados em tempo real. Existem extensões, armazenamento, hospedagem e muitas outras coisas, até mesmo aprendizado de máquina. Agora, isso é apenas sobre o projeto, mas se eu for lançar e monitorar, esta é aquela parte da análise, ela verificará o desempenho do aplicativo para que você possa ver se há qualquer falha ao lado da dívida. A análise em si, o Google Analytics, é totalmente convertida aqui. Assim, você terá seu próprio painel e poderá acompanhar em tempo real, seus eventos específicos, suas conversões, você pode acompanhar basicamente tudo dentro do painel do Firebase. E, finalmente, há a seção engajada, que é usada principalmente para fins de marketing. No nível do anexo do botão, eu diria que há teste AB que você pode configurar e acessar seu aplicativo. Ou seja, acrescente mais do que você pode conectar e realmente ter seus anúncios diretamente na apresentação do seu aplicativo. E há muito mais a fazer com isso. Aqui, você pode ver todos os produtos realmente compatíveis com o Firebase, e são muitos produtos. Você precisa saber que cada um deles é basicamente um produto separado que é compatível com esse produto global do Firebase, o que é incrível. Então, voltarei à visão geral do meu projeto. E podemos começar daqui. E eu gostei mais uma vez, antes de fazermos qualquer coisa com o Firebase e conectarmos nosso projeto ao Firebase. Devemos criar nosso aplicativo. Devemos compilar esse TypeScript em JavaScript. Para fazer isso, você pode simplesmente usar o NG build. Nas versões anteriores do Angular, você também precisava usar dash, dash prod. Essa é uma bandeira que indicará que você precisa construir para produção. Mas nesta versão, ele fará isso por padrão. Então, basta usar o comando n g build para realmente construir seu projeto. Se a compilação funcionou com sucesso dentro do seu projeto, você deve ter uma nova pasta chamada beast para distribuição. E o interior deveria estar nosso aplicativo de tarefas, mas desta vez no código JavaScript, bem, o código é bastante agrupado, minimizado, então é difícil de ler, mas é basicamente isso. Agora temos nosso aplicativo de distribuição, bem, nosso aplicativo pronto para ser produzido. Agora, de volta à nossa visão geral do projeto. Dentro daqui, entrarei nesta seção de construção e selecionarei a hospedagem. Agora, dentro da hospedagem, devemos habilitá-la ou começar a usá-la. Então, vou clicar aqui e basicamente há as etapas que você precisa seguir. Em primeiro lugar, devemos ter certeza de que temos as ferramentas do Firebase instaladas globalmente da mesma forma que fizemos com o Angular CLI, porque o Firebase realmente tem sua própria ferramenta de CLI que ajude-nos com os aplicativos do Firebase. Bem, produtos Firebase, eu já tenho essas ferramentas do Firebase instaladas, mas continuarei com isso. Assim, você pode ver o processo em si. Agora, no terminal, vou realmente remover isso, limpar essa parte do terminal e, em seguida, vou colar esse npm install dash g para globalmente e Firebase para pressionar Enter e esperar para que ele seja instalado. Agora, depois de instalado, limparei novamente meu terminal. Agora, em seguida, temos as ferramentas do Firebase instaladas, podemos usar o método de login do Firebase para realmente conectar sua própria ferramenta de CLI V ao Firebase na web. Portanto, certifique-se de executar esse método. Também digitei incorretamente o login do Firebase. E certifique-se de executar esse método, você será redirecionado para a versão web do login. Você fará login com sua conta adequada e poderá voltar aqui e continuar trabalhando com essa ferramenta CLI. Para mim, eu já estou logado com meu usuário, então eu realmente não preciso fazer isso. Mas o que precisamos fazer é inicializar o projeto Firebase em nosso aplicativo. Para fazer isso, preciso executar um Firebase nele para inicializá-lo. Portanto, o Firebase solicitará apenas a confirmação ou estamos prontos para continuar e eu responderei sim, aqui. Agora, aqui, talvez isso tenha aumentado um pouco. Deixe-me diminuir um pouco o zoom para que você possa ver. Mas aqui, temos um produto Firebase diferente que podemos usar como banco de dados em tempo real por meio da hospedagem de funções de restauração. Essa parte é o que precisamos. Além disso, existem dois tipos de hospedagem. Uma delas é hospedar diretamente do GitHub. E isso, o primeiro é configurar os arquivos que desejamos publicar na hospedagem. E, opcionalmente, poderíamos configurar o GitHub. E eu vou com a morte. Então, aqui vou clicar no espaço para selecioná-lo e depois Enter para confirmá-lo. Agora, mais uma vez aqui, temos a opção de usar nosso próprio projeto específico. Assim, podemos usar o projeto existente, criar um novo projeto com as ferramentas do Firebase, The Fighter, baseado no projeto existente do Google Cloud Platform. Mas eu não vou me preocupar com isso. Definitivamente usaremos o projeto existente porque já criamos o aplicativo de tarefas. E agora aqui devemos ver a lista de nossos projetos. E eu vou continuar com essa tarefa. Agora nos perguntam: o que você deseja usar como seu diretório público? O que eles estão dizendo basicamente é qual parte do seu diretório de funções devemos implantar na hospedagem. E para dívidas, essa será nossa parte mais profunda. Bem, coloque a pasta e o aplicativo de tarefas internos porque esse é o aplicativo realmente viável na web. Então, para fazer isso, vou perder aqui essa tarefa e depois cortar a tarefa. Em Idaho. Se você puder ver isso corretamente, diminuirei um pouco mais o zoom. Então, essa tarefa de corte. Agora, podemos configurar esse aplicativo como um aplicativo de página única. Bem, o Angular é uma estrutura para aplicativos de página única. Então eu vou sim, aqui também. Agora, queremos configurar a compilação e implantação automáticas com well, implantações com presente. E essa é a parte opcional. Então, vou continuar aqui porque não temos nenhum repositório GitHub para este projeto. Agora, isso é uma espécie de aviso ou mensagem de erro como essa. O arquivo index.HTML já existe em nosso aplicativo de tarefas. E isso é basicamente a verdade em nosso disco. Em seguida, corte o limite da tarefa, temos nosso arquivo index.HTML, que é basicamente nosso conteúdo HTML. Mas aqui somos convidados a fazê-lo. Queremos sobrescrever isso. Bem, não, ainda desejamos manter nosso conteúdo HTML do nosso aplicativo. E com isso, inicializamos com sucesso o projeto Firebase. Bem, basicamente conectamos nosso aplicativo angular ao projeto Firebase. Portanto, só há mais uma coisa a fazer para realmente implantá-lo na hospedagem. Vou esclarecer isso aqui. Agora vou ampliar um pouco. Para implantá-lo. Podemos simplesmente usar o Firebase deploy. Então, como o Firebase realmente saberá o que precisa ser implantado? Enquanto estamos aqui, quando inicializamos o projeto com o Firebase, recebemos dois novos arquivos. O primeiro arquivo é, na verdade , o projeto conectado a esse aplicativo, que é nosso limite de tarefas. E o ponto json do Firebase é a configuração do projeto. Por exemplo, o que deve ser implantado é esse aplicativo de tarefas de barra. Isso é o que configuramos. Há reescritas que podemos fazer. Existem cabeçalhos que podemos definir aqui e assim por diante. Mas essa é uma configuração básica que vai dizer isso ao Firebase, ok, isso é o que eu desejo implantar em tudo. Portanto, podemos simplesmente continuar aqui, implantar o Firebase, pressionar Enter e esperar que ele o implante. Agora, quando tudo estiver implantado, poderíamos, na verdade, transferir esse URL fictício diretamente para nossos aplicativos para que pudéssemos abri-lo. Mas eu não vou fazer isso. Vou voltar para o meu Firebase aqui. Como agora temos uma hospedagem de configuração, não precisamos realmente seguir essas etapas porque já fizemos essas etapas. Então, vamos apenas ir x aqui. A coisa toda em si. Eu poderia atualizar a página. E em um site de hospedagem, agora temos nosso Firebase. Bem, nossa aplicação angular, podemos ver, bem, não temos mais esse botão Começar, mas, na verdade, nosso aplicativo na parte inferior, veremos também o histórico de lançamentos e também canais diferentes que podemos usar. Mas aqui, se eu clicar nesse URL, ele abrirá nosso aplicativo ao vivo. Portanto, esse aplicativo está totalmente implantado no Firebase e pronto para ser usado. Eles estão prontos para um mundo ver isso. E podemos ver que nossas chamadas HTTP também funcionam porque estamos obtendo os dados das chamadas HTTP. E também podemos concluir ou não concluir que nosso roteamento está funcionando. Quando eu mudo a rota, há um conteúdo em uma página diferente, mas é basicamente isso. Então, com isso aqui, pessoal, conseguimos finalizar nosso aplicativo de tarefas e realmente implantá-lo no Firebase. Agora, vamos todos para o próximo vídeo que eu possa dizer um agradecimento adequado a você. 12. Obrigado e adeus: Bem, é basicamente isso. Obrigado mais uma vez por fazer este curso em primeiro lugar. Se você se manteve no final dessas pontuações, você realmente tem seu próprio aplicativo de tarefas angulares construído e implantado. Agora, você pode usar esse aplicativo de tarefas para seu próprio portfólio à medida que implantamos o aplicativo. Portanto, pode realmente ajudá-lo ao longo sua carreira, à medida que construímos esse aplicativo de tarefas. Sinceramente, espero que você aprenda algo novo ou, pelo menos, que atualize seu conhecimento sobre isso por meio disso. aplicativo. E trabalhamos com muitos recursos principais diferentes de componentes Angulares, serviços, módulo HTTP, roteamento e assim por diante. Mas o que você deve saber também é que há muito mais coisas acontecendo do que apenas no meu canal do YouTube. Na verdade, você pode encontrar a série angular é central, onde abordamos todos os recursos que o Angular tem a nos oferecer. E se você estiver interessado em material, essa também é a série Angular Material para você. Agora, mais uma vez, antes de encerrarmos este curso, bem, meu nome é Stefano Marriage, e tenho mais de sete anos de experiência em desenvolvimento web. Além disso, fui seu instrutor neste curso. E, como mencionei, ao lado desses cursos do Skillshare, também ouço meu canal no YouTube chamado numérico. Portanto, não deixe de conferir isso também. Além disso, se você quiser assistir mais cursos meus aqui no Skillshare, você pode visitar meu perfil e selecionar um dos meus cursos que eu tenho lá. Por exemplo, também existe um curso Angular. Existem outros cursos para JavaScript, Bootstrap Node JS, JS e assim por diante. Mas com isso, estamos praticamente acabados. Obrigado a todos mais uma vez, obrigado por fazer este curso. terminar o curso, na verdade, também não se esqueça de enviar seus próprios projetos e de criar essas pontuações na seção de projetos deste curso. Então, todos juntos, podemos ir até eles, conversar sobre eles, talvez você também tenha algumas perguntas específicas que eu possa responder, mas obrigado a todos mais uma vez, e nos vemos em meus outros cursos. Tchau.