- 00:00:03 back we are in the last video we
- 00:00:05 basically did some tidying up added some
- 00:00:08 nice styling and edit our two-way
- 00:00:10 binding to all our fields in our
- 00:00:13 contacts now in this video I will dive
- 00:00:16 into a new topic I will talk about
- 00:00:19 routing in and I'll show you how routing
- 00:00:22 works we'll start with a basic routing
- 00:00:25 example in this video but we will get
- 00:00:28 more complex ones and sub routing in
- 00:00:30 future videos let's dive right into this
- 00:00:34 to get started I obviously first need a
- 00:00:39 second route at the moment I only have
- 00:00:40 one page here now I want to create a
- 00:00:43 like a little header here where we get
- 00:00:46 the possibility to either have our
- 00:00:48 contact list here where we link and
- 00:00:50 click on our contacts or go to a create
- 00:00:53 new contacts ID we will not actually
- 00:00:55 implement the create new contact method
- 00:00:59 or functionality in this video we will
- 00:01:02 do so in a future video don't worry but
- 00:01:04 I want to get started with routing with
- 00:01:07 this nice little example the first very
- 00:01:11 important thing for a working routing in
- 00:01:14 angular 2 application is here in our
- 00:01:16 index file in our index dot HTML file we
- 00:01:20 need to set this element here base wrap
- 00:01:25 and then slash that is very important
- 00:01:28 for your URLs and your routing to work
- 00:01:31 correctly in your angular to it if you
- 00:01:33 do have any errors you absolutely can't
- 00:01:35 explain with all the other possible
- 00:01:37 sources have a look at this one this
- 00:01:40 might help you
- 00:01:41 the next place where we will start to
- 00:01:44 implement our routing is our boots TS
- 00:01:47 here we are bootstrapping our app
- 00:01:49 component and since we will set up the
- 00:01:52 routing in our app component as our root
- 00:01:55 component I will need to add something
- 00:01:59 here in a suit strap method if we have a
- 00:02:01 look at the arguments we can pass then
- 00:02:04 we have optional argument of custom
- 00:02:07 providers so providers this app
- 00:02:09 component might need this will be an
- 00:02:12 array and I definitely
- 00:02:15 need to pass the router providers
- 00:02:19 providers so as of as in the other
- 00:02:24 videos phpstorm
- 00:02:26 automatically imported them from for me
- 00:02:28 and this is an absolutely necessary
- 00:02:31 thing for routing to work because this
- 00:02:33 will enable our app component queue do
- 00:02:37 routing to get the router service so to
- 00:02:41 say injected now in our app component
- 00:02:44 here I will first set up a little header
- 00:02:47 up here where we will then do our
- 00:02:49 routing so the navigation bar so to say
- 00:02:53 this will be a very simple one as of now
- 00:02:56 but be fine and I also will get rid of
- 00:03:00 this contact list here because we will
- 00:03:02 replace this with something different in
- 00:03:04 a second now what I will do here is in
- 00:03:08 my navigation bar I will create two
- 00:03:10 links because I will have two routes now
- 00:03:15 I don't need the anchor it created here
- 00:03:17 for me instead I will use a custom
- 00:03:20 angular 2 directive here the router link
- 00:03:24 and this takes an array it is quotation
- 00:03:31 marks here where we then have again in
- 00:03:34 single quotes don't forget this the name
- 00:03:37 of our route now as if now we haven't
- 00:03:40 set up any routes but as I will do this
- 00:03:42 right after this we can as well start of
- 00:03:44 that so the first one will be the
- 00:03:47 contacts route which will just display
- 00:03:49 the list of contacts and the second one
- 00:03:53 I will just copy this second one will be
- 00:03:57 the new contact route which will enable
- 00:04:00 us to create a new contact now if I save
- 00:04:04 this we get this loading sign your this
- 00:04:07 loading text stack because actually at
- 00:04:10 the moment our app is broken because
- 00:04:12 we're setting router links which our app
- 00:04:14 component doesn't know yet and if it
- 00:04:16 were to know it well we would be using
- 00:04:18 routes it doesn't know
- 00:04:19 so first let's fix the thing about
- 00:04:22 router links here in my directives I
- 00:04:24 will import another directive the router
- 00:04:29 directives so just as we had the router
- 00:04:32 provide us here now bootstrap method
- 00:04:36 where we inject providers into our app
- 00:04:39 component we will also need our right
- 00:04:41 router directives here for these yeah
- 00:04:44 router directives to work and as you can
- 00:04:46 see our app is no longer broken even
- 00:04:48 though it doesn't do anything and yeah
- 00:04:51 doesn't look that great so next thing is
- 00:04:54 I will set up these routes and therefore
- 00:04:59 I have to add another decorator with
- 00:05:01 some more metadata to this class this
- 00:05:04 will be the route config decorator and
- 00:05:07 again I always stress this because this
- 00:05:10 is a easy error source in my program
- 00:05:13 here everything will be automatically
- 00:05:15 imported for me you definitely have to
- 00:05:18 have to import the router directives and
- 00:05:20 around config now in the route config we
- 00:05:23 will pass an array so no object as in
- 00:05:27 the component decorator but an array
- 00:05:29 instead and in this array then we will
- 00:05:34 pass the Chava script objects and each
- 00:05:37 object represents one route each object
- 00:05:40 then has several properties the first
- 00:05:42 one being the path this is what a URL
- 00:05:45 will display so the first one should be
- 00:05:47 slash contacts we will have a name well
- 00:05:51 this should match our name we set up
- 00:05:52 here so we will have contacts as our
- 00:05:56 name and I forget a t here just saw it
- 00:06:01 so next it will be the component which
- 00:06:04 is responsible for rendering or handling
- 00:06:08 this route so the component will be our
- 00:06:11 contact list component here remember
- 00:06:15 that I just removed the contact list tag
- 00:06:18 selector here that is why it is display
- 00:06:21 here anymore and in order to be able to
- 00:06:24 load it again well we have to tell our
- 00:06:27 router where to find the content it
- 00:06:29 should fetch and which is duplicated
- 00:06:33 route and create a new contact route
- 00:06:35 here
- 00:06:39 currently I don't have a component here
- 00:06:41 I will take care about this in a second
- 00:06:43 now at the moment when we would load
- 00:06:46 this application here so if I save this
- 00:06:49 and we get it reloaded we still don't
- 00:06:53 see anything here now I can click on
- 00:06:55 this and this won't work because I
- 00:06:58 actually have no hook where content
- 00:07:01 should be displayed so this will be here
- 00:07:04 in our main div where we previously had
- 00:07:08 the outlet or the tag to our contact
- 00:07:13 list component I will now create a new
- 00:07:16 tag or a new directive which is the
- 00:07:20 router outlet this is a built-in
- 00:07:23 directive of angular q and it comes into
- 00:07:27 the router directives import here and as
- 00:07:31 you can see this now works again now if
- 00:07:34 I remove this in the URL and go to this
- 00:07:37 page we don't see anything if I click
- 00:07:40 here we'll see it but it would be nice
- 00:07:41 if it would automatically load this page
- 00:07:43 if it would automatically load this page
- 00:07:46 when we enter our root directory so to
- 00:07:49 say therefore I can add an another
- 00:07:52 property here which is use as default
- 00:07:56 and this is a value of true and now you
- 00:08:00 can see that it already loads this
- 00:08:01 website when we enter it on its main URL
- 00:08:07 so this looks pretty good but I still
- 00:08:10 got the second component which isn't
- 00:08:13 available now as you can see nothing
- 00:08:15 happens when I click on it because
- 00:08:19 currently I have the contact list
- 00:08:21 component set here so I will create a
- 00:08:24 new component here a new contact
- 00:08:29 component and oh yeah I'll just copy
- 00:08:40 this here entered here get rid of all
- 00:08:44 our text in the template get rid of the
- 00:08:49 styles as well don't need them here
- 00:08:51 don't need the input
- 00:08:53 don't evenly the selector as we're using
- 00:08:55 a router III could by the way I could
- 00:08:58 remove this selector here as well but it
- 00:09:01 doesn't really matter if it's there or
- 00:09:03 not I won't need to contact service and
- 00:09:05 I want D to contact so very very lean
- 00:09:09 component here and I have to rename it
- 00:09:12 to a new contact component and just to
- 00:09:14 see that it works
- 00:09:15 I'll output some text here create a new
- 00:09:18 component the actual logic of creating a
- 00:09:23 new component you contact not component
- 00:09:26 the actual logic of creating a new
- 00:09:28 contact will be added in a later video
- 00:09:30 back in our app component here I will
- 00:09:33 then replace this component here of the
- 00:09:35 new contact component again import
- 00:09:38 automatically done for me and now you
- 00:09:40 can see this works and I can switch
- 00:09:43 between these two routes now the last
- 00:09:46 thing I'll do is I just fix the styling
- 00:09:48 of this header here give this a nice
- 00:09:50 look and I will go to my app CSS file
- 00:09:55 and first of all I want to navigation in
- 00:10:00 the header also to be centered and then
- 00:10:04 I will just reform reggie's links a
- 00:10:08 little bit so in my navigation the links
- 00:10:11 should let's say have a color of I'll
- 00:10:14 just pick the color I got here that's
- 00:10:16 dark blue I really like that and they
- 00:10:22 should have no text decoration so no
- 00:10:24 underlining is here I will also make
- 00:10:27 them bold and now when we hover over
- 00:10:30 them or if we do have them active they
- 00:10:38 will change in color and yeah that's
- 00:10:41 like give them this color here so the
- 00:10:44 save this and as you can see the snow
- 00:10:47 works so we got our basic routing going
- 00:10:49 on here it was really simple to set up
- 00:10:51 here in angular
- 00:10:53 as I said I will have a look at more
- 00:10:55 complex routing with SAP routes and so
- 00:10:58 on the future videos and we will
- 00:11:00 obviously also take care about the
- 00:11:02 ability to really create a new contact
- 00:11:04 but routing is a really a core concept
- 00:11:07 of all web applications so as you can
- 00:11:11 see it's easy to wire up there are few
- 00:11:13 key things to watch out for like setting
- 00:11:18 this base tag here and also injecting
- 00:11:22 our router providers in the boot good
- 00:11:25 method here but overall really nice and
- 00:11:29 handy thing to set up see you on the
- 00:11:31 next video is fine
