CODEWITHSUNDEEP
javascriptangularjscordovaonsen-ui
Jyrki Mouton
Jyrki Mouton

Reputation: 53

How to navigate from a page to another page in Onsen UI

I'm developing a mobile application based on the Onsen UI (and PhoneGap + AngularJS). I want to navigate from the Settings.html template/page to the StartPage.html template/page. But when both of them have the </ons-navigator> tag, it doesn’t work. Can someone help me. Thanks

App.js (AngularJS)

//Start page
app.controller('StartPage', ['$scope', function ($scope) {
    $scope.menu.setSwipeable(false);         
         $scope.LogInPage = function () {          
        $scope.myNav.pushPage('LogIn.html', { animation: 'slide' })
    };
    $scope.SignUpPage = function () {
        $scope.myNav.pushPage('SignUp.html', { animation: 'slide' })
    };
}]);
    //Settings
app.controller('Settings', ['$scope', function ($scope) {

    $scope.LogOut = function () {
        $scope.navSettings.resetToPage('StartPage.html', { animation: 'slide' });
    };
}]);

index.html

<!--StartPage.html-->
 <ons-template id="StartPage.html">
    <ons-navigator var="myNav">
        <ons-page ng-controller="StartPage" style="background-color:#4383cd">

            <img src="images/Logo.png" height="150px" style=" display: block; margin-top:40%; margin-left: auto; margin-right: auto" />

            <button class="button button--outline" style="width:95%; display:block; margin-top:60%; margin-left: auto; margin-right: auto; border-color:white; color:white" ng-click="LogInPage()">LOG IN</button>
            <button class="button button--outline" style="width:95%; display:block; margin-top:10px; margin-left: auto; margin-right: auto; border-color:white; color:white" ng-click="SignUpPage()">SIGN UP</button>
        </ons-page>
    </ons-navigator>
</ons-template>

  <!--Settings.html-->
 <ons-template id="Settings.html">
    <ons-navigator var="navSettings">
    <ons-page ng-controller="Settings">
        <ons-toolbar fixed-style>
            <div class="left">
                <ons-toolbar-button ng-click="menu.toggle()">
                    <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">Settings</div>
        </ons-toolbar>
        <button ng-click="LogOut()" class="button button--large">Log out</button>
    </ons-page>
     </ons-navigator>
</ons-template>

Upvotes: 1

Views: 4253

Answers (1)

Fran Dios
Fran Dios

Reputation: 3482

I recommend you to check the docs if you didn't do it yet: http://onsen.io/guide/overview.html http://onsen.io/reference/javascript.html

You don't need a navigator per page, just one:

<ons-navigator var="myNav" page="StartPage.html">
</ons-navigator>

<!--StartPage.html-->
 <ons-template id="StartPage.html">
    <ons-page ng-controller="StartPage" style="background-color:#4383cd">
        <img src="images/Logo.png" height="150px" style=" display: block; margin-top:40%; margin-left: auto; margin-right: auto" />

        <button class="button button--outline" style="width:95%; display:block; margin-top:60%; margin-left: auto; margin-right: auto; border-color:white; color:white" ng-click="LogInPage()">LOG IN</button>
        <button class="button button--outline" style="width:95%; display:block; margin-top:10px; margin-left: auto; margin-right: auto; border-color:white; color:white" ng-click="SignUpPage()">SIGN UP</button>
    </ons-page>
</ons-template>

  <!--Settings.html-->
 <ons-template id="Settings.html">
    <ons-page ng-controller="Settings">
        <ons-toolbar fixed-style>
            <div class="left">
                <ons-toolbar-button ng-click="menu.toggle()">
                    <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">Settings</div>
        </ons-toolbar>
        <button ng-click="LogOut()" class="button button--large">Log out</button>
    </ons-page>
</ons-template>

Check that your JS and Controllers are OK with these changes. Hope it helps!

UPDATE

with OnsenUI v2 release, the attribute startPage has changed to page. you could check this out on OnsenUI v2 Navigator

Upvotes: 3

Related Questions