monaca onsenUIを使用した画面遷移

前提・実現したいこと

Monacaという開発環境を利用し、最初にログインページ、ログインページ内のログインボタンを押すとメインメニュー画面に行くようなアプリケーションを作りたいのですが、Monacaでの開発の際、Onsen UI V2 Angular 1 Tabbarというテンプレートを使用しており、初期画面からツールバーとタブバーが存在しています。
結果的にメインメニューではこの画面に行きたいのですが、一番最初はログイン画面に接続されるようにし、タブバーもツールバーもなくしたいのですが、どのようにしたらよろしいでしょうか。
下記のコードがほとんど初期のコードとなっています。できれば下の<ons-navigator>タブでログイン画面に最初に飛びたいと思っているのですが、うまくいきません。
よろしくお願いいたします。

該当のソースコード

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
  <script src="lib/css_browser_selector.js" type="text/javascript"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.bootstrap()
      .controller('AppController', function() {
          $scope.hide = true;
      });
    ons.ready(function() {
        console.log("Onsen UI is ready!");
    });
  </script>
</head>
<body>
 
<ons-navigator var="myNavigator" page="login.html"></ons-navigator>

<ons-page ng-controller="AppController as app">
    
    <!--ツールバー設定-->
    <ons-toolbar>
       <div class="center">My App - {{app.title}}</div>
    </ons-toolbar>

    <!--    タブバー関連    -->
    <ons-tabbar position="bottom" hide-tabs="{{hide}}">
        <ons-tab page="page1.html" label="Page 1" icon="square" active></ons-tab>
    </ons-tabbar>
</ons-page>



</body>
</html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

最初にログイン画面が表示されて、ボタンを押すとメインメニューに遷移するよう微修正してみましたのでご確認ください。
login.htmlという名称を与えてやらないと、ons-navigatorは表示すべきページを探すことができません。下記例はons-templateという機能を用いて名称を与えています。

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/angular/angular.min.js"></script>
9  <script src="lib/onsenui/js/onsenui.min.js"></script>
10  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
11  <script src="lib/css_browser_selector.js" type="text/javascript"></script>
12
13  <link rel="stylesheet" href="components/loader.css">
14  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
15  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
16  <link rel="stylesheet" href="css/style.css">
17
18  <script>
19    ons.bootstrap()
20      .controller('AppController', function() {
21          $scope.hide = true;
22      });
23    ons.ready(function() {
24        console.log("Onsen UI is ready!");
25    });
26  </script>
27</head>
28<body>
29
30<ons-navigator var="myNavigator" page="login.html"></ons-navigator>
31
32<ons-template id="mainmenu.html">
33<ons-page ng-controller="AppController as app">
34
35    <!--ツールバー設定-->
36    <ons-toolbar>
37       <div class="center">My App - {{app.title}}</div>
38    </ons-toolbar>
39
40    <!--    タブバー関連    -->
41    <ons-tabbar position="bottom" hide-tabs="{{hide}}">
42        <ons-tab page="page1.html" label="Page 1" icon="square" active></ons-tab>
43    </ons-tabbar>
44</ons-page>
45</ons-template>
46
47<ons-template id="login.html">
48<ons-page>
49      <ons-toolbar>
50       <div class="center">My App - LoginPage</div>
51    </ons-toolbar>
52    <ons-button ng-click="myNavigator.pushPage('mainmenu.html')">     
53      push
54    </ons-button>
55
56</ons-page>
57
58</ons-template>
59
60
61</body>
62</html>

投稿2018/05/21 07:57

akabee

総合スコア1947

sato1108

2018/05/21 09:06

初歩的な質問ですみません。 login.htmlに一度飛んでログイン内はpushとpopで行き来して、ログインボタンが押されたらmainmenu.htmlに戻ってくればいいわけですね。やりたい事ができました！ありがとうございます。しかしアンドロイドだと上記のやり方ですと、ログインボタンを押してmainmenu.htmlに来たあとにアンドロイドの元々ついているbackボタンを押すとログイン画面に戻れてしまうのですが、何か戻らないようにする方法などご存知でしょうか。

akabee

2018/05/21 09:40

そういった場合はpushPageではなくreplacePageを利用してください。この場合は画面を「置き換える」ため「戻る」という操作はできなくなります。 OnsenUIの画面遷移の基本的な概念については以下URLが参考になると思います。 https://qiita.com/coboco/items/5c33e201907623de5270

sato1108

2018/05/22 00:13

ありがとうございます。目的のものを探すのが苦手でとても助かりました。基本もまだまだなのでもっと理解を深めていこうと思います。ありがとうございました。

行動規範の内容に同意します