How can I push or replace page inside a Navigator Onsen UI?

Question

i am developing an app with cordova + Onsen UI. I would like to know how can I use the .popPage() method to a navigator content. Is it possible? I read and read and read but did not understood exactly the mean for a navigator. I tried to get all this content off from navigator and put into a new page, then I defined the main page to this new I've created. But had no success too. Look the code:

<ons-template id="home.html" style="background:#fff;">
  <ons-navigator var="myNavigator" title="Navigator">

      <ons-page id="content-home" class="fill">
        <div class="gradient">

So how can I use push or replace function for a page inside the navigator? Thank you.

Answer 1

There are many ways to manage the navigation, I'll show you an example with an ons-button element which, when triggered, pushes a new page into the navigator:

<ons-button modifier="light" ng-click="myNavigator.pushPage('page1.html', { animation : 'slide' } )">
  Push Page
</ons-button>

You can find a full list of ons-navigator methods in the official documentation .

You also need to distinguish 3 concepts:

• Push page : adds a new page into the stack.
• Pop page : returns to the previous page on the stack, cannot be triggered if a push page action has not occurred yet.
• Replace page : replace the current page with the specified one.

You can see a full example of navigation by taking a look at this CodePen example

EDIT (answers the opener's below comment)

I suggest you to don't put a page inside the navigator element but, instead, use the page attribute, which specifies the mail loaded page. Doing this, you can push the same page as many times as you wish.

Here is a very simple example, with its code:

<ons-navigator var="myNavigator" page="page1.html"></ons-navigator>

<ons-template id="page1.html">
  <ons-page>
    <ons-button ng-click="myNavigator.pushPage('page1.html');">Push</ons-button>
  </ons-page>
</ons-template>