せっかくなので、簡単にスマホっぽいUIを実現できるOnsenUIと、MVCモデルを簡単に実装できるAngularJSを使ってアプリを作ってみたいと思います。
プロジェクトを作成する
「Onsen UI最小限のテンプレート」を選択します。
プレビュー、または実機上でMonacaデバッガを起動すると殺風景なページが表示されるはずです。
AngularJSの機能を試す
さっそくAngularJSの強力な機能である双方向データバインディングを試します。
こんな感じのコードをpage1.htmlに追加してください。
<input type="text" class="text-input" ng-model="model_test">
<br>
{{model_test}}
これでテキストボックスに入力した文字がすぐ下に表示されます。
これだけで動的なページが作れてしまうという....恐るべしAngularJS!
controllerを使ってみる
AngularJSではMVCモデルでコードが簡単にかけます。
まずはMVCのC。ロジックを扱うControllerを追加してみます。
まず、index.htmlを修正
ons.bootstrap();
↓
var app = ons.bootstrap();
angularjsを扱うモジュールに"app"と名前を付けました。
深く考えずおまじないだと思ってください。
続いてjsファイルを追加
まずはフォルダを作ります。
www/js/controller/
さらにcontrollerの中にjsファイルを作ります
page1controller.js
中身はこんな感じ
app.controller('Page1Ctrl',function($scope){
$scope.msg= "message from controller.";
});
再度index.htmlに戻ってjsの読み込みを追加します。
<script src="js/controller/page1controller.js"></script>
仕上げにpage1.htmlを修正
<ons-page>
<div ng-controller="Page1Ctrl">
.
.
.
{{msg}}
</div>
</ons-page>
controllerで設定したmsgがView(html)で表示されました。