Features

You might find that you have created a lot of custom elements, custom attributes, and custom binding behaviors, and you are getting tired of using the require tag in your HTML. Aurelia makes this very easy to do in the form of features. Typically, you will want to structure your components in a folder that allows for a clear separation from the rest of your application. A good example would be a folder called resources, and inside this folder, you would have your components like resources/my-components.

Going back to the bs-input and attach-focus components, we would have a file structure as follows:

Code Listing 129

So, if we use the following structure, we can define our feature by using the last file, index.js. Let’s see what this would look like:

Code Listing 130

We are now finished with our structuring and organization. Let’s now take the final step and bring in our feature. We do this in our main.js file as follows:

Code Listing 131

That’s all there is to it! You add a single line feature with the location of your components, and you get them everywhere in your application without needing to use the require tag.