アラフィフSEの日々

九州の片田舎に住む、おっさんSEの技術メモやら思った事を、適当に綴ります

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」を活用して、

作って行けば(デバイス使わない物なら)よさそうです。