monacaのOnsen UI V2 JS SplitterでAngularJSが動作しない。

monacaのOnsen UI V2 JS Splitterでアプリを作成しています。
アプリは各ページにAngularJSを使って制御しようと思ったのですが、なぜかAngularJSが動作しませんでした。
プログラムは以下に載せます。

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:; 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="js/angulerjs.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!");
    });


    window.fn = {};
    window.fn.open = function() {
      var menu = document.getElementById('menu');
      menu.open();
    };
    window.fn.load = function(page) {
      var content = document.getElementById('content');
      var menu = document.getElementById('menu');
      content
        .load(page)
        .then(menu.close.bind(menu));
    };

  </script>
</head>
<body>
  <ons-splitter>
    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
      <ons-page>
        <ons-list>
          <ons-list-item onclick="fn.load('home.html')" tappable>
            Home
          </ons-list-item>
          <ons-list-item onclick="fn.load('settings.html')" tappable>
            Settings
          </ons-list-item>
          <ons-list-item onclick="fn.load('about.html')" tappable>
            About
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
  </ons-splitter>

  <ons-template id="home.html">
    <ons-page ng-controller="homeController">
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          Main
        </div>
      </ons-toolbar>
    </ons-page>
  </ons-template>

  <ons-template id="settings.html">
  <ons-page ng-controller="settingController">
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Settings
      </div>
    </ons-toolbar>
  </ons-page>
  </ons-template>

  <ons-template id="about.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        About
      </div>
    </ons-toolbar>
  </ons-page>
  </ons-template>

</body>
</html>

angulerjs.js

var app = ons.bootstrap("myApp", ["onsen"]);
app.controller("homeController", ["$scope", function($scope) {
    ons.ready(function() {
        alert('home');
    });
}]);
app.controller("settingController", ["$scope", function($scope) {
    ons.ready(function() {
        alert('setting');
    });
}]);

無知ですみませんが、ご教授よろしくお願いします。

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

回答2件

angular.jsは、onsenui foldaの中にもあります。そちらを使った方が良いと思われます。

<script src="lib/onsenui/js/angular/angular.js"></scrip>

でどうでしょうか。

投稿2017/07/24 08:15

grandcross_info

総合スコア130

ベストアンサー

AngularJS(バージョン1で想定します)であれば、MonacaIDE上でOnsen UI V2 JS Splitterでなく、Onsen UI V2 Angular 1 Splitterでプロジェクトを作成して、Monacaデバッガーで動かすと動作確認できたので、Onsen UI V2 Angular 1 Splitterでプロジェクトを作成して開発プロジェクトの土台とすると解決するかと思います。

投稿2017/07/23 22:01