concept homepage in category angular

This is an excerpt from Manning's book Getting MEAN with Mongo, Express, Angular, and Node.js 2ED. Login to get full access to this book.

When you’re building templates, start with whichever one makes the most sense to you. This template may be the most complicated or the simplest, or the first in the main user journey. For Loc8r, a good place to start is the homepage, which is the example we’ll go through in the most detail.

You saw in chapter 8 how to use Angular to add functionality to an existing page. In this chapter and chapter 10, you’ll take Angular to the next level by using it to create a single-page application (SPA). Instead of running the entire application logic on the server using Express, you’ll run it all in the browser using Angular. For some benefits and considerations when using an SPA instead of a traditional approach, flick through chapter 2. By the end of this chapter, you’ll have the framework for an SPA in place with the first part up and running by using Angular to route to the homepage and display the content.

Figure 9.4. Using the navigation buttons to switch between the homepage and the About page—an Angular SPA!

Then you need to reference this content in the homepage.component.html instead of the full HTML currently there. To do so, you need the correct tag, which you can find by looking for the selector in the page-header.component.ts file. In this case, the selector is app-page-header, so that’s what you’ll use in the homepage component HTML.

Listing 9.9. Replacing the page header HTML in homepage.component.html

<app-page-header></app-page-header>
<div class="row">
  <div class="col-12 col-md-8">
    <div class="error"></div>
    <app-home-list>Loading...</app-home-list>
  </div>
  <div class="col-12 col-md-4">
    <p class="lead">Looking for wifi and a seat? Loc8r helps you find
    places to work when out and about. Perhaps with coffee, cake
    or a pint? Let Loc8r help you find the place you\'re looking
    for.</p>
  </div>
</div>


!@%STYLE%@!
{"css":"{\"css\": \"font-weight: bold;\"}","target":"[[{\"line\":0,\"ch\":0},{\"line\":0,\"ch\":35}]]"}
!@%STYLE%@!

copy

Good start. You’ve created the new page-header component, but it still has hardcoded content. Next, you’ll pass data to the page header from the homepage component.