monaca開発メモ1
まずは、プロジェクト作成。
今回は「Onsen UI Tabbar」を選びました。
index.htmlに
<ons-tabbar var="tabbar">
の記載があり、タブバーになっています。
<ons-tabbar-item>
でそれぞれのタブが指定がされています。
「Home」にはnavigator.htmlが指定されており、
<ons-navigator title="Navigator" var="myNavigator" page="page1.html">
でナビゲーション(ページが親子関係を持つ)になっており、
親ページにpage1.htmlが呼び出されています。
「Onsen UI」の仕組みですが、まあ、ここまでは何となく分かります。
画面はマニュアルhttp://ja.onsen.io/guide/overview.html
とか見ながら、何とかなりそう。
で、問題はスクリプト。どう書くの??
で調べてみると、Onsen UIはAngularJS上で作られているらしい。
アングラ?ではなくて、アンギュラーって読むらしい。
という事で、AngularJSを調べてみる。
http://js.studio-kingdom.com/angularjs
まずは、こんな感じで、モジュールを作って、
var app = angular.module('myApp', ['onsen.directives']);
モジュールに対して、コントローラを作る。
app.controller('MyCtrl',function($scope){
$(function(){
$("#test1").html("Hello");
});
});
で、htmlで以下のようにして、ng-controllerでコントローラを関連付ける。
<div class="page-padding" ng-controller="MyCtrl">
<div id="test1">First Step</div>
</div>
モジュールは、
<body ng-app="myApp">
で。。と思ってたら、コントローラーが見つからないとかのエラー。
じゃあ、htmlに指定してみたら、今度はこんなエラー。
App Already Bootstrapped with this Element
どうも、angular.bootstrapで既に呼び出されているみたい。。
https://docs.angularjs.org/error/ng/btstrpd
で色々と見てると、index.htmlのスクリプトに、ons.bootstrap();
と言う記述があり、どうもこの中でangular.bootstrap()を呼び出している。
と言う事で、以下のように変更して、モジュール指定。
ons.bootstrap(['myApp']);
これでエラーがなくなり、スクリプトが動作しました!
なかなか情報がなく、ひとしきり悩みました。
あとは、「Onsen UI」、「AngularJS」、「jQuery」を活用して、
作って行けば(デバイス使わない物なら)よさそうです。