Linking Pages



  • 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.


  • Onsen UI

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



  • 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.


  • Onsen UI

    @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').



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


Log in to reply