Mastering TypeScript 3 - Third Edition

Aurelia views

Aurelia uses a naming convention to tie classes (or controllers) to their views. Our class is named App, and therefore the Aurelia runtime will search within the same directory as the class to find an HTML template with the same name. It will therefore tie app.ts to app.html, and use app.html as a template.

We will modify the existing app.html with the following snippet:

<template> 
 
  <require from="bootstrap/dist/css/bootstrap.css"></require> 
 
  <h1>${Title}</h1> 
  <ul> 
    <div repeat.for="item of items" > 
      <button style="margin: 5px;" class="btn btn-primary"> 
         ${item.DisplayName}</button> 
    </div> 
  </ul> 
 
  <div> 
    Selected Item : ${SelectedItem.Id} - ${SelectedItem.DisplayName} 
  </div> 
</template> 

Here, we have wrapped an HTML fragment within ...