- 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