Multiple Router Outlet | Nested routes | Angular Project Layout | Angular 16
HTML-код
- Опубликовано: 29 май 2023
- In this video you will learn
1. Advanced routes in angular
2. How nested routes works in angular 16
3. How to create a nested routes layout in angular 16
4. How to navigate and create multiple router outlets in angular 16
5. How to configure and use multiple router outlets.
6. How to work with nested routes and how to use loadchildren and children properties in angular.
Github
github.com/saikorthivada/angu...
For angular 16 Features and migration, Please check the below
• Angular 16 features wi...
For Angular 15 features, Please check the below
• Angular 15 features | ...
Angular Standalone components | Ways of using standalone components | Angular 15 | Stable release
• Angular Standalone com...
For Angular 12 features, Please check the below playlist
• Angular 12 Features
Basic Software concepts
• Playlist
For Angular Unit Testing, Please check the below playlist
• Angular Unit Testing
To know how to test basic patch value in angular watch below video
• Angular Unit testing- ...
Medium:
/ techshare-skk
Address management Angular Tutorials
Part 1 - • Reactive Form - 17 | A...
Part2 - • Reactive Form - 18 | A...
Part 3 - • Reactive Form - 19 | A...
Part 4 - • Reactive Form - 20 | A...
Part 5 - • Reactive Form - 21 | A...
Part 6 - • Reactive Form - 22 | A...
Part 7 - • Reactive Form - 23 | A...
Mandatory to watch before watching unit testing for better understanding:
(Reactive Forms Part 16 | Form Arrays removeAt method | Dynamically remove control from form array)
• Reactive Forms Part 16...
Recommend you to watch my previous videos for more information and the context.
For testing form control without any validation watch below:
• Angular Unit testing- ...
For testing, Template driven forms
• Angular Unit testing- ...
For template and template context
• Angular Unit testing- ...
For Attribute Binding testing:
• Angular Unit testing- ...
For Testing style bindings:
• Angular Unit testing- ...
For Testing class binding
• Angular Unit testing- ...
For Testing property binding
• Angular Unit testing- ...
For interpolation unit testing
• Angular Unit testing- ...
Different Types of Data binding
• Angular Data Binding |...
Interpolation in angular
• Angular Unit testing- ...
For Component introduction check the below link
• What are Angular compo...
Angular Installation and setup
• How to Configure Angul...
For ng serve mechanisum and internal flow of angular follow the link below
• Angular internal work ...
Angular Modules
• Angular Modules | What...
Angular Tutorial playlist:
• Angular Tutorials
Medium:
/ techshare-skk
For Angular 12 features, Please check the below playlist
• Angular 12 Features
Basic Software concepts
• Playlist
For Angular Unit Testing, Please check the below playlist
• Angular Unit Testing
Instagram:
/ tech.share.skk
#angular16 #angular #angularrouting #nestedroutes #latestversion #angularupdates #updates #trending 
Наука
Amazing, I had to subscribe
That’s awesome 🤩
Thankyou it worked. I am on angular 17 some syntax change. But thankyou very much for your help for explaining in detail
✌️🎉 Thank you 🤩
Thanks for your tutorial, it was so clear and easy to understand. Exciting to see your upcoming video!
Thank you and you can expect more and more videos soon ✌️
Thank you very much for this excellent tutorial.
Thank you 🤩
Wow... I learnt so many advanced concepts in just one video. Thanks a lot.... but I am sorry I can't do more than liking and subscribing to your channel...
Thanks for doing this and if it is useful you can share with your technical friends that helps me to spread my technical stuff 🎉✌️
Thanks
super explanaton, very helpful.
Thank you Mahesh ✌️
✌Man You Were Very Helpful , V. Good Stuff Thanks Alot
Thank you 🙏
Elegant explanation❤
Thank you 🤩
Super bro..........
Thank you NLSAINI 🙏
for each page why separate module? module which is something to group the pages based on features/functionality/area
Here we can make each page as module and we can use them. Example - i have a module like login which i can use it as seperate module and can make that as lazy loading
Same way we can manage for all the routes
Advantage is until i move onto specific page the code will not be loaded into the browser which makes down the initial load time or intermediate load time.
Good video. But, why did you create a module for every component? Can't we maintain all the routes in app-routing.module.ts?
If you are not creating each module for each page or each route component you will not be able to do lazy loading…
If you do not do lazy loading all the components will be loaded with single chunk and the size will be too big …
If size is too big it may take time lo load your UI
Lazy loading helps not to load unwanted components or unused components.
How to do the same thing using standalone approach?
Can you check this for nested. I think i dint make this for multiple routes. I will make a note and will do that as well.
ruclips.net/video/9iA9DPtL4Ko/видео.html
Good stuff, however a few questions: how come you are using a module based app to showcase Ng16 router? Why not component/standalone based? How come you are not using the inject() function instead of injecting dependencies in the constructor? Should your router definition not be functional and use provideRouter() to configure? What about loadComponent() to lazy load components? NG16 brings so many cool improvements to the table that it's strange to see you not use any of them
Thats good question, actually speaking im covering both type of cases wherever it is required. you can see my previous videos i already explained about loadComponent, I spoke about inject and also i spoke about standalone. My agenda is to share my knowledge in all the aspects which should help legacy applications and newer applications. Coming to inject will discuss more once i start series or playlist on services and injectables. FYI.
Thanks for asking. Many people may have same questions and this may give my ideology to them as well.
Man u are doing great but please slow down the pace a little bit otherwise all awesome
Noted
Thank you for sharing! It was really helpful :) I have a done something different in the past and would love to see your opinion to see which approach you would prefer for an enterprise application please? Thank you!
export class AppComponent {
isDashboardRouteActive = false;
isAdminRouteActive = false;
constructor(private router: Router) {
router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.isDashboardRouteActive = event.url.includes('dashboard');
this.isAdminRouteActive = event.url.includes('admin');
}
});
}
}
This approach works but not much useful
Instead create lay outing one for dashboard and one for admin and use multiple router outlets.
Problems in the above code
1. For each navigation the subscription logic executes. As you mentioned your application is enterprise application you may have many many URLs in your application that calls the subscription logic hundreds of time and execute your if condition always when there is change in variable.
2. In future if some or the developers use admin/dashboard even then also your isDashboardRouteActive will become true hence all your dev folks should aware not to use dashboard keyword anywhere in the URLs. That means you are restricting not to use this at all
3. If you get some other requirement to have some other routes something like user role and the. You have to add one more condition it would be hard to manage all such rules in the future
Better to avoid this
This is my opinion. If you really means to you. Try the multiple router concept and manage your routing configuration
Thank you 🙏
Event in future you may have two different footers then again you have to manage that too on conditional basis
This is one more problem
@@techshareskk, very convincing answer! I totally agree. Thankyou so much for the long answer. Much appreciated :)
@@techshareskk, that's right! That's going to be an extra one to manage. Thank you so much for explaining.