Treinamento essencial angular 2 - parte 8 - serviços e observáveis | Patrick Schroeder | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Treinamento essencial angular 2 - parte 8 - serviços e observáveis

teacher avatar Patrick Schroeder, Teaching JavaScript Courses

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

9 aulas (22 min)
    • 1. Introdução de serviços

      0:40
    • 2. Serviços explicados

      2:49
    • 3. Construtor

      2:00
    • 4. Exemplo de serviços

      3:21
    • 5. Introdução ao HTTP

      1:12
    • 6. Observables explicados

      2:18
    • 7. Http no ângulo 2

      1:00
    • 8. Http com observáveis no nosso aplicativo

      5:00
    • 9. Solução HTTP

      3:56
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

91

Estudantes

--

Sobre este curso

Bem-vindo à parte 8 do curso.

Nesta seção, vamos discutir serviços e observáveis.

Serviços explicados - os serviços são usados para encapsular lógica que pode ser reutilizada em vários componentes.

Construtor - O construtor é um método especial que é executado quando uma nova instância da classe está sendo criada.

Observáveis explicados - observáveis fazem parte da biblioteca de extensões reativas também conhecida como RxJS e são amplamente utilizadas no Angular 2.

HTTP no Angular 2 - Usamos http para enviar e receber dados. Angular torna mais fácil para nós enviar essas solicitações.

O código deste curso está localizado aqui: https://github.com/jakbak/learn-angular2

Conheça seu professor

Teacher Profile Image

Patrick Schroeder

Teaching JavaScript Courses

Professor

Patrick Schroeder is a self-taught full stack JavaScript developer. He enjoys working with Angular, Node.js, Mongodb, React.js, Firebase, and anything else javascript related. Patrick is passionate about teaching Javascript. He loves to help others understand difficult concepts by creating clear presentations that gradually builds to full comprehension of a given topic. He is very interested in furthering his knowledge of IOT and wearable products with the intention of teaching cutting edge technologies and collaborating to bring new products to life.

Learn JavaScript Programming

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução de serviços: Olá e bem-vindo de volta nesta seção será discutir serviços. Começaremos com uma definição de quais serviços são e como eles podem ser usados em nosso aplicativo. Isso incluirá a construção de um serviço, registrando o serviço como um provedor e injetando o serviço dentro de um componente. Nós também revisitaremos o conceito de injeção de dependência e como angular injeta uma única instância. Ou singleton, sempre que os serviços utilizados, também tomará nossa primeira olhada no construtor, sendo o construtor um método que é usado em uma classe para executar qualquer configuração inicial. 2. Serviços explicados: Vamos agora detalhar o que é um serviço e como ele é usado. Serviços. Ar usado para encapsular a lógica que pode ser reutilizada em vários componentes. Os serviços contêm métodos que fazem o trabalho de obter uma atualização. Alguns dados. Esses dados podem vir de um arquivo Jason localizado em uma de nossas pastas um externo, p I ou de nosso próprio banco de dados. Precisamos de um ter uma maneira para os nossos componentes toe acesso, thes métodos. Claro, podemos importá-los diretamente para nossos componentes. Mas isso não é ideal, pois tornaria nossos componentes frágeis e potencialmente incorrer em efeitos colaterais. É por isso que angular nos permite registrar nosso serviço com um injetor. Em seguida, o injetor cria e gerencia uma única instância do serviço conhecido como um singleton , que pode ser injetado em qualquer número de componentes que precisam de acesso ao serviço sem comprometer os dados ou o estado do nosso aplicação. Vejamos as três etapas para criar e usar um serviço. O primeiro passo é criar um novo arquivo. A convenção de nomenclatura é usar o nome do nosso recurso de serviço, seguido pelo serviço de palavras-chave, juntamente com a extensão tipescript dentro são pasta We Need a Import Injectable Injectable é um decorador que é usado para gerenciar nosso instância de serviço. E aqui também estamos importando a interface do iBook. Declaramos nosso decorador injetável acima da classe. Lembre-se, decoradores adicionar metadados ou, você poderia dizer funcionalidade adicional para a classe declarando injetável desta forma, ele nos permite injetar a classe de serviço do livro como um singleton em componentes. Em seguida, dentro da classe estará definindo alguns métodos que farão o trabalho de entrar em livros de atualização. Em seguida, precisamos declarar nosso novo serviço dentro de nosso módulo de energia. Fazemos isso dentro de uma nova chave provedores de chamadas. Agora isso está dizendo angular que queremos fornecer uma instância singleton de serviço de livros sempre que os serviços de livros injetados em um componente aqui estavam importando nossa interface de livro. Junto com o serviço de livros, precisamos adicionar ou reservar serviço dentro do nosso parâmetro construtor. Isso inicializará o serviço para uso abaixo. Em seguida, podemos criar métodos dentro da classe que têm acesso aos métodos dentro de nosso serviço, como obter livros. Então isso pode ser muito para absorver se é a primeira vez que você vê essas coisas. É por isso que vamos rever isto e mais detalhes. Junto com alguns exemplos, balas agora começam com uma melhor explicação do que esse método construtor realmente é . 3. Construtor: No último vídeo, analisamos como os serviços de ar usado para injetar dados em componentes. Classe de componente Insider. Há um método chamado construtor, que é onde precisamos injetar nosso serviço. O construtor é um método especial que foi executado quando uma nova instância da classe está sendo criada. Mesmo que não definamos explicitamente um construtor dentro de uma classe, ainda há um construtor que é feito. Simplesmente não foi visto. Usamos construtores para executar qualquer configuração inicial para novos objetos. Eles podem opcionalmente tomar parâmetros, mas eles não podem retornar nenhum valor. Vamos agora trabalhar através de alguns exemplos rápidos para se familiarizar melhor com o construtor. Nós sempre colocamos o construtor diretamente abaixo de quaisquer propriedades pré-definidas, então você vai ver o construtor usado de um par de maneiras diferentes. Em exemplos online, a primeira e mais comum maneira é que você verá o construtor usado para atribuir uma variável privada a alguma dependência, serviço injetado ou roteamento. Vai ficar assim. Definimos uma variável privada que contém um sublinhado para o serviço. Chegando instância, nós importamos. Em seguida, podemos usar esta instância variável dentro de quaisquer métodos que tinham o fogo e abaixo. A outra maneira menos comum de usar o construtor é inicializar valores de propriedade padrão, que você possa ver algo como livros e estoque. Set é uma variável pública com o tipo de número que dentro dos construtores colchetes . O valor é definido. Repare que não estamos devolvendo nada além de Onley atribuir os valores. Então esta é uma sintaxe equivalente. Mas para mim, faz mais sentido definir livros e estoque uma vez. Se você já tem um valor padrão em mente, vamos trabalhar com um exemplo de serviço em nosso aplicativo criando um novo serviço de livros. 4. Exemplo de serviços: Agora estamos de volta em nosso aplicativo, e vamos usar a interface do livro neste exemplo. Então vamos abrir o arquivo do ponto do livro e fazer algumas alterações. Então, essas propriedades aqui refletem nosso P I. Para este exemplo. Desejo usar as propriedades que correspondem ao que está sendo exibido no momento. Por isso, vou comentar isto por enquanto. E então eu vou adicionar essas novas propriedades para uso em nosso serviço. Agora, eu vou adicionar um novo arquivo, que é chamado book dot service dot ts. Vou começar exportando uma classe de serviço de livro e agora precisamos de um add minhas importações primeiro será injetável a partir do núcleo angular. Em seguida, http de Dash angular http e eu também importar minha interface de livro acima da minha definição de classe . Preciso de adicionar o meu decorador injectável. Em seguida, dentro da minha classe, eu vou criar um método chamado Obter Livros, que é do tipo I livro para a nossa interface. Então eu vou retornar em matriz de livros e este array vai ser o mesmo array que nós codificado duro em nosso arquivo componente lista de livros. Então eu vou apenas copiar a partir daí e depois colá-lo em nosso serviço. Precisamos nos certificar de que registramos nosso serviço como um provedor em nosso arquivo de módulo de ponto de aplicativo , então vamos entrar nesse serviço de importação de arquivos ou livros a partir de sua localização. Então eu tinha uma chave de provedores para o nosso módulo de energia, que define um array e atualmente está indo apenas para manter ou reservar serviço. Agora estamos prontos para usar nosso serviço dentro de nosso componente. Voltando ao arquivo do componente da lista de livros, começarei importando nosso serviço. Então eu vou adicionar uma nova propriedade de livros, que é uma matriz de livro Tipo I. Em seguida, abaixo estão propriedades irá adicionar o meu construtor dentro dos parênteses. Preciso adicionar uma variável privada do serviço de livro Sublinhado, que é do tipo de serviço de livro, que é o que acabamos de importar. A convenção aqui sempre que injetar serviços dentro do construtor é prefixar a declaração de variável com um sublinhado do que dentro dos colchetes é onde eu vou definir minha propriedade de livros igual ao meu estoque de serviço de livro, obter o método de livros. Isto vai fazer a mesma coisa que este código aqui. Então, vamos apenas comentou por enquanto. E futuras demonstrações estariam usando Engy nele em vez de carregar nossos dados dentro do construtor. Portanto, este exemplo é principalmente apenas para familiarizá-lo com o construtor, bem como como como os serviços funcionam. Então vamos salvar tudo o que carregar nosso aplicativo, e você pode ver que ele está funcionando da mesma forma que antes sem erros, Creel. 5. Introdução ao HTTP: Olá e bem-vindos de volta a Angular. Dois treinamento essencial nesta seção será discutir http e http observável é o que usamos sempre que queremos recuperar algo de um banco de dados ou em um p I Não há muita mudança entre angular um e angular a este respeito. Ainda estamos usando a palavra-chave http para executar nossas solicitações. O que mudou foi como lidamos com a resposta. Angular, também, fez a mudança para o uso de Rx Js observável essencialmente emitem respostas ao longo tempo. Em vez de a resposta ser uma ocorrência única. Então, vamos primeiro discutir o que é um observável e como ele difere de uma resposta típica baseada em promessa . Então vamos discutir como executar solicitações http Isso incluirá executar uma solicitação http get para recuperar nossos dados processando o objeto de resposta usando um observável e, em seguida assinando o observável em nosso componente estará usando nossa energia em o gancho do ciclo de vida, a fim de exibir nossos dados 6. Observables explicados: neste vídeo vai cavar profundamente no reboque. Entendendo, observável observável fazem parte da biblioteca Reactive Extensions, também conhecida como Rx Js, e eles são usados extensivamente em angular também. Você pode aprender tudo sobre o X reativo aqui no ex dot io reativo. Agora, o objetivo do Reactive X é fornecer um A p I para programação assíncrona com fluxos observáveis. Então, o que isso significa exatamente? Isso significa que observável é fornecer-nos com um fluxo assíncrono de dados que podemos assinar para que, quando novos dados forem admitidos, possamos receber automaticamente os novos dados que chegam. Você pode pensar nisso como receber as mudanças nos preços das ações, uma vez que o preço das ações está constantemente flutuando e observável poderia ser usado atualizar esses preços como eles vêm em zwart observável como uma matriz. Então, vamos usar o operador do mapa, a fim de processar a resposta Para entender melhor isso, vamos passar para o ex dot io reativo e, em seguida, clique em escolher sua plataforma e, em seguida, JavaScript. Então nós somos levados para esta home page. Se rolarmos um pouco para baixo, podemos ver um exemplo. Isso é muito semelhante ao que nosso serviço será parecido. Então esta fonte vai ser a resposta. Voltamos como um arquivo Jason, por exemplo, então podemos filtrar a resposta para corresponder a um critério selecionado. Então precisamos chamar mapa na resposta, a fim de moldar os dados. Uma vez que os dados são moldados, ele é passado para o assinante. Este assinante vai estar localizado dentro de nosso componente, e ele vai ser usado para exibir os dados em nossa visão e processar quaisquer erros. Então, como um observável é diferente de uma promessa? Observável é o trabalho com vários valores ao longo do tempo, enquanto as promessas retornam em lee um único valor observável são cancelados. Promessas de ervas não são canceladas. Herbal observável pode ser manipulado usando funções JavaScript como mapa, filtro e reduzir. Então, agora que temos uma melhor compreensão do que czar observável, vamos discutir o trabalho com solicitações http 7. Http no ângulo 2: usamos http para enviar pedidos de dados, alguns pedidos que poderíamos fazer nossos pedidos get, a fim de buscar alguns dados e colocar solicitações que são usados para adicionar ou alterar alguma parte disso. Um angular torna muito fácil para nós trabalhar com estes. Pedidos http Tudo o que precisamos fazer é importar http de barra angular http e, em seguida, adicionar o módulo HTT dentro de sua falta módulo Engy e adicionado a uma lista de importações precisamos criá-lo instância de http para que ele possa ser usado em nossa classe. Fazemos isso dentro do construtor, adicionando uma variável privada de http, então podemos fazer solicitações. Neste caso, é um pedido de obtenção. Feito toe livros ponto Jason arquivo localizado em nossa pasta A P I, e então precisamos mapear uma resposta antes de enviá-lo para o componente. Vamos agora adicionar um HD para ser get request à nossa aplicação 8. Http com observáveis no nosso aplicativo: aqui Estamos de volta em nossa aplicação. Vamos abrir o arquivo do serviço de livros aqui. Você pode ver que nós codificamos em alguns livros. O que queremos fazer é, em vez disso, pegar todos os livros localizados em Arab Bookstop. Jason, arquive aqui. Nota rápida, por favor. Certifique-se de baixar os livros separados. Pensei arquivo Jason localizado em seu recurso é pasta desta palestra e, em seguida, adicionado aqui. Então a primeira coisa que vamos fazer é importar http de barra angular http Em seguida, vamos abrir o app dot, arquivar um módulo http de importação e, em seguida, adicionado à nossa lista de importações. Vou me certificar de importar observável de nossos XJ ESA. Bem, agora a primeira coisa que vou fazer é dentro do construtor. Vamos incluir uma variável privada de sublinhado http atribuído à instância http. Bem, então mude esta declaração do iBook para ser uma matriz observável do livro tipo I e, em seguida, remova os dados codificados. E então eu posso dizer retornar este sublinhado http. Referenciamento são variáveis e, em seguida, doc obter e passar a localização do nosso arquivo em relação ao nosso índice dot html arquivo. Então ele está localizado em um p I cortar livros cortar livros ponto Jason. Então precisamos de um formato, os dados pouco antes de dá-lo para o componente para fazê-lo, vamos usar o operador mapa então vamos dizer mapa ponto E aqui precisamos realmente importar mapa de nosso ex dress, a fim de usar este método. Então, vamos adicionar uma instrução de importação para o método acima e, em seguida, para baixo, passamos em um parâmetro que representa os dados. Então, vamos dizer resposta. Agora fazemos a pergunta. Qual é o tipo de resposta? E como estamos recebendo de volta mais do que apenas os dados, por exemplo, também estamos recebendo informações de cabeçalho de volta junto com o status que devemos usar. Angular é construído em interface de resposta, e isso está localizado na mesma pasta como http. Então tomamos uma resposta, certificamo-nos de que é transformado em Jason e é do tipo I livro. Então isso é tudo o que precisamos fazer para recuperar os dados e passá-los para o componente. Vamos adicionar um pouco de tratamento de ar na próxima palestra. Mas, por enquanto, vamos ver como exibir o status em nosso componente. Então, abrindo nosso arquivo componente de lista de livros. Primeiro, remova nossa chamada para pegar livros do construtor. Agora eu quero que o dedo do pé de dados apareça como as páginas carregadas. A convenção é colocar a lógica relacionada ao serviço dentro da ONG nesse ciclo de vida. Gancho tão bem, primeiro anúncio estão em, e depois de componente, em seguida, dizer livros lista implementa componente em uma Net e adicionar são n G no gancho innit Após o construtor, eu vou adicionar dentro destes um método para obter livros que será a multa abaixo . Em seguida, vamos criar nosso método chamado Obter Livros. Este método irá então chamar o método get books no serviço de livro para recuperar todos os livros do nosso Jace em arquivo. Se tudo isso deixar os livros confusos no ar, você pode nomear algo diferente, como obter todos os livros. Mas vou deixar como conseguir livros por enquanto. E o último passo é que precisamos assinar o observável usando dot subscribe, em seguida, passando em um parâmetro que representa os dados que obtemos de volta. Este nome aqui pode ser qualquer coisa que você quiser, mas neste caso, vamos dizer livros, então função aerodinâmica Este livro inicial é igual a livros, então isso pode parecer um pouco estranho também. Mas tudo o que estamos fazendo é pegar a resposta e, em seguida, sentá-la igual à propriedade de livros de linha bem aqui. Isso funcionaria da mesma forma se mudássemos livros para algo como Response. Por último, precisamos adicionar outro parâmetro para se inscrever no caso de haver um erro. Então, vamos dizer erro, em seguida, função seta. Esta mensagem de erro ponto é igual a um ar do tipo qualquer e, em seguida, configurar uma propriedade de mensagem de ar para digitar string. Agora vamos carregar nosso aplicativo e ver os resultados até agora. Então agora estamos fazendo um loop em cada um dos livros do nosso A.P. Isso é ótimo, mas parece bem quebrado. Há duas coisas que precisamos fazer para consertar isso. Primeiro, precisamos alterar as propriedades em nossa interface do iBook para refletir as do nosso Ap I. Para que você possa copiar ou simplesmente baixar o arquivo. E segundo, precisamos editar ou lista de livros arquivo html para refletir as propriedades do nosso Ap. I. Então veja se você pode fazer as mudanças corretas aqui você mesmo, e a resposta será na próxima palestra 9. Solução HTTP: Ei, pessoal, bem-vindos de volta neste vídeo, nós vamos consertar nossas listas. Então, se você não tentou consertar isso sozinho, eu recomendo que você dê uma chance. Então, uma vez feito isso, vamos adicionar algum tratamento de erros ao nosso serviço e explorar alguns dos operadores de jazz Rx . Então, agora nosso aplicativo está quebrado. Como adicionamos o serviço ao nosso componente, não ajustamos o HTML. Então vamos fazer isso agora. A primeira coisa que vou fazer é me livrar dessas outras colunas que contêm os dados codificados . Vou manter esta mensagem favorita, Div. Ainda estamos iterando sobre livros e livros, então vou deixar isso também. Mas vou me livrar desses dois botões que não usaremos mais. Vamos abrir nossos livros. Iniciar arquivo Jason para que possamos obter uma referência para nossos itens. A imagem dos nossos livros está aqui como imagem euro. Então vai mudar isso em vez de preço do livro, é apenas chamado Price. O título do livro é chamado Nome Livro. Autor é apenas autor. Descrição do livro é simplesmente descrição publicada em agora é chamado de data de lançamento. Ainda estamos usando o livro que em estoque, mas mudei isso para ser um Booleano no Jase. No arquivo, podemos usar algo semelhante à lógica de imagem Hyatt acima. Os soldados copiam isso e dizem que se o livro estiver em estoque, seja, se estiver definido como verdadeiro, exiba a string, Sim, caso contrário, não. Então, em vez de comentários de livros, vai dizer classificação de estrelas. E então eu vou me livrar desses livros em estoque P elemento e, em seguida, corrigir esta área favorita Bs para dizer livro pensamento classificação loja e livro ponto nome. Agora vamos salvar tudo e ver os resultados. Ok, parece muito bom. Vamos agora adicionar um pouco de tratamento de ar ao nosso serviço agora mesmo. Estamos apenas enviando de volta os dados do nosso ponto a p i n, mas não fazendo nada no caso de o arquivo não ser encontrado ou algo falha. Então eu vou abrir meu arquivo de serviço de livro e primeiro criar um método de tratamento de ar privado chamado Handle Error. Uma variável criativa aqui chamada mensagem que vai exibir nossa mensagem de erro. E então eu poderia retornar o observável anexando a ele o método lance passando em nossa mensagem. Estamos usando um novo operador Rx Js aqui chamado lance, então precisamos importá-lo. Em vez de listar esses operadores individualmente, poderíamos importar toda a biblioteca Rx Js assim, mas isso não é recomendado desde nossa troca. Esta é uma grande biblioteca e não precisamos de tudo lá dentro. Agora. Vamos editar ou obter livros método para incluir o golpe de tratamento de ar. Podemos primeiro encadear o método fazer que nos permitirá registrar uma mensagem após os dados terem sido recebidos. E, em seguida, adicione também o método catch passando neste pensamento. Erro de manipulação no evento e erro é recebido e irá certificar-se de importá-los para novos operadores de acima. E então vamos quebrar o nosso P que eu chamo adicionando um s extra ao final do nosso endpoint. E agora na atualização, recebemos uma mensagem de erro descritiva agradável alertando-nos do problema com o objeto de resposta