Onsen UIでのページ遷移ができません

OnsenUIのナビゲーション型機能を作りたいのですが、page1.htmlからpage2.htmlへのページ遷移ができません。
初心の事だとは思いますが教えていただければ幸いです。

index.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>

  <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">


</head>
<body>
  <ons-navigator id="navigator" page="page1.html"></ons-navigator>
</body>
</html>

page1.html

<ons-page id="first-page">
      <ons-toolbar>
        <div class="center">Page 1</div>
      </ons-toolbar>

      <div class="content" style="text-align: center">
        <p>This is the first page.</p>
        <ons-button onclick="navigator.pushPage('page2.html')">Push page</ons-button>
      </div>
</ons-page>

page2.html

<ons-page id="second-page">
      <ons-toolbar>
        <div class="left"><ons-back-button>Page 1</ons-back-button></div>
        <div class="center">Page 2</div>
      </ons-toolbar>

      <div class="content" style="text-align: center">
        <p>This is the second page.</p>
        <ons-button onclick="navigator.popPage()">Pop page</ons-button>
      </div>
</ons-page>

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

回答1件

ベストアンサー

index.html

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    });
18  </script>
19</head>
20<body>
21  <ons-navigator id="navigator" page="page1.html"></ons-navigator>
22</body>
23</html>

page1.html

html
1<ons-page id="first-page">
2  <ons-toolbar>
3    <div class="center">Page 1</div>
4  </ons-toolbar>
5
6  <div class="content" style="text-align: center">
7    <p>This is the first page.</p>
8    <ons-button onclick="document.querySelector('#navigator').pushPage('page2.html')">Push page</ons-button>
9  </div>
10</ons-page>

page2.html

html
1<ons-page id="second-page">
2  <ons-toolbar>
3    <div class="left"><ons-back-button>Page 1</ons-back-button></div>
4    <div class="center">Page 2</div>
5  </ons-toolbar>
6
7  <div class="content" style="text-align: center">
8    <p>This is the second page.</p>
9    <ons-button onclick="document.querySelector('#navigator').popPage()">Pop page</ons-button>
10  </div>
11</ons-page>