Hands-On Full Stack Web Development with Aurelia

Component encapsulation

Component encapsulation uses a separate template file that looks more or less like every other web templating language you've ever used. By convention, if your component class is in hello.ts, then its template is in hello.html and your component will be <hello/>:

<!-- product-list.html -->
<template>
    <require from="product-detail"/>
    <div>
        <product-detail repeat.for="product of products" product.bind="product"/>
    </div>
</template>

/* producty-list.js */
export class ProductList {
    public products[];
}

Each JavaScript framework has its own way of working, and we can explore more features about each one, but Aurelia has something special—you don't need to go far away from learning how the framework works, and in extreme ...