Curso Angular #07: Introdução aos Serviços e Injeção de Dependência (DI)

[@joaopedroribeiro6924]

Cara, sua explicação de Injeção de Dependência foi simplesmente sensacional. Já estava cansado de procurar e entender sobre isso, e você explicou em questão de minutos. Acho incrível como as pessoas sentem prazer em dificultar algo tão simples, é quase um talento.

[@robsonklima1]

Parabéns pelo curso e iniciativa de divulgar sem custos! Agradeço demais!

[@edmarbueno]

Melhor explicação sobre Injeção de Dependência

[@luizhp]

Finalmente um exemplo definitivo. Nunca mais esquecerei.

[@brunospolavori9730]

Curso fantástico, muito bem explicado! Foi difícil encontrar um curso de Angular com tanto conteúdo e qualidade, gratuitamente. Mais uma vez fantástico! Parabéns.

[@luafalcao2984]

Excelente analogia do jornal com o princípio de DI! Parabéns moça!

[@viniciuscolacino]

Qndo tudo começou a complicar, ela fez essa analogia e entendi tudo.

[@impostordasbet]

Loiane meus parabéns! Melhor aula até agora do curso! Didática sensacional! Explicação de injeção de dependência ótima! Abraços!

[@boblipe02]

Aulas e Palestra Loiane, Parabéns pelo aula e pelo conhecimento disseminado👏💪🧠👨‍💻

[@alexandrefaculdade]

Essa mulher merece reverencias pelo seu belíssimo trabalho. Obrigado!

[@josemarsilva]

Gratidão pelo conteúdo disponibilizado! O site também é muito bacana, permite controlar os capitúlos do curso

[@valberjunior1002]

Eu dou o like antes de assitir o video com toda confiança que terei uma mega aula e nunca me decepciono

[@jonyconfeiteiro1672]

Muito Bom Loiane esta clareando eu achei que nao poderia aprender Angular mas vc tem uma Didatica surpreendente

[@amandaavelino8362]

Olá Loiane! Passando para agradecer as aulas! Estava estudando AngularJS antes, e foi bom para a introdução de conceitos como MVC ( MVVM ou whatever haha) e saber como funciona a estrutura de um CRUD em desenvolvimento híbrido. Me ajudou bastante, muitos dizem que não há a necessidade de se aprender AngularJS antes, pois Angular 2+ possui conceitos diferentes, de fato, porém me ajudou muito na questão de aprendizado, pude comparar um e outro, e achei a linha de aprendizado bem melhor com o Angular 2+ com o uso de componentes, embora numa versão mais recente do AngularJS, já haviam introduzido este conceito, mas nunca havia utilizado.

[@helderblsba]

Muito bom. Aqui no meu angular nao foi gerado o cursos.module ao criar o componente cursos nem o serviço. Fiz as declarações no app.modules e funcionou certo. Não sei se com isso estaria quebrando algum protocolo de segurança da linguagem, mas "na minha maquina funcionou" rsrsrsrs

[@diegoschneider3250]

Melhor definição de injeção de dependência, muito bem explicado! Parabéns!!!

[@eloi9467]

Excelente aula!

[@juarezmiranda330]

Muito bom! Obrigado.

[@PedroCardoso-sz7bp]

Sobre o 11:56 se colocar somente no module do próprio app/cursos, tive que colocar no app.module para que ele reconhecesse o provider

[@jeffersonluiz269]

Boa ilustração.

[@fnscluis]

Parabéns pela iniciativa. Finalmente entendi o conceito de injeção de dependência.

[@jacksonaquino6941]

aula muito boa, estava com algumas duvidas a cerca do assunto mas agora entendi, obrigado!

[@regisnva]

Excelente curso, Loiane! Parabéns. Que bom que encontrei um material muito bom para início de uma jornada para me tornar fullstack. Deus te abençõe.

[@uhelliton123]

Loiane, parabéns por essa grande iniciativa. Curso fantástico. Deus lhe abençoe.

[@euquefiz-]

Você é demais! Parabéns

[@leonardomedeiros7683]

Sou novo aqui. Estou usando Angular/CLI Versão 16. O "ng g s" já cria o service.ts com o decorator contendo um objeto com providedIn: 'root' que dispensa a adição do provide no module.ts

[@cindyy123]

Loiane, virei sua fã rs. Parabens pelos cursos e pela paciência nas explicações! Estou aprendendo muito com seu material!

[@FranciscoJunior29]

@loiane ótima aula, tô aprendendo muito. Meus parabéns.

[@misterand3]

Parabéns, uma das melhores didáticas que já vi.

[@jorge.r.almeida]

Curso muito bom. parabéns Loiane.. o legal é que ela mostrado o erro premeditado e depois corrigi..

[@TaynaraJaegger]

Estou aprendendo bastante com esse curso, melhorando o meu entendimento. Aqui em Angular 8, só não precisei aplicar providers, ele já funcionou, não sei porque.

[@daniel-azevedo-maia]

A partir do Angular 6, com a introdução da injeção de dependência "tree-shakable", não é mais necessário adicionar serviços aos providers de um módulo se você usar providedIn: 'root' no decorador @Injectable.

[@nataliaavila396]

Sua didatica e otima!!! Obrigada por compartilhar seu conhecimento conosco

[@SamBRGamesTutors]

Sinto-me obrigado a agradecer mais uma vez! Muito obrigado pelo conteúdo gratuito!

[@removed107]

Tô adorando o curso.

[@EricAmbiel]

Parabéns Loiane, estou seguindo suas vídeo aulas e são ótimas, melhor impossível!!!

[@leandrob9301]

Ao que parece os providers não precisam mais ser declarados no Angular 8 (pelo menos eu testei nessa versão e não precisei declarar em "providers" para ser visível por outro componente).

[@loianegroner]

Correto, não precisa, mas essa opção ainda existe caso necessário! :)

[@leandrob9301]

@@loianegroner obrigado! Legal saber! E aproveitando, obrigado pelo seu trabalho!

[@caio_40]

@@loianegroner Fiquei nessa duvida, realmente nao declarei e funcionou, otimo curso o seu Loiane

[@GuiCayres]

Curso maravilhoso, obrigado por fortalecer a comunidade!

[@weslleyfillipe1532]

Você é genial!

[@leonidasamorim]

Muito bom Loiane, parabéns, Seus cursos tem me ajudado muito. Deus abençoe

[@xavier71326]

Parabéns pelo curso.

[@brunocasstiel]

Ótima explicação

[@RafaelSanzioMP]

Estou adorando o curso de angular 2, muito bom, porém o meu objetivo é integrar o angular 2 ou 4 com Java, utilizando RestFull com JSON, no entanto, sou novato em Angular, poderia fazer um curso interessante sobre isso, seria muito interessante ver essa integração.

[@DanielAmaral1984]

@Loiane Você tem a intenção de fazer alguns videos falando sobre a integração com o Firebase?

[@arthuravilla7]

conteúdo sensacional

[@matheussoares1138]

Sensacional

[@matheusbottini5568]

Muito obrigado!!

[@JeanCarlos-ni4fv]

Gostaria de saber como se componentiza blocos de código em html no angular, algo similar ao Include do blade no PHP/Laravel, seria possível? Atualmente, utilizo o conceito de componente para telas, mas gostaria de usá-lo também para organizar blocos de código.

[@PedroSkakum]

Loiane Groner, como utilizar herança de css do componente pai? eu criei um componente e módulo Landing Page e dentro dele eu criei o componente menu, banners, fale-conosco, beneficios-da-plataforma, rodapé, etc. e dentro desses componentes filhos, eu preciso usar por exemplo a classe ".btn-yellow" que está dentro do css do componente pai (landing page)

[@loianegroner]

oi Pedro, existem 3 opções: 1 - Coloca o estilo no style.css do projeto, mas nesse caso o escopo será global. 2 - como metadado do component, adicionar encapsulation: ViewEncapsulation.None (o escopo de estilo por componente é o padrão adotado no Angular, mas se quiser deixar que o estilo tb seja usado por componentes filhos, basta adicionar esse metadado dentro do decorator @Component do pai) component 3 - Adicionar o seletor >>> no estilo que vc quer aplicar. Por exemplo (assim o estilo tb pode ser passado para os componentes filhos - segue exmeplo tb plnkr.co/edit/1RBDGQ?p=preview) :host >>> btn-yellow { color:yellow; }

[@andreemidio1]

Tive problema para fazer essa parte, a dica é reinicia o servidor ! As vezes trava e fiquei uns minutos procurando o erro e não era na aplicação.

[@ViniciusMoreiraSouto]

Ótima explicação, perfeito! muito obrigado estou usando angular 7 e na parte de inserir o "provider" não precisou, nem deu erro, deve ser da versão né?

[@rodrigofelixdev]

provavelmente ja fez isso no cursos.service.ts dentro do @Injectable

[@BeatrizCibele]

Quando quero compartilhar informações entre componentes de um mesmo módulo eu uso esse mesmo princípio de injeção de dependências ? Quero passar um objeto de uma classe pra outra

[@daniel-azevedo-maia]

Visto! ☑

[@williamgoularthe]

Boa noite Loiane. Fiz a aula e funcionou perfeitamente. Mas me tira uma dúvida No código abaixo você comentou a variável curso(Código 1). Porém no html você ainda continuou utilizando {{curso}}(Código 2) . Como foi possível exibir os cursos se a variável curso passou a não mais existir. Seria por causa desse trecho: "let curso of cursos" /*Codigo 1*/ /* for (let i = 0; i

[@loianegroner]

let curso of cursos. Nesse caso é criada uma variável local no template HTML.

[@marcelonobre1952]

Show de bola!!!

[@fabiobrasileiroo]

No angular 16 não precisou usar providers(funcionou normal), mas mesmo assim usei

[@joaovictorregopereiradasil9258]

Posso injetar mais de um serviço num mesmo construtor?

[@jucianocarvalho]

Fantastico

[@leonardomolina2774]

Olá Loiane! Quando crio o serviço sempre obtenho esse warning: "Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimental Decorators' option to remove this warning". Como resolvê-lo?

[@leonardomolina2774]

Resolvi. Se alguém passar pelo mesmo problema basta criar na pasta raiz do projeto um file "jsconfig.json" que contenha: { "compilerOptions": { "experimentalDecorators": true } }

[@CesarDevesa]

Tks!

[@eduardofabr]

Fiz agora sem o providers dentro do modulo e não apontou nenhum erro no console, alguma atualização ou isso pode ser boas práticas?

[@loianegroner]

Nas versões mais novos isso não é mais necessário.

[@eduardofabr]

@@loianegroner Show, obrigado Loiane!

[@Os3t4God]

O meu não havia dado erro antes de incluir o providers. Será porque?

[@loianegroner]

Oi Osmair, a partir do Angular 7 os serviços são injetados automaticamente, não precisa mais do providers! :)

[@fantamostroke6400]

@@loianegroner acompanhando seus comentários sobre as coisas que mudaram nos vídeos! isso é show para manter tudo atualizado, obrigado! ;)

[@jhoudoris]

salvou

[@GaleraDiscolada]

Qual o plugin que tu usa pra dar auto complit no angular?

[@loianegroner]

Na aula 08 mostro todos os plugins e temas!

[@robbp]

Loiane, qual a vantagem de colocar o cursosService como private no construtor? Eu tentei aqui sem o private e funcionou normal.

[@loianegroner]

oi Robson, é só se vc não quiser que outras classes consigam acessar esse atributo caso vc use uma instância dessa classe em outro lugar. Na verdade não faz diferença se vc declara como público ou privado no final, seria apenas pra acesso ou não em tempo de compilação do ts. []s

[@9131ramon]

Boa tarde Loiane, esse projeto que está no git, está correto ? está dando um erro aqui

[@9131ramon]

Clonei o seu no git, e está dando um erro

[@danilloprogramador7910]

Loiane nós do PHP estamos de hoje ele em você viuu ? Não postou o PHP no backend. haha brincadeira, abraços!!

[@johnsouza4342]

Loiane, boa tarde, eu criei o cursosService como voce ensina no curso, porem eu nao consigo usar o getCursos() getCursos(){ return ['Java', 'Ext JS', 'Angular']; } e muito menos no cursosComponent constructor(private CursosService: CursosService) { this.nomePortal = 'loiane.training'; //var servico = new CursosService(); this.cursos = this.CursosService.getCursos(); da o seguinte erro: ERROR in C:/Users/john/workspace/curso-angular2/primeiro-projeto/src/app/cursos/cursos.component.ts (20,38): P roperty 'getCursos' does not exist on type 'CursosService'. ERROR in C:/Users/john/workspace/curso-angular2/primeiro-projeto/src/app/cursos/cursos.component.ts (20,38): P roperty 'getCursos' does not exist on type 'CursosService espero resposta.

[@Eti590]

O erro está na hora de tipar a variável. No construtor,faça a seguinte alteração: (private cursosService: CursosService) e tente executar o projeto.

[@gruporsf]

Olá Loiane, tudo bem? Estou fazendo o curso de angular 2 porém me surgiu uma dúvida como faço hospedar meu projeto na web, preciso exportar ele antes, ou é só jogar os arquivos dentro da hospedagem? Parabéns pelo curso Abraços

[@loianegroner]

oi Ricardo, teria que fazer o build de prod com o angular cli, e pegar os arquivos gerados e colocar na hospedagem ou jogar dentro do projeto de backend (php, java, ruby, etc) e fazer o deploy conforme a linguagem. []s

[@gruporsf]

Teria algum video seu que mostra como faz esse build? Obrigado pela resposta e parabéns

[@heikenem]

Nice

[@ivanmeireles156]

Showw...

[@onovaes]

Mulher porreta!

[@thiagoluiz4870]

Não entendi muito bem a diferença de um serivce pra um modulo... mas ja vi que mais pra frente tem uma seria mais específica ;-)

[@rafaelpaulo8859]

[@brenofreitas2915]

poxa não consigo entender quase nada ._. e eu só queria aprender a fazer um aplicativo simples

[@loianegroner]

oi Breno, pra projetos simples talvez a solução não seja Angular. Angular é um framework mais parrudo. Porém recomendo também não desistir. Estude javascript, ecmascript e web components antes de vir pro Angular! :)

[@brenofreitas2915]

Obrigado pelas indicações, vou começar em breve.

[@murilohenriquematias9534]

Use Vuejs cara, ele é tipo um angular só que bem mais simples e direto, e sem aquela caralhada de arquivos e pastas.