monacaでスマホアプリを作ろう #2

せっかくなので、簡単にスマホっぽい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)で表示されました。