Coding

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