The JavaScript

First of all, let's open src/app/app.component.html and look at line 2: {{ title }}!.

Hm, what are these curly braces? If you're familiar with other templating languages, you may recognize this as a template token that's intended to be replaced by our rendering language before being rendered. So, what is the method to replace it?

Let's now look at 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 = 'app works!';
}

We can see that the template is referencing app.component.html and our AppComponent class is specifying title as app works!. That's exactly what we saw in our browser. Welcome to the power of a templating system! 

For now, we won't get into the SPA feature of Angular, but check out the Angular tutorial at https://angular...