2.2 Create Page Components
In this lesson, we'll set up some simple page components that we can route between.
1.Introduction1 lesson, 00:41
2.Setup2 lessons, 14:48
3.Basic Routing2 lessons, 06:37
4.Advanced Routing5 lessons, 17:22
5.Conclusion1 lesson, 00:40
2.2 Create Page Components
Hello everyone, I am Reggie Dawson. Welcome to the Angular 2 Routing course for Tuts+. In this video, we are going to add the components that we we will use to route between. Routing is useless if we have just one component. Before we create our components, first I want to add the Bootstrap framework to our project. Even though we have our styles.css file, we will use bootstrap to provide our styling. Style.css will be used for any custom styles that we add. We already have noed installed, so we will use that to add Bootstrap. Make sure we are in our project folder to run this command. This will install Bootstrap and add it to our node modules folder. This will also add this to our dependencies in our package.json file. We also need jQuery in case we intend to use any Bootstrap plugins. After we add these libraries, we need to reference them in our index.html file. First we reference the Bootstrap CSS file from the node modules folder, then we add the references for the jQuery and Bootstrap libraries we just added. Now once we do that, we can add a pages folder in our app folder. This folder is where we will store all of the pages of our app. As we add components, more and more files will be generated. To avoid multiple files cluttering up the project, we will store each component in its own folder. Now after we do that, we can add a folder called Home in our Pages folder. This will contain the files for our home component. Inside this folder, we can add home.component.ts, home.html and home.css. First, we will go to home.component.ts. In this file, the first thing we will do is import the component decorator from Angular Core. Then we'll import the router directive from the Angular router. We need these directives in order to use the router link method in our template. We will talk more about this in a moment. After that, we will add our component decorator. Next we will add a selector of home even though we don't really need a selector. We don't need a selector because this component will be loaded by routing. Then we add template URL for our external HTML template. Notice we have to add the full path to access the template. After that, we add a style URL. In addition to the style.css file, we can also add component level CSS We can supply the styles inline or externally, similar to templates. We use this to apply styles that will only affect this component. Then we add the router directives. This makes the router directives available in our component. Then the last thing we add is the home component class that we export. Next, let's go to home.html. The first thing we will add to this is the Bootstrap Jumbotron. Inside this, we will have a container. This container serves to make the Jumbotron full width. Inside of this Jumbotron, we add some text inside of the Bootstrap great column. These columns are offset by eight columns to the right. And after that, we add a button in another set of columns. We have attached the router link directive to this button. Router link is how we navigate to other routes. We will talk more about this is we set up routing. After that, we will add a row and a set of columns inside. Now inside of this row and columns, we will add some dummy text. Make sure to close all HTML tags as Angular 2 is very touchy about proper HTML syntax. Then after that, go to home.CSS. Here we will set some styles for our Jumbotron. Since this course is focused on routing, I will not spend a lot of time styling the app. To make this easier, I will use the Jumbotron for all of our components. First, we will set a background image. Add a folder called images in the home folder. After we create your folder, place the image inside. You can use the image I supplied or choose your own. Also, again take note that we have to use the full path to access the image. Then we set the background size, the cover, adjust the background position to show the part of the image that we want, and set the height of the Jumbotron the 50%. Then we will add an about folder in the pages folder. Inside this folder we will create about.component.ts, about.html and about.css. First we will configure the about components similar to the home component. Of course, the first thing we do is import the component decorator. After that, we again have a selector that we don't need. Then we have the template URL and style URL. We don't need the router directive since we don't use router link in this template. The last thing we have in this file is our class which we, of course, export. Then if we go to the about that HTML page, we will again at our jumbotron. Of course, I'm just keeping it simple by using this component, which makes it easy to quickly add full page covers. Then we will add a row as a spacer followed by columns holding a title that says about us. Then we will add another set of columns to hold some dummy text. Then in about.CSS, we will add some styles for the Jumbotron and spacer. This Jumbotron has a background image that we have added in a image folder inside of the about folder. Then the background is again set to cover with the height and width of the Jumbotron set to 100%. We also set the text color to white. The spacer is set to a height of 20% to push the about text a little bit down the page. Then the last thing we will do is add a folder called error in the pages folder. Again, this is set up the same way as our other components. We will create an error.component.ts, error.html, and error.css file. Now error component is nothing different from the other components, with the exception that we have adjusted to reflect the error folder contents. Then we will go over to the error.html file. We will use the Jumbotron again set up the same way as before. Then we will add a column that says 404 error. This component will be displayed if we navigate to a route that doesn't exist. Then we add the error message explaining that there is no page at this route. Then after thatl we will go to error.css and add a Jumbotron class. Notice how all the classes are the same, but they don't conflict because they are only loaded with their component. Here we set the background color to black with yellow text. We also set the Jumbotron to the full height and width of the display. After that, the preliminary setup of our app is complete, but we can't navigate to the components yet. In the next video, we will set up the routes for our app.