Linking Pages

Woody Deck

My project got a little bit bloated all on one page, so I want to break some of the views down into separate html files. I am quite confused by both the tutorial, and the documentation.

https://youtu.be/JCAyl15EFbw?t=2m

https://onsen.io/v2/guide/fundamentals.html#what-is-a-page

“Separate files: *.html files that contain a single ons-page component as the root. Their ID is given by the path in the project, e.g. ./my/views/page1.html.”

I’ve tried everything logical, but can’t seems to do anything but break the project. Is there an example somewhere of doing this? The youtube tutorial just immediately skips discussion and provides no examples.

Fran Diox

@Woody-Deck ToDo app in vanilla Javascript, YouTube app in AngularJS: https://onsen.io/samples/

Woody Deck

Yes, I’ve looked through that app. I still can’t make sense of how to compartmentalize the templates. I can’t get it to work. In Angular 4 everything works because that’s the nature of Angular, but that’s too heavy for this project.

So I have index.html and fancytable.html in the project.

fancytable.html is just this:

<ons-page>
<table>

//The fancy table code.
<table>
  <tr>
    <th>Company</th>
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Monaca</td>
    <td>Onsen</td>
    <td>Kekistan</td>
  </tr>
</table>

</ons-page>

index.html has everything else and I’m trying to load the fancytable.html template like this:


<body>
<ons-page id="./fancytable.html"></ons-page>
<body>

I must be wrong somewhere. :-) I’ve tried every variation possible.

Fran Diox

@Woody-Deck Yes, quite :sweat_smile: A page cannot load templates (or separate files). You need to pass the path to the file to a component that can load pages, like navigator, tab bar or splitter, just like when you are using <template> element.

<ons-navigatpr page="pate/to/page.html"> or myNavigator.pushPage('path/to/page.html').

Woody Deck

@Fran-Diox Thank you, this makes perfect sense now. I completely misunderstood.

username1

This post is deleted!

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Linking Pages