"Strip the headers. Trace the source."

- Skyfall (2012)

Let's take a look inside the src folder.

You'll notice that the .js extensions are nowhere to be found in this realm. We're in TypeScript territory now.

You shouldn't need to edit any file on this level, except maybe index.html:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>DryRun</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

You can edit your title text (inside the <title> tag), and your favicon source (inside the <link> tag), to make the title bar llok like you want it to. That's about it for the <head>

Notice the weird tag in the <body>? The <app-root>? That doesn't look like a valid HTML tag, does it?

It's not. That's our first encounter of the custom kind. This is a custom angular tag within which our whole app will live.

Basically, when angular sees a custom tag, it scans the codebase to find what component it represents, and then renders said component inside the tag.

So what component does <app-root> represent? That would be the app component inside the app folder. We'll talk about that first thing in the next chapter.

For now, there's one final piece of exposition we must know about. It's kind of an important one.

results matching ""

    No results matching ""