Ionic Frameworkを試す

インストール

npm install -g generator-ionic

雛形生成

サンプルを試すためのフォルダ(ionic-test)を作って移動し、yeomanで雛形のアプリケーションを作成する

yo ionic test

今回はCordovaプラグインは全て外し、Tabsのサンプルアプリを選択。

動作確認

grunt serveすればブラウザが起動してサンプルアプリの動作を確認できる

タブ追加

SampleFormというタブを追加するために./ionic-test/www/scripts内のapp.jsに以下を追加

www/scripts/app.js

.state('tab.sampleform', {
  url: '/sampleform',
  views: {
    'tab-sampleform': {
      templateUrl: 'templates/sampleform.html',
      controller: 'SampleformCtrl'
    }
  }
})

次に./ionic-test/www/scripts/controllers.jsに書きを追加

www/scripts/controllers.js

.controller('SampleformCtrl', function($scope){
})

次にテンプレートファイルを作る。入力フォームのサンプルを作りたいけど、今回はまずタブだけを追加するのでpタグだけを表示させる。

www/templates/tab-sampleform.html

<ion-view title="Sampleform">
  <ion-content class="has-header padding">
    <p>Sampleform test</p>
  </ion-content>
</ion-view> 

最後に./ionic-test/www/templates/tabs.htmlに書きを追加

www/templates/tab.html

  <!-- About Tab -->
  <ion-tab title="Sampleform" icon="icon ion-edit" href="#/tab/sampleform">
    <ion-nav-view name="tab-sampleform"></ion-nav-view>
  </ion-tab>

これで新しいタブが表示される。これから入力フォームを作る予定。

疑問

一旦 grunt serve をとめてもう一度 grunt serve をはしらせると何故かアプリケーションが初期化されて作ったファイルが消えてしまうので調査中。

自己解決
Gruntfile.jsの128行目をコメントアウトすることで解決した。

Gruntfile.js

// Empties folders to start fresh
clean: {
  dist: {
    files: [{
      dot: true,
      src: [
        '.tmp',
        // 'www/*',  ←ここをコメントアウト
        '!www/.git*'
      ]
    }]
  },
  server: '.tmp'
},