Build Your First Angular Website

Creating the Home Page

Let's start building out the pages for our application. Since this course is more about Angular techniques than about styling and designing a website, we'll keep our pages fairly simple.

The main parts to focus on in this lesson is that we'll add a giant hero section and also add an image as the background image. This will let us see how to use Angular CLI's assets folder to use images.

Creating the Home Page Component

We'll keep on leveraging the Angular CLI to help build our application. This lets us avoid writing the repetitve code of creating new @Component()s. I do recommend writing a few of these by hand just so you can get the practice.

We'll use the CLI to create the home page now. We'll add it to our components folder for now. In a future lesson, we'll talk about organizing our application into separate folders and modules.

ng g component components/home

We'll see a new components/home/home.component.ts file.

Creating a Hero Section

We'll create our hero section using Bulma hero classes. We'll build this right into our home.component.ts template.

@Component({
  selector: 'app-home',
  template: `
    <section class="hero is-info is-fullheight is-bold">
    <div class="hero-body">
    <div class="container">

      <h1 class="title">Home Page!</h1>

    </div>
    </div>
    </section>
  `,
  styles: []
})

Let's run through a few of the classes. I know this can feel like divitis but it's good since we don't have to write any CSS for these demos. It would be very similar if we went with other CSS frameworks like Bootstrap.

  • hero and hero-body and container: structure our overall sizing for the hero
  • is-info: make it blue
  • is-fullheight: make the hero the full height (100vh) of the browser
  • is-bold: give it a gradient

Feel free to browse the docs and use your own classes to change the colors.

Adding the Home Page to Our App

We've created this new home page but haven't used it in our template yet. We'll just drop it into the AppComponent template and in a future lesson we'll see how we can add this to our routing file instead. This is a simple way to just display the page and see if it's working for us.

// app.component.ts
...
template: `
  <!-- header -->
  <app-header></app-header>

  <!-- testing the home page -->
  <app-home></app-home>

  <!-- routes will be rendered here -->
  <router-outlet></router-outlet>

  <!-- footer -->
  <app-footer></app-footer>
`,
...

Adding a Background Image

While this is great, we can make it a bit better. Let's add a background image!

We'll go grab an image from http://pexels.com or http://unsplash.com and save it to your assets/img folder. Choose something that will look good with text overlaid on it.

I've chosen this one: https://unsplash.com/photos/3N5ccOE3wGg

https://images.unsplash.com/photo-1490237014491-822aee911b99?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c6c99dec73e55acf9dbf720ec37f6b0a&auto=format&fit=crop&w=1350&q=80

I've moved mine to assets/img/canyon.jpg. Now we can use this inside of our home page in the styles section of our @Component():

@Component({
  selector: 'app-home',
  template: `
    <section class="hero is-info is-fullheight is-bold">
    <div class="hero-body">
    <div class="container">

      <h1 class="title">Home Page!</h1>

    </div>
    </div>
    </section>
  `,
  styles: [`
    .hero {
      background-image: url('/assets/img/canyon.jpg') !important;
      background-size: cover;
      background-position: center center;
    }
  `]
})

Now we have a good looking site!

Referencing Assets in CSS

To reference assets inside of CSS, we need to once again reference things from within the src folder. It is important to use the beginning forward slash also.