Original subtitles

So now that we understand the basics of PUG,

it's time to do some refactoring and to

fit our code better into the NVC architecture.

And so that after that, we can finally

start building the website itself.

And just like we did with our resources,

I'm also going to create a router

and a controller for the views.

So basically a file where I can put all the routes

that we need in order to build our dynamic website.

So let's call this the view

routes.

Okay.

And let's start by requiring express.

Okay.

And so this is going to work the exact

same way as the other routers.

So creating a router

express dot.

A router and then by the end, we export it.

And so now, lets actually get these routes here

and copy them into the routes file.

Now here it's of course, no longer app, but router.

So let's replace that.

Alright.

And so that's actually okay.

So in the other routes, we used to use d dot route

where we then specified the route itself

and then after that, we used like get, post, patch,

or delete, so all these http methods.

But in this case, that's not going to be necessary

because all we're ever going to do is to use get.

And so it's good like this.

Next up, we actually need to mount this

router to our application.

So here, in the app, and so just like we did before,

we start by requiring it.

So, view router.

And now, let's actually mount it,

here right past the first one.

So view router, but the difference of this one

is that this is actually mounted right on the route URL.

Okay, so whenever a URL looks like this,

it will go straight into the view router.

And I'm not sure if that's going to work.

Maybe we will have to put it here at the end.

But let's see, once we test that.

Okay.

Now just as a final step, let's, just like before,

actually export these functions here into a controller.

And so, just like before,

let's create a views controller.

Alright.

And so that's copied and stuff.

So this one here is going to be called the get overview.

So export dot get overview

equals this function, okay.

For now at least.

So of course all of this here,

we're going to be replaced with the real controller

which is actually going to get the data for the overview

and then render that data.

Okay, but for now, we just have this very simple

controller function just to see if everything works.

Alright, so lets now actually go

add and import that controller here.

So controllers and then views controller.

Okay, and so here, we will have views controller

dot get overview, alright.

And now, here the same.

Export dot get tour.

Okay.

And this one here was actually just a test.

So lets get rid of it.

And now, finally we actually do not want a route

called overview but instead,

we want to show the overview right when we open the page.

Okay, so just like we have it here.

So this is the route page and whenever that is requested,

it will serve this overview page.

Okay, and so that's exactly what we want in our application.

Alright, so lets test it out.

And so this one here should now be the overview page.

And indeed, it is, okay.

And now here, lets reload this one as well

just to see if everything still works.

And it does, great.

And of course, we could still access our API as well.

So lets say API, V1,

slash tours.

And that should then give us all of our tours

and that we return for this endpoint.

Okay.

Fantastic, so with this,

we're actually ready to really start building

this overview page in the next lecture.

So I can't wait to see you there.