No video :(

Multiple Router Outlet | Nested routes | Angular Project Layout | Angular 16

Подписаться 2,9 тыс.

Просмотров 6 тыс.

50% 1

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/sai...
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

Опубликовано:

26 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 36

@dheerajsharma-of8xs 17 дней назад

Searching for nested routes and got the most clearified explanation so far 😊

@techshareskk 17 дней назад

Thank you 🤩

@saqibghouse 5 месяцев назад

Thankyou it worked. I am on angular 17 some syntax change. But thankyou very much for your help for explaining in detail

@techshareskk 5 месяцев назад

✌️🎉 Thank you 🤩

@marypaul9627 Месяц назад

Amazing, I had to subscribe

@techshareskk Месяц назад

That’s awesome 🤩

@phongnguyenthe9583 Год назад

Thanks for your tutorial, it was so clear and easy to understand. Exciting to see your upcoming video!

@techshareskk Год назад

Thank you and you can expect more and more videos soon ✌️

@saddammd Год назад

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...

@techshareskk Год назад

Thanks for doing this and if it is useful you can share with your technical friends that helps me to spread my technical stuff 🎉✌️

@bazithmohammed513 6 месяцев назад

Thank you very much for this excellent tutorial.

@techshareskk 6 месяцев назад

Thank you 🤩

@GourisankarYanamalachinthala 4 месяца назад

Good video. But, why did you create a module for every component? Can't we maintain all the routes in app-routing.module.ts?

@techshareskk 4 месяца назад

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.

@arjunsinghpowersoft 7 месяцев назад

for each page why separate module? module which is something to group the pages based on features/functionality/area

@techshareskk 7 месяцев назад

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.

@Nemesis_74 5 месяцев назад

Elegant explanation❤

@techshareskk 5 месяцев назад

Thank you 🤩

@mohamedzaki4332 Год назад

✌Man You Were Very Helpful , V. Good Stuff Thanks Alot

@techshareskk Год назад

Thank you 🙏

@user-rd1xe3gq5l 11 месяцев назад

Thanks

@NLSAINI-he5gg Год назад

Super bro..........

@techshareskk Год назад

Thank you NLSAINI 🙏

@akshatmathur6371 Год назад

How to do the same thing using standalone approach?

@techshareskk Год назад

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. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9iA9DPtL4Ko.html

@maheshOffVlogs Год назад

super explanaton, very helpful.

@techshareskk Год назад

Thank you Mahesh ✌️

@sidakgujral2768 10 месяцев назад

Man u are doing great but please slow down the pace a little bit otherwise all awesome

@techshareskk 10 месяцев назад

Noted

@LarsRyeJeppesen Год назад

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

@techshareskk Год назад

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.

@user-shwan 10 месяцев назад

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'); } }); } }

@techshareskk 10 месяцев назад

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 🙏

@techshareskk 10 месяцев назад

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

@user-shwan 10 месяцев назад

@@techshareskk, very convincing answer! I totally agree. Thankyou so much for the long answer. Much appreciated :)

@user-shwan 10 месяцев назад

@@techshareskk, that's right! That's going to be an extra one to manage. Thank you so much for explaining.