Tutorial: Application Shell

REFERENCES
[1]: https://angular.io/tutorial/toh-pt0 "The Application Shell"

Install the Angular CLI, if you haven't already done so.

npm install -g @angular/cli

Create a new application

Create a new project named angular-tour-of-heroes with this CLI command.

ng new angular-material-heroes

The Angular CLI generated a new project with a default application and supporting files.

Serve the application

Go to the project directory and launch the application.

cd angular-material-heroes
ng server --open

You should see the app running in your browser.

Bootstrap Grid Framework

Throughout this project, we will be using the Bootstrap 4 reboot, grid system, and helper utilities. Furthermore, I have made a customised stylesheet with selectors for all the Material Design pallette.

Getting started

Include these in the src/index.html file:

src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular Material Heroes</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!--Bootstrap 4 Reboot-->
  <link rel="stylesheet" href="assets/css/bootstrap-reboot.min.css">
  <!--Google Fonts and Icons-->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Font Awesome Icons-->
  <link href="assets/css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
  <!--ROOT COMPONENTS-->
  <app-root></app-root>
</body>
</html>

src/styles.css

@import './assets/css/bootstrap-reboot.min.css';
@import './material-colors.min.css';
@import './assets/css/bootstrap-grid.min.css';
@import './assets/css/bootstrap-helpers.min.css';

Angular components

The page you see is the application shell. The shell is controlled by an Angular component named AppComponent.

Components are the fundamental building blocks of Angular applications. They display data on the screen, listen for user input, and take action based on that input.

Change the application title

Open the project in your favorite editor or IDE and navigate to the src/app folder.

You'll find the implementation of the shell AppComponent distributed over three files:

app.component.ts— the component class code, written in TypeScript.
app.component.html— the component template, written in HTML.
app.component.css— the component's private CSS styles.

Open the component class file (app.component.ts) and change the value of the title property to 'Tour of Marvel Heroes'.

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Tour of Marvel Heroes';
}

Open the component template file (app.component.html) and delete the default template generated by the Angular CLI. Replace it with the following line of HTML.

src/app/app.component.html

<div class="container">
  <div class="row">
    <h1 class="indigo-text">{{ title }}</h1>
  </div>
</div>

The double curly braces are Angular's interpolation binding syntax. This interpolation binding presents the component's title property value inside the HTML header tag.

The <div class="container"> and <div class="row"> uses the Materialize CSS framework grid layout to put the content inside a container that sets certain defaults like margin and padding. The class="blue-text" is a Materialize CSS color help changes the text to a blue from the Material color palette.

The browser refreshes and displays the new application title.

Add application styles

Most apps strive for a consistent look across the application. The CLI generated an empty styles.css for this purpose. Put your application-wide styles there.

Here's an excerpt from the styles.css for the Tour of Marvel Heroes sample app.

src/style.css

/* Import prebuilt Angular Material theme */
@import '../node_modules/@angular/material/prebuilt-themes/indigo-pink.css';

/* Application-wide Styles */

html {
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-weight: normal;
  color: rgba(0, 0, 0, 0.87);
}

body {
  margin: 0;
}

Summary

You created the initial application structure using the Angular CLI.
You learned that Angular components display data.
You used the double curly braces of interpolation to display the app title.

5.1. Application Shell