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:
ng new my-universal-app --style scss --routing true --skipTests
cd my-universal-app
ng g c header --skipTests --inlineStyle --inlineTemplate
ng g c products-list --skipTests --inlineStyle --inlineTemplate
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:
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
And noscript section:
<noscript>
Unfortunately, your browser doesn't support JavaScript
that is necessary to run this application.
</noscript>
Set up basic CSS in the src/styles.scss file:
html {height: 100%;
width: 100%;
}
body {height: 100%;
width: 100%;
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,
"Segoe UI",Roboto,"Helvetica Neue",Arial,
"Noto Sans",sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
noscript {display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
Routing#
Next, let's declare application routing. Add the following routes to src/app/app-routing.module.ts:
import { ProductsListComponent } from './products-list/products-list.component';
const routes: Routes = [
{ path: '', redirectTo: 'products', pathMatch: 'full' }, { path: 'products', component: ProductsListComponent },];
Header#
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:
template: `
<div class="navbar navbar-dark bg-dark shadow-sm"> <div class="container d-flex justify-content-between"> <a routerLink="/" class="navbar-brand d-flex align-items-center" ><strong>Welcome to the (work)shop!</strong></a > </div> </div>`,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:
<app-header></app-header>
<div class="content bg-light">
<div class="album py-5 bg-light">
<div class="container">
<router-outlet></router-outlet>
</div>
</div>
</div>
<footer class="text-muted">
<div class="container">
<p><a
href="https://www.newline.co/courses/newline-guide-to-angular-universal">
The newline Guide to Angular Universal
</a></p>
</div>
</footer>
To make your footer sticky, add the following styles to src/app/app.component.scss:
:host {display: flex;
min-height: 100vh;
flex-direction: column;
}
.content {flex: 1;
}
footer {padding-top: 3rem;
padding-bottom: 3rem;
}
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:
