Routing in Angular | How to Implement Routing in Angular | Angular 18 Tutorial In Hindi | part 7

LEARNING PARTNER
39.9K views • June 06, 2024

Angular 18 tutorials in Hindi.
In this Episode we will discuss All basic of Routing. Below topics we are going to explore

What is Single Page Application (SPA)
What is Routing ?
What is Route Object ?
How to Create Routes ?
How to implement navbar for navigation ?
how to redirect from one Component to Other Component
1) from .ts
2) from .html

Angular 18 | Angular 18 tutorials | Angular 17

Complete Tutorial Playlist
https://www.youtube.com/playlist?list=PL7JmcZV0UQtUxsHS8dF3EINHdoIvRS6Ft

To Connect with me & get Notification of Live Session Join
https://chat.whatsapp.com/KFcr0qWZkHnKr1jVvzACyr

Angular Interview Question
https://voidchetan.github.io/interview_question_app_angular_17/home

Learn From me
angularacademy.in

You can find Html Template Code on GitHub
https://github.com/voidChetan

Visit Our Mini Project Ideas Portal where you can find So many project
ideas you can try to implement
https://miniprojectideas.com

Follow & Connect me on LinkedIn
https://www.linkedin.com/in/chetan-jogi-a87148ba

#angular18
#angular17
#angulartutorialforbeginners

0:02 welcome back to learning Partners so
0:05 this is like seventh episode of angular
0:07 tutorial so till now we have completed
0:09 the directives uh component data banding
0:13 and basic things we have completed now
0:16 we are going to see routing so angular
0:19 or react or vuejs so all the
0:22 applications Frameworks like Tech these
0:24 are the different technology which are
0:25 single page application that is SPM Spa
0:29 single
0:30 page application so what do we mean by
0:33 single page application as in we will
0:35 have only a physical one HTML page that
0:38 will be continuously rendering and in
0:40 that HTML page our UI only will get
0:43 changed page will be constant so what do
0:46 we mean by single page application and
0:49 how uh previous applications were there
0:52 so let me just open the W3 School
0:55 website let it load so now you can see
0:58 currently we are in the bootstrap page
1:00 now if I click on JavaScript just pay
1:02 attention over here and over here so
1:04 when I click on the JavaScript page is
1:07 reloading means it another request is
1:10 going to the server and it is calling
1:12 the physical page of JavaScript just
1:15 like that so if I click on again CSS
1:17 again Ser server request will be there
1:20 and again it will the it will call the
1:22 physical page so this is the traditional
1:24 approach how application used to before
1:27 single page application but after single
1:29 page application
1:31 there won't be a server side request
1:33 only all the HTML part will be loaded in
1:35 a single uh in a single request and then
1:38 we will best just create the dynamic UI
1:41 okay so this is the basic like how you
1:43 you should know like how applications
1:45 were before and what is the single page
1:47 application now now so up till now what
1:51 uh again like what we are going to cover
1:52 so I will explain like what is routing
1:55 how what is the route object how to
1:56 create route how to implement nowbar for
1:58 navigation just like on click of that
2:00 particular route should be activated and
2:02 how do we redirect first we will see
2:05 from dots how do we navigate and from
2:07 HTML also these are the things which we
2:09 are going to discuss now so when we
2:13 create the angular project in build we
2:16 have a routing Library also so we
2:19 everyone knows like angular is a single
2:22 page application but to achieve multiple
2:25 page based navigation means from one
2:27 page we can uh we are able to navigate
2:29 to another another page just like w see
2:31 we are able to navigate from one page to
2:33 another by using this nabar so so to
2:36 achieve this kind of behavior we have to
2:38 use routing Library okay so we don't
2:41 need to do install and every anything
2:44 because by default it is available so
2:46 when we create the project we get one
2:48 file that is app route. TS so this is
2:51 now now a constant file but in previous
2:53 version we used to have this as a module
2:55 app routing model. TS was there but now
2:57 it is just a constant file where we can
2:59 create the route so here you can see we
3:01 have an array is already created now
3:04 this is an array so inside this array we
3:06 have to create a route object so object
3:10 enter so now route object we have to
3:14 create so in that route object one
3:17 mandatory field is path so path is
3:19 nothing but URL of your component for
3:22 all the component we are going to create
3:24 the routes means the component which we
3:27 want to access by using routes those
3:29 component route should be created so how
3:32 many components we have created so let's
3:34 say add employee so now add EMP this is
3:38 the route name I'm giving then if in my
3:41 URL we have ADD hypen EMP which
3:43 component we have to render so we have
3:45 to specify component now here we have to
3:48 specify the component name so add
3:51 employee so here you can see it is
3:53 suggesting once you click on it import
3:55 will be automatically added so we have
3:57 to provide the class name of that
3:58 component so this is my route okay so
4:02 this is my route basic okay so again
4:06 this is an routes array so this is one
4:08 route then second route again we can
4:11 create path empty then second route so
4:15 let's say data binding hyph binding and
4:19 on this route which component we have to
4:21 open so data binding so data binding so
4:24 you can see it is suggesting you just
4:26 click on enter it will add the UT
4:28 statement as well
4:30 let's create the remaining also then we
4:33 have employee list so again path
4:38 colon EMP list component employee list
4:45 let's create directives also again
4:51 path
4:54 structural
4:57 D component
5:00 structural directive
5:03 sorry just like that we will create for
5:05 attribute also so these are the
5:06 components we have created till
5:13 now it's not like mandatory that you
5:16 should give a hypon it's your name
5:19 whatever the name you think which is
5:21 descriptive you can give it let's make
5:23 it
5:26 attribute Capital small hyphen anything
5:29 you can use
5:30 component will be
5:33 attribute like this okay so these are
5:36 the routes we have created this is
5:38 nothing but route object route object
5:40 consist of so many things but these are
5:42 the two mandatory things if we add comma
5:45 and see these are the various properties
5:48 we have in the route object okay again
5:51 we are going to discuss this in detail
5:53 but in this video I'm just sking it to
5:54 basic like uh title is there can
5:57 activate data children
6:00 load component Outlet so many things are
6:02 there providers redirect so many things
6:04 are there but in this episode we are
6:06 just going to focus on the basic
6:10 thing right so we have created our
6:12 routes now after creating the routes
6:15 next thing is as our app component is
6:18 our parent
6:19 component right so here instead of
6:23 adding
6:24 individual uh selector of the component
6:27 now we will add our nowbar over so in
6:30 index.html we have already added the
6:33 link for the bootstrap so if you have
6:35 not add that just add it over here
6:37 because I have not informed like how do
6:39 we install the B till then we are going
6:41 to use the CDN link now in app component
6:44 app component is our parent component so
6:45 this this will be uh always be there in
6:49 the Dom so let's use the bootstrap
6:51 nowbar let's go to bootstrap M
6:55 5 let's use the
6:58 nowar let's use
7:05 this I'm just using this you can just
7:08 copy the code
7:10 also copy the nowar I'm keeping it over
7:14 here okay after now bar let's add the
7:19 container
7:23 du and in container we need router
7:26 Outlet so router Outlet is a directive
7:30 which is responsible to render activated
7:33 route component this is the simplest
7:36 definition again I'm repeating router
7:38 Outlet is a directive which is
7:40 responsible to render activated route
7:43 component means out of this route
7:45 whatever the route is active that
7:47 component will be loaded over here in
7:49 this router Outlet okay now let's save
7:54 and check if we are able to see the
7:56 nowar so you can see nowar is visible
7:59 after now
8:00 bar here are the links so here we have
8:03 to add the links whatever the routes we
8:05 have created so let's say over here
8:08 employee
8:10 list now employee list so we have
8:13 created this route for the employee list
8:14 our route name is this so let's copy
8:17 this now this will go over here so in
8:20 traditional application to Navigate to
8:22 navigate we used to use hre but in
8:24 angular instead of hre we have to use
8:27 router link
8:31 is equal to double quote and slash you
8:33 have to Pro it but from angular 17 all
8:36 components are stand alone so whatever
8:39 you use right you need to import that so
8:42 you have to go to the dots just like
8:44 that you can see router link is there
8:46 let's remove this import statement we
8:48 don't need the component import now just
8:50 like router Outlet you need to import
8:52 router link as well then only you can
8:54 use it router
8:56 link just like this let's copy
9:01 paste employee list
9:04 add
9:06 employee
9:11 then structural directive let's
9:15 copy and another one is
9:21 attribute attribute directory and here
9:24 we just have to provide the individual
9:25 route name this is ADM we'll go on ad
9:28 EMP over
9:30 here then employee list we have already
9:32 added structural
9:38 directive and attribute
9:42 directory like this so let's save and
9:45 check if we are able to navigate
9:47 particular
9:49 route so if we click on employee list
9:52 see hello from admin is coming if we
9:54 click on ADD employee add employee is
9:56 coming if we click on structural see
9:59 navigation is also getting changed and
10:01 that component is getting rendered but
10:03 if you see over here page is not
10:05 reloading see page is
10:08 constant got it why on structural
10:12 attribute same component is
10:20 there let's save
10:24 again something is not working on
10:26 attribute URL is not getting changed why
10:29 is it
10:31 attribute
10:32 directive this will go over here okay
10:35 some spelling mistake was there so now
10:37 if I click on attribute you can see
10:39 attribute direct to page is visible so
10:40 earlier what we used to do we used to in
10:42 app component we used to render
10:43 particular particular component but now
10:46 we have created routing we have
10:48 implemented routing so we are with the
10:49 help of nowar we are able to navigate
10:51 from one component to another got it so
10:54 this is the basic of routing so till now
10:57 we have covered what is routing route
10:58 object routes also we have created now
11:02 na also we have created now the
11:04 remaining thing is redirection so from
11:06 if we have to redirect from one
11:08 component to another so from HTML is
11:10 very easy by using this router link you
11:13 can navigate from one component to
11:14 another let's Implement that so let's
11:17 say
11:19 from
11:22 attribute here I will add a
11:25 button class BN BN
11:33 go
11:35 to
11:39 structural now what I need to do from
11:41 attribute directive if I click on this
11:43 button I need to navigate back to the
11:45 structural directory so over here also I
11:47 can use router link like this okay let's
11:51 remove this but again if we have to use
11:54 the router link we have to implement
11:56 over here router link
12:00 just like this so either you can do like
12:03 this property binding or directly like
12:05 this also both is possible either like
12:07 this or like this and here you need to
12:09 specify the route so let's get the route
12:12 of structural so this is my structural
12:14 route let's put it over
12:17 here so let's save from attribute now we
12:20 are trying to navigate to the structural
12:22 so see currently we are in the attribute
12:23 director if we click on over here see we
12:26 are successfully navigated to the
12:27 structural directory this is by using
12:30 HTML from HTML now if we have to
12:33 navigate froms means from any function
12:35 or something so now let's copy this
12:39 button now from structural we will try
12:43 to navigate back to the attribute but
12:45 instead of this we can navigate from a
12:48 function go to
12:51 attribute now on click of it we will
12:53 navigate so let's write a click
12:56 event navigate to
13:01 attribute let's create this
13:07 function so now on this button click
13:09 from function we are going to navigate
13:11 means from
13:13 TS now from dots we have to navigate so
13:16 we have to create an instance of router
13:19 service okay so now here comes the extra
13:22 part that is how do we create the object
13:25 of injectable services so there are two
13:27 ways first is like using construct
13:29 constuctor so in Constructor you can
13:31 write
13:32 private
13:36 router it will be object of
13:39 router okay so this is called dependency
13:42 injection like this is the injectable
13:44 service so once we create the object of
13:46 this class we are going to need the
13:48 object of router also so this is like
13:50 dependency injection it's a design
13:53 pattern but don't go in deep just for
13:55 now remember like this is dependence
13:57 injection in coming videos we will
13:59 discussing on that but just for now we
14:00 need the router object that's why I'm
14:02 explaining so
14:04 now this. router object which we have
14:08 created dot navigate by
14:10 URL and we need to pass the URL and
14:14 structural we are in the structural so
14:16 we have to navigate back to the
14:17 attribute so let's get the attribute
14:19 path so this is our path and we have to
14:21 paste it over here so from TS we are
14:25 going to navigate so if we have to
14:27 navigate from one component to another
14:29 from TS we have to make use of this
14:31 method and this method will come from
14:33 router service so let's see now if we
14:36 are able to navigate So currently we are
14:37 in the
14:38 structural but it is not saved
14:41 button so now if we click over here see
14:44 we are able to navigate so from
14:46 attribute we have navigated from HTML
14:49 but from structural we have navigated
14:51 from function so this is what we do the
14:55 navigation this is uh from Dot PS by
14:59 using router service and from HTML by
15:02 using router link router link you can
15:04 write like this also this is like uh
15:06 what we can say property binding and
15:09 normally router link also you can use
15:11 but if you have to use the router Link
15:12 in component.ts import you need to
15:14 import the
15:15 router okay so this is everything what I
15:18 need to explain in routing if you are
15:20 new to the to my Channel please do like
15:23 and subscribe that's it with the current
15:25 video