lopyearlab's diary

Cordova + ionic + AngularJSの備忘録

以下の内容

・開発環境から動作確認まで
・ビュー
・ボタンを表示して実行
・カメラ(ネイティブの機能：Cordovaプラグインを使用)

開発環境から動作確認まで

参考

http://ionicframework.com/getting-started/

始め方

npm install -g cordova ionic

※基本的にエラーが出たら、表示された通りにアップデート等を実行すると問題なく動作した

プロジェクト名「HelloWorld」でサイドメニューを使用

ionic start HelloWorld sidemenu

プロジェクトに移動し、プラットフォームを追加

cd HelloWorld
ionic platform add ios
ionic platform add android

ブラウザで開発

ionic serve

編集したものを保存すると自動的にリロード(LiveReload)。

iPhoneのシミュレーターで確認

ionic emulate ios

実機で確認

ionic run ios
ionic run android

※iOSが49%で止まるが、直接アプリを起動すると普通に使える

その他コマンドは「ionic」で確認

ビュー

参考

http://ionicframework.com/docs/components/

Bootstrapのようにclassを指定するとデザインが反映される仕組み

Sassで変更できる

例：ボタン

<button class="button button-block button-positive">
  Block Button
</button>

例：アイコン付きボタン

<button class="button icon-left ion-home">Home</button>

例：リスト

<ul class="list">
    <li class="item">
      ...
    </li>
</ul>

ボタンを表示して実行

先ほどのボタンの例を追加し、ng-click="hello()"をボタンに追加

www/templates/playlist.html

<ion-view title="Playlist">
  <ion-content class="has-header">
    <h1>Playlist</h1>

    <button class="button button-block button-positive" ng-click="hello()">
      Block Button
    </button>

  </ion-content>
</ion-view>

controllers.jsのcontrollerにhello = functionを追加

www/js/controllers.js

.controller('PlaylistCtrl', function($scope, $stateParams) {

  $scope.hello = function(){
    alert( "world" );
  };

})

AngularJSを使用せずに直接ボタンにonclickを記述しても動作する

<button class="button button-block button-positive" onclick="alert('HELLO')">
  Block Button
</button>

カメラ(ネイティブの機能：Cordovaプラグインを使用)

プロジェクトのディレクトリでカメラのプラグインを追加

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

カメラを使用

.controller('PlaylistCtrl', function($scope, $stateParams) {
  $scope.hello = function(){
    alert( "world" );
  
    navigator.camera.getPicture( function(imageData){
      alert(imageData);
    }, function(){
      alert("fail");
    });

  };
})

なお、動作環境は

iOS 6+

Android 4+(2.3は一部機能に制限あり)

lopyearlab's diary

tsd：TypeScriptの型定義ファイル管理

Cordova + ionic + AngularJS