monacaでのクイズアプリ作成'ReferenceError: Can't find variable: angular'の解決方法

前提・実現したいこと

<前提>
monacaを利用し、クイズアプリを作成したいと考えています。
質問者のレベルは
java:基礎知識を１通り習った程度で自信は無し
javascript:javaと同じく、基礎の基礎のみ習い、後は自学自習中
html:webサイトの作成を少ししたことがある程度
angular:アプリ作成に伴い勉強を始めたばかり
とかなり拙いレベルではありますが、ご指導いただければ幸いです。

https://matorel.com/archives/754
上記サイト様を参考にしながら（現段階ではほぼそのまま写して）進めています。

使用しているフレームワーク:Onsen UI V2 JS Navigation

<実現したいこと>
・topページで'Game Start'ボタンを押下した際に、game.htmlに遷移したい
上記サイト様では、以下のようにコーディングすると、プレビューにて'Game Start'ボタン押下時にgame.htmlに遷移する、とのことでしたが、エラーが出てしまいました。

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

ReferenceError: Can't find variable: angular

該当のソースコード

app.js

javascript
1// This is a JavaScript file
2
3var app = angular.module( 'myApp', ['onsen']);
4
5app.controller('topCtrl',function(){
6    this.gameStart = function(){
7        myNavigator.pushPage('game.html');
8    };
9});
10
11app.controller('gameCtrl',function(){
12	//後程追記します
13});

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, viewport-fit=cover">
  <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>

  <!-- // ADD START -->
  <script> ons.bootstrap(['myApp']);</script>
  <script src="js/app.js"></script>
  <!-- // ADD END-->

  <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>
    // Page init event
    document.addEventListener('init', function(event) {
      var page = event.target;

      if (page.matches('#first-page')) {

        page.querySelector('#push-button').onclick = function() {
          document.querySelector('#navigator').pushPage('game.html');
        };

      } else if (page.matches('#second-page')) {

        page.querySelector('#pop-button').onclick = function() {
          document.querySelector('#navigator').popPage();
        };

      }
    });

    if (ons.platform.isIPhoneX()) {
      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
    }
  </script>
</head>
<body>
  <ons-navigator id="navigator" page="top.html"></ons-navigator>

  <ons-template id="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 id="pop-button">Pop page</ons-button>
      </div>
    </ons-page>
  </ons-template>
</body>
</html>

game.html

<ons-page>
	<div ng-controller="gameCtrl as game">
		<ons-toolbar>
			<div class="left">
				<ons-toolbar-button>
					<ons-icon icon="ion-close-round" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon>
				</ons-toolbar-button>
			</div>
			<div class="center">
				Quiz App
			</div>
			<div class="right">
				1/10問目
			</div>
		</ons-toolbar>
		<div class="question">
			<p>
				ここに問題文を表示します。ここに問題文を表示します。ここに問題文を表示します。ここに問題文を表示します。
			</p>
		</div>
		<div class="choices">
			<ons-row>
				<ons-col width="50%" align="center">
					<div class="choice">
						<button class="button button--large--cta">解答A</button>
					</div>				
				</ons-col>
				<ons-col width="50%" align="center">
					<div class="choice">
						<button class="button button--large--cta">解答B</button>
					</div>
				</ons-col>
				<ons-col width="50%" align="center">
					<div class="choice">
						<button class="button button--large--cta">解答C</button>
					</div>
				</ons-col>
				<ons-col width="50%" align="center">
					<div class="choice">
						<button class="button button--large--cta">解答D</button>
					</div>
				</ons-col>
			</ons-row>
		</div>
	</div>
</ons-page>

top.html

<ons-page>
    <div class="title">
        <h1>Quiz App</h1>
        <p>monacaで作る簡単なクイズアプリ</p>
    </div>
    <div class="start-btn" ng-controller="topCtrl as top">
        <ons-button modifier="large" ng-click="top.gameStart()">
          Game Start
        </ons-button>
    </div>
</ons-page>

試したこと

「JS/CSSコンポーネントの追加」からAngularの追加など、検索してヒットしたものは全てやってみましたが、エラーが消えることは有りませんでした。
また別サイト様ですが
https://ja.stackoverflow.com/questions/9318/monaca-onsen-ui%E3%81%A7angular-module%E3%82%92%E3%81%99%E3%82%8B%E3%81%A8%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E8%B5%B7%E3%81%93%E3%82%8B
上記の解決方法を試してみても上手くいきませんでした。
angularがこのフレームワークでは使えない、ということはぼんやりですが分かっています。

参考にしているサイト様とではmonaca、Onsen UIの仕様が変わったためだとは思うのですが、
https://ja.onsen.io/v1/guide.html
こちらなどを見てみても上手くできず、ご教示お願いしたいです。

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

Cordva(PhoneGap)Loaderバージョン:1.0.0
Monaca Core Utility バージョン:2.0.7

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

回答1件

ベストアンサー

Onsen UI V1とOnsen UI V2は仕様が違いますし、Onsen UI V1のころは「JS/CSSコンポーネントの追加と削除」で、Onsen UI V1とAngularJSをインストールしたような気がします。

Onsen UI V2とAngularJSを使って開発を行いたいと考えているのであれば、フレームワークテンプレート「Onsen UI V2 Angular 1 Navigation」を選択してください。

ほぼコピー＆ペーストなら、作り直した方が早いと思います。

投稿2020/10/14 02:06

otak-lab

総合スコア276

moshr_18

2020/10/14 02:51

ご回答いただき、ありがとうございます！「Onsen UI V2 Angular 1 Navigation」にコピペしたところ、上手くページの遷移ができました。拙い質問でしたが、丁寧にお答えいただきありがとうございました。まだまだ勉強中ですが、アプリの開発頑張ってみたいと思います。

moshr_18

2020/10/14 03:00

追加で質問をさせていただきたいです。ほぼご回答と同じなのですが、自分の言葉で噛み砕いていうと、この「Onsen UI V2 Angular 1 Navigation」ではOnsen UI V2とAngularJSを使った開発が出来るため、出てしまっていたangularに関するエラー（「Onsen UI V2 JS Navigation」ではangularが使用できない）が発生しない、ということで間違いないでしょうか。