ROUTING – Angular 2.0 Final – Getting Started

00:00:01 in our nice little application we're now
00:00:03 able to add items to the collection to
00:00:06 remove them but now it would be nice to
00:00:09 have this on two separate pages instead
00:00:11 of one so we need routing we need the
00:00:14 angler to router nothing easier than
00:00:16 that let's start working on that the
00:00:18 anglican framework ships with its own
00:00:21 router so setting up routing is really
00:00:24 easy we don't need to pull in an extra
00:00:26 package or anything like this we already
00:00:29 have components and these components
00:00:31 will serve as pages using the router so
00:00:35 the missing piece is to add the router
00:00:37 and to add a header so that we got a way
00:00:40 to actually navigate and click some
00:00:41 links let's start by creating the header
00:00:44 so I will simply generate a new
00:00:48 component ng GZ and I want you to join
00:00:51 rated in the app folder I don't want to
00:00:54 create a new sub folder for this I could
00:00:56 add a 2d shared folder but here I will
00:00:59 simply add it to the root folder just to
00:01:01 show this as well I'll name it header
00:01:04 and now I'll add es or is to may use
00:01:09 inline styles I'll also add spec false
00:01:14 you saw that before and now I'll also
00:01:16 add minus minus flat which means don't
00:01:19 create a subfolder for it place it
00:01:21 directly in the folder so this command
00:01:25 will now give me these two new files the
00:01:28 header here now I don't need to do
00:01:31 anything in the typescript file you
00:01:32 could remove the constructor and the on
00:01:35 init method since we don't need that
00:01:37 here but you could also leave it here
00:01:39 but of course I want to work in the HTML
00:01:42 file in the template here I'll add a row
00:01:45 and then again some columns or a column
00:01:48 the bootstrap grid and then here I'll
00:01:51 add an unordered list with the class nav
00:01:53 and the class nav pills
00:01:55 this is SEM bootstrap code again to
00:01:58 create a nice navigation with some well
00:02:00 this pills look you will see it in
00:02:02 action soon in this list I want to have
00:02:06 2l eyes which hold a link created like
00:02:09 this with the Emmet plug-in and the
00:02:12 first one should say collection the
00:02:15 second one should say market I'm going
00:02:17 to hook up these links soon with this I
00:02:21 got my links set up but of course this
00:02:25 header is not really used right now so
00:02:28 to use it I also need to add it here in
00:02:31 the app module in the declarations array
00:02:33 also add the import and then in my app
00:02:36 component HTML file I want to add my
00:02:39 header here so I will add my app header
00:02:44 at the top like this and then let's say
00:02:47 a horizontal line with this in place if
00:02:50 we let this reload we should see the
00:02:52 header nice like this of course nothing
00:02:55 is highlighted right now and these links
00:02:57 also who don't work I'll work on this
00:02:59 next to make it work to make these links
00:03:03 work I first need a router with some
00:03:06 routes to which I can actually navigate
00:03:08 to create this I'll go to my app folder
00:03:11 and create a new file there I'll name it
00:03:14 name it apt or routing dot TS to
00:03:17 indicate that this file holds my routing
00:03:19 related logic now no worries setting up
00:03:22 routing is really easy you first need to
00:03:26 configure which routes you want to have
00:03:28 and configuring this is simply an array
00:03:31 with some objects where each object
00:03:33 represents a route so I'll create a new
00:03:36 constant here which I'll name a Prout's
00:03:39 for example name is up to you and this
00:03:42 will be of type routes now routes has to
00:03:45 be imported from at angular router so
00:03:48 add this import and then as I mentioned
00:03:51 it is an array of JavaScript object each
00:03:54 object here has a path property and path
00:03:59 now means the part in the URL so what
00:04:02 comes after this last year for example
00:04:04 it user would be a path here or market
00:04:08 would be a path you don't add to slash
00:04:11 though so here the first path I want to
00:04:15 have is the collection path in this case
00:04:19 I want to load my collection component
00:04:24 make sure to also add this import app
00:04:27 here
00:04:28 this will later on tell the router
00:04:29 whenever we visit our domain /
00:04:33 collection load this collection
00:04:35 component I'll duplicate it because I
00:04:38 also want to have over market route /
00:04:41 market in this case I want to load

00:04:44 market component also add this import so
00:04:48 we get collection market there's one
00:04:50 important route missing have a look at
00:04:53 our application where are we right now
00:04:55 you could imagine an empty string after
00:04:57 slash here we also need to cover this
00:05:00 route so I'll duplicate this one more
00:05:03 time and remove it so now path is just
00:05:07 an empty string which means yet this
00:05:09 route route where we are at the
00:05:12 beginning in this case I don't want to
00:05:14 load a separate component I don't have
00:05:17 one
00:05:18 I want to navigate to the collection
00:05:20 let's say so I can set this route up to
00:05:23 redirect myself here I therefore add
00:05:26 redirect to property known by Engla – of
00:05:30 course and then I want to navigate to
00:05:33 slash collection now here I need to
00:05:35 slash because this means it's an
00:05:38 absolute route append slash collection
00:05:41 after the domain if I would just have
00:05:44 collection this would be a relative
00:05:47 route which means appended to the
00:05:48 current path which could be localhost /
00:05:51 user and then collection now I don't
00:05:54 want that here I simply want to go to
00:05:57 the absolute collection route the second
00:06:00 one here I need to add one other
00:06:02 property path match full what this does
00:06:07 is it tells me that you only execute
00:06:11 this route only redirect myself in this
00:06:14 case if the complete path is empty if I
00:06:18 would not have this property here this
00:06:21 route would always be fired even if we
00:06:23 have slash market because you can think
00:06:26 of there is always an empty string
00:06:28 between the slash and D path so to avoid
00:06:32 this behavior we set paths match full
00:06:34 which means only if there is nothing
00:06:36 else then use this route so then we
00:06:39 would get redirected with
00:06:41 that we configured our routes now we
00:06:43 have to register them with the angular 2
00:06:46 router to do so we call router module
00:06:50 and you have to import that from add
00:06:53 angular slash router and then for root
00:06:58 which means register these routes as
00:07:00 route routes in the application known to
00:07:04 the whole application which of course is
00:07:06 important and here I pass as an argument
00:07:10 my routes now that alone won't do the
00:07:14 trick routing still would not work I
00:07:16 have to export a constant let's name it
00:07:19 routing which holds this configured
00:07:22 router module because this configured
00:07:25 router module now stored in the routing
00:07:27 constant has to be added to my app
00:07:30 module here in the imports array this is
00:07:34 where I add any module and router module
00:07:37 is such a module it's a built-in one now
00:07:40 configure with our routes but we have to
00:07:42 add it here by default angular 2 doesn't
00:07:45 add all built-in modules which is great
00:07:48 because if we don't need them this would
00:07:50 simply hit our performance and why do
00:07:53 that if we don't use it so here I'll add
00:07:57 routing and of course you need to add
00:07:59 the import from dot slash app dot
00:08:02 routing so this routing file this now
00:08:05 adds the configured routing module with
00:08:08 this we got routing in place now to see
00:08:10 it in action we have one missing but
00:08:13 important piece we need to tell the
00:08:16 angler to router where to render this
00:08:18 component or these components we tell it
00:08:21 to rendered collection component if we
00:08:23 visit slash collection and the market
00:08:26 component if we wizard slash market but
00:08:28 where should it render them thankfully
00:08:31 it's not by default overwriting our
00:08:33 complete HTML code instead we have to
00:08:36 give it a hook where to render this so
00:08:39 here I'll remove these selectors of my
00:08:42 components and instead set up this hook
00:08:44 the directive we have to use for this is
00:08:47 router outlet a built in directive
00:08:50 telling angular 2 this is the place
00:08:52 where you should render
00:08:54 components or the components who are
00:08:56 routing to with this if I let this
00:08:59 application reload we should already see
00:09:02 this in action it's loading collection
00:09:05 by default since we set up this
00:09:06 redirection and I can also go to market
00:09:09 cool the missing piece of course are the
00:09:12 two links in the header which don't work
00:09:14 right now so let's make them work to
00:09:18 connect our links here we need to
00:09:21 replace this ref attribute with router

00:09:24 link this is a built-in directive
00:09:27 English to ships with these square
00:09:29 brackets you see here indicate property
00:09:32 binding which is another form of data
00:09:34 binding angular 2 offers property
00:09:36 binding basically means you bind to a
00:09:39 property in this case to a property of a
00:09:42 directive directive and property here
00:09:44 have the same name the directive is
00:09:46 named router link and the property is
00:09:48 also named Roger link which is why
00:09:50 English you allows you to use both in
00:09:52 one assignment or one statement but with
00:09:55 these square brackets
00:09:56 we're basically passing some data into
00:09:59 this directive the data I want to pass
00:10:02 is an array this is how you set up
00:10:05 navigation in English you in this array
00:10:08 each element stands for one segment in
00:10:11 your path in the URL so if you have
00:10:13 longer path let's say slash user some ID
00:10:16 side and then slash detail then you
00:10:19 would have three segments user ID detail
00:10:22 now here we're only going to have one
00:10:24 segment the collection like this now you
00:10:28 can use a relative path like I do here
00:10:31 also with dot slash for example or an
00:10:35 absolute one with a leading slash this
00:10:38 one will always navigate to your domain
00:10:41 slash collection whereas this will
00:10:44 always append collection to the end of
00:10:46 the current path so if you're on slash
00:10:49 market and then visit collection without
00:10:52 a leading slash you would be redirected
00:10:54 to slash market slash collection
00:10:56 probably not what you want therefore
00:10:58 I'll add a leading slash to make this
00:11:00 absolute time to also set up the router
00:11:03 link for the market link here here I'll
00:11:07 also pass
00:11:07 arrey and navigate to the slash market
00:11:10 with this setup let's reload this
00:11:13 application and see if this works great
00:11:17 of course it would be nice to see which
00:11:20 navigation item currently is active so
00:11:23 to finish this application let's add
00:11:26 this functionality to add such a style
00:11:29 with normal CSS we could add a class to
00:11:33 the list item a CSS class of active
00:11:36 which is a class provided by bootstrap
00:11:38 and by adding a to the list item once
00:11:41 this reloads bootstrap will highlight
00:11:43 this is active of course this now stays
00:11:46 active even if I navigate away because I
00:11:48 hard-coded it into my header it would be
00:11:51 nice if we could conditionally attach
00:11:53 this CSS class to the list item only if
00:11:58 the nested link is active turns out we
00:12:01 can do that with angular 2 and it isn't
00:12:03 that difficult all we have to do is we
00:12:06 have to add the router link active
00:12:08 directive and here between the quotation
00:12:10 marks we pass active the name of the CSS
00:12:14 class we want to attach the cool thing
00:12:18 is angler to the router link directive
00:12:21 here automatically finds the router link
00:12:25 active directive belonging to it or
00:12:28 property belonging to it and is able to
00:12:32 work with it and use the CSS class we
00:12:35 specify here to attach it to our list
00:12:38 item do you now see my point of Anglet
00:12:41 you making many things very simple once
00:12:43 you master the initial well starting
00:12:46 phase this is one of the examples with
00:12:50 router link active let's also add it to
00:12:52 the other link we can now style these
00:12:56 links conditionally imagine how much
00:12:58 work that would have been with jQuery
00:13:00 and this is how easy it is now with
00:13:02 angular 2 and now you can see it
00:13:05 correctly switches I can items to the
00:13:08 collection add items to the collection
00:13:10 remove them from the collection add them
00:13:13 again and so on so this is our working
00:13:17 angular 2 application we bolt here with
00:13:21 a lot of
00:13:21 core features angle to offers covered I
00:13:25 hope you enjoyed it
00:13:26 I'll not be happy to see you in future
00:13:28 videos bye

You may also like