Add a login page in my Onsenui app

Question

I'd like to set a login page before entering the main page. How can I do that just before this instruction :

<ons-screen page="sliding_menu.html"></ons-screen>

I use The Monaca IDE

Thanks for the help

Charles

score 11 · Accepted Answer · answered Mar 07 '14 at 10:20

11

You can try this way:

index.html

<ons-screen page="login.html"

login.js

function LoginController($scope){
    $scope.login = function(id, password){
        $scope.ons.screen.presentPage('sliding_menu.html');
    }
}

login.html

    <div class="page center" ng-controller="LoginController">
    <div class="row">
        <div class="col">
            <ons-text-input placeholder="id" ng-model="id">             
            </ons-text-input>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <input type="password" placeholder="password" ng-model="password" class="topcoat-text-input">
        </div>
    </div>

    <div class="row">
        <div class="col">
            <ons-button ng-click="login(id, password)">
                Login
            </ons-button>
        </div>
    </div>
</div>

Demo: http://onsenui.github.io/stackoverflow/sliding_menu_login/app/

Download src: http://onsenui.github.io/stackoverflow/sliding_menu_login.zip

answered Mar 07 '14 at 10:20

Tamura

1,788
1
14
10

Exactly what I was looking for :-D...And by the way, your Framework rocks !! Thanks so much ! – charlesen Mar 14 '14 at 21:39
@Tamura How do I redirect the page using javascript? My app would check for local storage object. If present, it would skip the `login.html` to `sliding_menu.html` – Sambruce Sam Apr 18 '14 at 19:38
2

you can bind the page of ons-screen to a controller variable. eg. – Tamura Apr 21 '14 at 06:43
I could be a moron but does ons-screen still exist? – nokturnal Jul 29 '14 at 04:13

Add a login page in my Onsenui app

1 Answers1

Linked