Coding

Angular 2 Tutorial (2016) – Routing

  • 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