Monacaでのタブ上のボタンによる画面遷移

前提・実現したいこと

monacaでハイブリッドアプリを開発しようと
試みております。

タブがありつつ
タブ上のボタンを押下すると別ページに遷移するように実装をしたいのですが、
他ソースコードやサンプルをコピペしても遷移が行われません。

HTMLのみで完結できるのか、JS周りをいじらなきゃいけないのかなど
初心者な為、不明点が多数あります・・・。

初歩的な質問で大変申し訳ございませんが、
ご教授ください。よろしくお願いいたします。

補足：index.html内で完結させようとしています。
他のhtmlファイルなどを追加せず解決しようと思っております。

発生している問題・エラーメッセージ

ボタンを押しても遷移しない。

該当のソースコード

index.html

<!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/onsenui/js/onsenui.min.js"></script>
 <script src="lib/onsenui/js/onsenui.js"></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.ready(function() {
      console.log("Onsen UI is ready!");
    });
  </script>
<body>
<ons-navigator var="myNavigator"page="tab.html">
</ons-navigator>
<template id="tab.html">
  <ons-tabbar>
    <ons-tab page="page1.html" label="Page 1" icon="fa-align-justify" active="true"></ons-tab>
    <ons-tab page="page2.html" label="Page 2" icon="fa-align-justify"></ons-tab>
    <ons-tab page="page3.html" label="Page 3" icon="fa-align-justify"></ons-tab>
</ons-tabbar>
</template>
<template id="page1.html">
<ons-page>
    <ons-toolbar>
        <div class="center header_title">Page1</div>
    </ons-toolbar>
    <h1 style="text-align:center;">Page1</h1>
    <br>
    <div style="text-align:center;">
	<ons-button ngClick="myNavigator.pushPage('page4.html')">Page4へ</ons-button>
	<br>
	 Page4へ遷移するとタブが消えます。
    </div>
</ons-page>
</template>
<template id="page2.html">
<ons-page>
    <ons-toolbar>
        <div class="center header_title">Page2</div>
    </ons-toolbar>

    <h1 style="text-align:center;">Page2</h1>
</ons-page>
</template>

<template id="page3.html">
<ons-page>
    <ons-toolbar>
        <div class="center header_title">Page2</div>
    </ons-toolbar>

    <h1 style="text-align:center;">Page2</h1>
</ons-page>
</template>
<template id="page4.html">
<ons-page>
    <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center header_title">Page4</div>
    </ons-toolbar>

    <h1 style="text-align:center;">Page4</h1>
</ons-page>
</template>
</body>
</head>
</html>

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

回答1件

ベストアンサー

ngClick使ってるのでAngularかなって思いましたが、とりあえずOnsen UI V2 JS Minimumで動くサンプルを記載しておきます

※あと

２つありますが、onsenui.min.jsだけでいいはずです

index.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/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14
15  <script>
16    ons.ready(function() {
17      console.log("Onsen UI is ready!");
18    });
19  </script>
20<body>
21<ons-navigator id="myNavigator" page="tab.html">
22</ons-navigator>
23<template id="tab.html">
24  <ons-page>
25    <ons-tabbar>
26      <ons-tab page="page1.html" label="Page 1" icon="fa-align-justify" active="true"></ons-tab>
27      <ons-tab page="page2.html" label="Page 2" icon="fa-align-justify"></ons-tab>
28      <ons-tab page="page3.html" label="Page 3" icon="fa-align-justify"></ons-tab>
29    </ons-tabbar>
30  </ons-page>
31</template>
32<template id="page1.html">
33  <ons-page>
34    <ons-toolbar>
35      <div class="center header_title">Page1</div>
36    </ons-toolbar>
37    <h1 style="text-align:center;">Page1</h1>
38    <br>
39    <div style="text-align:center;">
40    <ons-button onclick="document.getElementById('myNavigator').pushPage('page4.html')">Page4へ</ons-button>
41    <br>
42     Page4へ遷移するとタブが消えます。
43    </div>
44  </ons-page>
45</template>
46<template id="page2.html">
47  <ons-page>
48    <ons-toolbar>
49      <div class="center header_title">Page2</div>
50    </ons-toolbar>
51    <h1 style="text-align:center;">Page2</h1>
52  </ons-page>
53</template>
54
55<template id="page3.html">
56  <ons-page>
57    <ons-toolbar>
58      <div class="center header_title">Page3</div>
59    </ons-toolbar>
60    <h1 style="text-align:center;">Page3</h1>
61  </ons-page>
62</template>
63<template id="page4.html">
64  <ons-page>
65    <ons-toolbar>
66        <div class="left"><ons-back-button>Back</ons-back-button></div>
67        <div class="center header_title">Page4</div>
68    </ons-toolbar>
69    <h1 style="text-align:center;">Page4</h1>
70  </ons-page>
71</template>
72</body>
73</head>
74</html>