Provide an Angular Service on a route!

[@ahmedlight7669]

Deborah ! You are sharing wonderful concepts ❤

[@deborah_kurata]

Thank you so much!

[@winnemucca-sk5392]

Thank you. I have played with this concept and even used it. I appreciate your efforts to explain routing services compared to components and root.

[@deborah_kurata]

It's been a good reminder for me as well, evaluating how each of the different cases work. 😊

[@LinkingTheWorlds]

Thank you so much Deborah, the clarity of your tutorials is pure pleasure.

[@deborah_kurata]

Thank you so much!

[@leonidesmuguercia4211]

Excelente video. Like always!!

[@deborah_kurata]

Thank you! 😊

[@ivanmaglica264]

I've done that mistake, provided service from multiple points and then cursed when I saw two service instances. Learned my mistake...

[@deborah_kurata]

Yep! Me too. 😅

[@karthikeyanpandian1330]

Good knowledge sharing video and am a great fan of you since your Angular 2 course in Plural Sight 🙂 I have a question on this video: Services provided in the providers array of a route are instantiated when the route is activated. These services are scoped to the route and its child routes. When the route is deactivated (e.g., when navigating away from the route), the services are destroyed. How come it maintains the state of the service after you toggled back to the Home route? How come the life time of the service instance is the lifetime of the application after its initialized.

[@radthenone]

Deborah you are awesome

[@deborah_kurata]

Thank you! All the best to you!

[@julienr8114]

As always clear and understanding thank you so much. I have a little question, for route injection there is the same number of instances as defined in providers ? for example [ { path: 'vehicules-route-1', component: VehiculeComonent, providers; [VehiculeService] }, { path: 'vehicules-route-2', component: VehiculeComonent, providers; [VehiculeService] } ] then there 2 instances (each one with a state) of VehiculeService ? one for route vehicules-route-1 and a second for vehicules-route-2 ?

[@deborah_kurata]

Thank you for the kind words. Yes, each provider defines another instance. I forked the sample application and changed it to this scenario. (It isn't pretty, but it demonstrates the concept). If you open the console, you can see that each page loads it's own copy of the vehicle data. Then each separately retains its own "selectedVehicle". Here is the link: stackblitz.com/~/edit/providing-services-multiple-route-deborahk Did I correctly understand your scenario?

[@julienr8114]

@@deborah_kurata Yes, you completely answered my question, thank you very much for taking the time to answer. This is a really great feature.

[@jonatabiondiJsLover]

Super. Please more video on Di. it is a very long and important topic

[@deborah_kurata]

Thank you! Are there any specific things about DI that you are interested in seeing?

[@Danshif]

Hi, great video, can you share a real-world example of when it’s better to use provideIn: 'route' instead of provideIn: 'root'?

[@codeSurvivor]

When you need two different instances of the same service for different routes. For example, one route for flying vehicles and another one for landing vehicles.

[@deborah_kurata]

Thank you! In addition to the example provided by codeSurvivor ... (here is a detailed example of that: medium.com/@yousafrazaravian/angular-route-level-providers-a-comprehensive-guide-094b6a247557) Say you have a route specifically for administrators and they have some specialized services. By defining those services on the route accessible only to administrators, you minimize the possibility of those services accidentally being injected into any other part of the codebase. In general, it can help keep responsibilities separated. A developer on the team needs to add a set of features/routes around StarWars films (separate from vehicles). To minimize changes, the first thought it to throw the code for those features in the Vehicle Service. But the Vehicle service is only injectable on the vehicles route. So they instead must create a Films Service thus keeping the code a bit better organized. But keep in mind, that there is no issue with using provided in 'root' for the majority of your services.

[@antondoit]

Fantastic

[@deborah_kurata]

Thanks! 😊

[@richarddefortune1329]

Hey Deborah, great video (as usually). I knew for "root" and "component". Is providing services in route a new angular feature? I'm struggling to see its usefulness if we can also provide in component, which will make the service available to the child components. I'm sure the angular team has a good reason for allowing both techniques. Thank you again.

[@deborah_kurata]

Thank you for the kind words. I *think* that provided in route was a new feature in Angular v14?? If you need different "versions" of the service for different purposes. (here is a detailed example of that: medium.com/@yousafrazaravian/angular-route-level-providers-a-comprehensive-guide-094b6a247557) Or, say you have a route specifically for administrators and they have some specialized services. By defining those services on the route accessible only to administrators, you minimize the possibility of those services accidentally being injected into any other part of the codebase. In general, it can help keep responsibilities separated. A developer on the team needs to add a set of features/routes around StarWars films (separate from vehicles). To minimize changes, the first thought it to throw the code for those features in the Vehicle Service. But the Vehicle service is only injectable on the vehicles route. So they instead must create a Films Service thus keeping the code a bit better organized. But keep in mind, that there is no issue with using provided in 'root' for the majority of your services. 😊 EDIT: I added this information to the video notes for future reference.

[@richarddefortune1329]

@deborah_kurata thanks so much for the explanation. I feel special for the "personalized tutorial" 😇 I suppose the next logical step will be a video on new routes. It looks like they are no longer just simple json. You can use methods (matcher???). Maybe that's another use case of injecting a service in routes then use it there. I don't remember where I saw that. Thank you again for the video

[@deborah_kurata]

@@richarddefortune1329 Are you referring to this: angular.dev/guide/routing/routing-with-urlmatcher#configure-your-routes-for-your-application

[@richarddefortune1329]

@@deborah_kurata yes. That's the one.

[@rkrao8582]

Hey , Thanks for the videos on Angular and Signals. I am a subscriber to your Pluralsight course which is really good. Although it seems most of your content retired there! Do you plan on creating more updated courses? Thanks

[@deborah_kurata]

Thank you for watching! Pluralsight won't allow me to update "Angular: Getting Started" because they say they already have an "Angular Fundamentals" course. Most of my courses that have been retired have been replaced with other courses by other authors. I can provide you the link to the newer course if you let me know which topic you are interested in. At this time, I have no contract with Pluralsight for more courses.

[@Ghost2012qte]

How can I make a service lazy-loaded if I use standalone components instead of modules? Will using loadComponent and providing the service in the route achieve this?

[@deborah_kurata]

I have a video on that here: kzbin.info/www/bejne/jKu8g3mCo9Otoac

[@radthenone]

i liked signals but i must to use rxrj still

[@deborah_kurata]

Can you use rxJS *with* signals? That's how rxResource works...

[@ruekkart]

Is this like provide a service in a module and share it across all components in that module?

[@deborah_kurata]

Yes. But it's been a while since I've worked with modules. I don't recall the lifetime of services provided in a module. I assume they were also for the lifetime of the application.

[@gestoeber]

what happens if two routes provide the same service? Does every route get a new instance?

[@deborah_kurata]

Yep! I have an example of that here: stackblitz.com/~/edit/providing-services-multiple-route-deborahk

[@glazevolda823]

Could you tell me please, is there any way to destroy VehicleService (clear it from the memory) after the user leaves the Vehicle page?

[@deborah_kurata]

Yes! Provide the service on the component instead of on the route. Then the service will be destroyed when the user leaves the page. See this video for more information: kzbin.info/www/bejne/gWGUoHepjLd2e7M

[@glazevolda823]

@ , great! 🤩 Thank you so much ❤️

[@BoZoM242]

What happens if a route is lazy loaded? Does it behave the same?

[@deborah_kurata]

It should, yes. The only difference would be when the *code* is loaded.

[@MiguelAngelMartinezJerez]

👋👋

[@deborah_kurata]

🙏🏼🙏🏼😊

[@sidvlogs3107]

❤

[@deborah_kurata]

🙏🏼