All language subtitles for 012 Splitting the Template into Components_en

In this lecture, we're going to split our application into smaller pieces.

At the top of the template, there's a link called Log and Register.

The ultimate goal of this section is to make a modal appear.

If the log in register link is clicked before we can handle toggling the modal, we'll need to organize

our project.

Switch over to our editor.

Currently we have one active component which is the app component in the template block.

We have the entire app inside of it.

It's not necessary to house everything in one component because the state is available on a global level.

Let's start moving things into their own components for a better management.

We'll start with the header inside the components directory.

Create a file called App Header View.

Next, add the template block.

Switching back to the app component search for the header section.

It'll have a comment that says header above it.

I've minimized the element so I wouldn't have to scroll.

We're going to cut the NAV tag and its entire contents after you've grabbed the content, switched back

to the header component and paste the contents into the template block.

The header component is ready.

The next step is to register it.

We're going to register it locally.

Site headers are generally used once.

It's not something we'll need available for every component in our app.

We won't register it globally.

We'll register it in the app component, create the script block in the app component.

If it isn't already there, we'll give it the name of app.

Then import the header component.

We'll call it app header.

We're calling it EP header because there's already an HTML tag called header.

We don't want to have naming conflicts with tags that already exist.

An easy trick to prevent naming conflicts from happening is by pre fixing your components with a short

phrase like app.

Next, we'll add the components object to the app component.

We'll register the app header component.

This is ES6 syntax.

This is the same as typing app header, app header.

It's a nice shorthand way of doing things.

Before we proceed, I want you to check out the Style Guide Link and the resource section of this lecture.

I've shown you this page before.

I'm linking to a specific function that states component names should be multi worded.

This rule aims to help make sure your component names don't conflict with the names of existing HTML

elements.

It's a rule we're going to follow throughout the rest of this project.

Let's go back to the editor.

The last step is to use the component in the template scrolling back up and the component file will

place the app header component where we previously removed it.

Let's preview the application if you haven't already.

Start the server.

If everything worked, then you will see the page displaying normally.

Just to make sure open the view developer tools.

Search for the app header component.

It will be listed under the app component.

Our component is appearing in the list.

It has been successfully imported.

Let's work on moving the authentication model back inside the components directory.

We'll create a file called Off View.

Then scaffold the file with the template and script blocks.

Will assign the name property in the exported object to auth.

Next, go over to the app component file, scroll to the bottom of the template block.

They will be a div tag with the ID of auth modal.

It will have a comment above it saying authentication modal.

Cut the entire element from the template.

Subsequently we'll paste it into the auth components template block.

The component is ready.

Let's register it back inside the app components script block.

We'll import the off component as app off.

After importing it, we'll register it.

The last step is to add the component in the location.

We removed it.

We'll load it at the bottom of the app components template.

We've separated two sections of the app into separate components.

There are more sections, but we'll get to them later.

We want to focus on the elements that make up the authentication.

We're finished with splitting the application into smaller pieces, and the next few lectures will start

adding the logic for toggling the modal.