Digging into the index

Now, let’s take a look at index.html in order to get a sense of what goes on when we start the application:

<!-- dunebook2/ts/hello-world/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><%= TITLE %></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- inject:css -->
  <!-- endinject -->
</head>
<body>
  <app>Loading...</app>
  <!-- inject:js -->
  <!-- endinject -->
  <%= INIT %>
</body>
</html>

Note that inside the body of the page, we use the app element with the content of the text node, "Loading…", inside. The "Loading…" label will be visible until the application gets bootstrapped and the main component gets rendered.

Note

There are template placeholders <%= INIT %> and <-- inject:js… that inject content that is specific to individual demos. They are not Angular specific but instead aim to prevent code duplications in the code samples attached to the book because of the shared structure between them. In order to see how this specific HTML file has been transformed, open /dist/dev/dunebook2/ts/hello-world/index.html.