Setting up the Project

Most projects start from scratch. This one is not an exception. In this lesson you will initialize the Angular application using CLI, include the Cascading StyleSheet, set up routing and basic components.

Generate the project and components#

First of all, you need to generate a new project and its components using the Angular CLI (@angular/cli). Type the following commands in your terminal:

Build the application skeleton#

You're going to use the Bootstrap CSS framework. This means you need to import the CSS available on Bootstrap CDN into your application.

In your src/index.html file, add a link element with a reference to the stylesheet hosted on the CDN:

And noscript section:

Set up basic CSS in the src/styles.scss file:

Routing#

Next, let's declare application routing. Add the following routes to src/app/app-routing.module.ts:

It's time to build the application header. You don't need any business logic there, so simply add the following HTML template to src/app/header/header.component.ts:

Application component#

Let's prepare a template for AppComponent. That's the place where you are going to have your <router-outlet> and website footer. Replace the code in src/app/app.component.html with the following:

To make your footer sticky, add the following styles to src/app/app.component.scss:

Test what you have built so far by running the Angular JIT compiler. Type the following command in your terminal:

ng serve

After navigating to http://localhost:4200, you should see the following:

Start a new discussion. All notification go to the author.