In this guide we're going to start structuring our application so that it can be scalable. Right now, for the sake of just bootstrapping the app, if you come up to our app directory you can see that we built a home page component here and this is fine for getting things started.

However, what the best practice in angular development is is to have a very clearly defined organizational structure for our directories. We wouldn't want every single code file that we have in our entire application all within the root directory of an app. That would make it incredibly difficult. If you have a large application you could end up having hundreds or even more files right here. Obviously that would not be a good idea and it's considered a poor practice.

So what we're going to do is create an app component and that app component is going to be the master component that all of the other components are going to flow through. So our home page is simply going to be one component but it's going to reside underneath our app component.

If you are coming from a framework such as rails, which if you're taking this course I'm pretty sure that you are because this is a Rails in Angular course, then you know that we have the concept of an application controller and that application controller handles all of the data that comes into the system. So at some point or another if data is going to come through it has to flow through that application controller. Then underneath that it has other controllers, and that's kind of how this works we aren't going to be working directly with inheritance the way that Rails implements it. However we are going to be creating a master application component that everything else will flow through.

The first thing I'm going to do is create a directory here. The common convention in angular is to have all of your subcomponents inside of their own directory that is named after what kind of component they are. So for home page I'm going to create a new folder here and I'm just going to call it "homepage" and now I'm going to write click and open this up in the Finder and all of the home page files which are just these three right here.

I'm going to take and you're dragged into this home page directory. Now this is going to break the app and it just so you know for this guide the application is going to be broken for most of the time because we need to build our application component first. So switching back to Sublime Text you can see that now this is broken but that's perfectly fine. Let's not worry about it right now. And actually sublime brought back all these so if you hit save on accident just right click and delete those.

If you click on home page you can see that all of our components, they're all nested under our home page directory. So you can click on these and you can see these are all there. That's just something that sublime does where it thinks if you hit save it actually brings back and resurrects those files for you which wasn't what we wanted right then.

Now we have everything that we need to start off. Our home page files are inside their own component directory. And now we're ready to create our app components so to do that, inside of the app directory just click new file, save, and we're going to call this app.component.ts. Inside of this we're going to bring in some regular imports. We're going to import component and this is going to be from the angular core library.

import { Component } from '@angular/core';

Inside of this we're going to create a component decorator, and inside of the component decorator we're going to use our curly braces. There are just three things that we're going to put inside of this component metadata right here. The first is going to be something called a moduleId. What this is going to be is an I.D. that keeps track of everything that this component has to do. One thing that you will see, if you forget to put this module I.D. inside of a component that has to keep track of data then your entire application will break and that is an error message that angular does not really work well with.

When I was originally teaching myself Angular I had forgotten to put a moduleId in the component metadata in a few spots and it took me a while to figure out what I was doing wrong. And then I figured out that I had to call module and then module I.D. This is simply something that Angular uses to keep track of the component that it's referencing. That's why it's important to have.

Then give a comma and follow that up with a selector. If you remember back to our home page component we had a selector of main-app and for this one I'm going to want to change it to homepage just to make it make a little bit more sense. I'm also going to change our template here. I want to change this to say Home because before we were treating this home page as kind of the master entry point but that was just to get the app up and running so you can see it working. Now that we're structuring it we're going to have home page only take care of it's own business which is the home page

In app component I'm going to give a selector of app and then inside of this I'm going to give a template and here let's give a another <h1></h1>, and for this template I'm going to say Navigation because eventually this is where our navigation is going to be placed because this is a location that we want to have everybody having access to. All of our child components should all have access to their navigation bar at least for the application we're building. So we'll put navigation there and then eventually we'll replace that.

That is everything on the template. Now let's export this. I'm going to put explore class app component. Let's also give this a title. For this title will say freelance boot camp dashboard just like before. And with the semi colon and that's everything you're going to need it for this component.

export class AppComponent {
    title: 'Freelance Bootcamp Dashboard';
}

That is only one part of it. The next thing that we need to do is go and update our index file. Here we have main-app. This is a selector.

This is what was known earlier in angular one as a directive but now they're called selectors. So the way that it works is, instead of putting div or something like that in HTML what Angular looks for are the selectors. So it's going to have inside of these angled brackets it's going to be the name of whatever the selector component is. Here in app component we said the selector was going to be app.

This still isn't working but that's totally fine. It's because we still have a few more things to do.

The next thing we're going to do is go to our app module. We have a couple errors on this page. First and foremost we have this home page component that is no longer at this location. So we have to make sure that we're calling it from the correct spot. The way to do that is right after that period add another slash and just put home page.

'./homepage/homepage.component';

As you can see that fixes our bug here on what's being called. I'm also going to create a new import statement. So it's going to be for app component and this one is going to reside at './app.component'.

From there you just have to make sure that you are declaring this inside of your declarations and your bootstrap. With bootstrap we are no longer bootstrapping with homepage. Remember bootstrap is just kind of saying what component you want to start off with. Now with our app component we're going to start off there and in declarations. We're going to add it there and add a comma afterwards and then hit save on that. Look at that. Over here on our page in the browser you can see that now this is working properly.

Let's just kind of recap what we did here. We refactored our application so that it now is treating the home page as its own separate component. That's really one of the most important things. If you remember when I talked about the way that micro services are built you can almost think of the way the angular built itself was that it would have a bunch of little micro services embedded inside of the application, and that's why it went with the component kind of architecture.

So here we have a home page component that no longer is really communicating outside or I should say it's no longer coupled with these items. We can treat this home page component however we want. We could call it someplace else if we wanted and that makes it a lot better to work with. So what we've done is we have created a new component, a master application one that's going to handle all of the high level logic. This is what every user is going to see when they come in, is this component. This is a better way of doing it too because imagine that our freelance dashboard where to get really built out and you want users who are logged in already. If they come back a few days later and their session is still valid then you may want to redirect them automatically to their profile page. If we have the bootstrapping with the home page component then we can't do that because it would automatically always show them the home page but because we have abstracted that out and now we're using our app component then that gives us a lot more flexibility down the line.

All of this is working. We're good to go and in the next guide we're going to talk about routing because we need to be able to show how we can declare and organize routes in Angular so that we can direct users to our home page component.

Resources

• Code at this stage