Aurelia top level component without routing

1
votes

Is it possible to add an Aurelia top level component without the router? The goal is to create a component without the router since my application doesn't need any url based navigation.

From what I can tell Aurelia seems to take you down a path where components are instantiated via routing based on how the component is registered with the router.

Instead I would like to just add markup for the top level component on the main index.html page:

<my-component bind.current="'123456'"></my-component>

I would like define components without a router and only use the templating and data binding capabilities of Aurelia.
Is that possible?

Tried this in index.html (inside the body tag of the default project)

<require from='./dist/my-component'></require>
<my-component></my-component>

But it does not seem to pick it up. Ideally I would like to just define it in markup on a page served from the server since it would enable me to sett attributes dynamically on the elements

<my-component current.bind={{someServerGeneratedId}}></my-component>

In the above I would use a templating framework like mustache to dynamically render the Aurelia when the page is served from the server. I could wrap the component in another "landing" component, but that makes it hard to benefit from setting things up with server generated bindings.

UPDATE: Per Rob's response: https://github.com/aurelia/framework/issues/175#issuecomment-126965417 - He is expecting to add the ability to add a root component to the landing page in a future release. I understand there are ways to not use the router, but it still depends on pulling in a partial view during bootstrapping of the application. This does not use the router directly, but conceptually this is really just an implied/convention based client side nav. In the end there is a client side request to pull in the view, which means I can't generate the html dynamically from the initial server response.

2
aurelia

2 Answers

2
votes

Yes you can do this very easily without the router. Just remove the router configuration from your app.js and in app.html remove the router code there as well.

I think the issue you are running in to is that you are specifying the dist folder again in your index.html. You should just reference it like this - 

<require from="my-component"></require>
<my-component current.bind="someServerGeneratedId"></my-component>

This will bind up correctly.

0
votes

I guess you're missunderstanding the route concept here.

At the time of writing, Aurelia's index.html page is your initial page where you put your "loading" stuff and where Aurelia bootstraps the entire app.

So, you can't put a custom component directly on it, but that should not be a problem.

If you don't change any configuration on Aurelia, it will look for your app.html to bootstrap your app, and there you can have anything you want (routes or not, doesn't matter). So, you should put your component there, beside the other tags/components/etc you need.

I've made a plunker without any routing and with a custom component in the app.html, and something simulating what you need.

<template>
  <require from='./my-component'></require>

  <my-component current.bind="serverGeneratedID"></my-component>
</template>

http://plnkr.co/edit/mLb8Ym638b4V2e9LDp0A?p=preview

If you need anything else, comment here and I'll try to go further.