<ons-sliding-menu var="myMenu" main-page="login.html" swipeable="false"></ons-sliding-menu>

<ons-template id="login.html">
    <ons-page ng-controller="loginController">
        <ons-toolbar>
            <div class="center">ログイン</div>
        </ons-toolbar>
        <div style="text-align: center; margin-top: 30px;">
            <p>
                <ons-input type="text" placeholder="ユーザー名" modifier="underbar" ng-model="user.name"></ons-input>
            </p>
            <p>
                <ons-input type="password" placeholder="パスワード" modifier="underbar" ng-model="user.password"></ons-input>
            </p>
            <p style="margin-top: 30px;">
                <ons-button ng-click="login()">ログイン</ons-button>
            </p>
        </div>
    </ons-page>
</ons-template>

<ons-template id="main.html">
    <ons-page ng-controller="mainController">
        <ons-toolbar>
            <div class="center">メイン</div>
        </ons-toolbar>
        <div style="text-align: center; margin-top: 30px;">
            <p style="margin-top: 30px;">
                <ons-button ng-click="logout()">ログアウト</ons-button>
            </p>
        </div>
    </ons-page>
</ons-template>

var app = ons.bootstrap("myApp", ["onsen"]);

app.controller("loginController", ["$scope", function($scope) {
    $scope.user = {
        name: "",
        password: ""
    };
    ons.ready(function() {
console.log("ready login.html");
    });
    $scope.login = function() {
        // ログイン認証処理を記述する
        // :
        // :
        // 認証成功の場合、メイン画面表示
        myMenu.setMainPage("main.html");
    };
}]);

app.controller("mainController", ["$scope", function($scope) {
    ons.ready(function() {
console.log("ready main.html");
    });
    $scope.logout = function() {
        // ログイン画面表示
        myMenu.setMainPage("login.html");
    };
}]);