これまでに書いたリサーチ系ポスト

・環境構築メモ (1) Gulp
・環境構築メモ (2) Grunt
・環境構築メモ (3) RequireJS
・環境構築メモ (4) Bower
・フレームワーク習得メモ (1) AngularJS
・フレームワーク習得メモ (2完) Ionic
・環境構築メモ (5完) Yeoman

これらをまとめるクライマックスです。

これまでに、Gulp, Gruntで自己流ワークフローを確立し、今までキャッチアップしそびれていたツールとして、Require, Bower, AngularJS を勉強してきました。

そして、これらを一式、きちんと動くように束ねたものが、
soohei/yeoman-angular-coffee-requirejs-seed
です。

Yeomanで、
yo angular –minsafe –coffee
して出来るテンプレートをベースに、AngularJSをRequireJSから始動するように変更し。
distのビルドプロセスにも、RequireJSのOptimizerを追加しました。

Gruntの処理への主な変更箇所は、
・wiredepを無効に
・useminでJSをconcatするのを無効に
などです

また、RequireJSでOptimizeする時に、JS内の変数名を書き換えられてしまうと、Angularが動かなくなってしまうので、
mangle: false
にして、JS内の変数名を保護しています。

RequireJSの処理としては、

・angularは、exportの記述が必要
・domready! を使う (!は意味がある)
・bower_compornents 内のコードを書き換えたくないので、一旦CDNは諦める。
※ optimizeでファイルを結合してしまうと、CDN読み込み前に、jQueryプラグインや、Angularの依存ファイルが読まれてしまい、エラーになる
※ jQuery依存のライブラリを一つ一つ、「define([‘jquery’], function($) { })」のように囲めば解決は出来る)
※ angular依存のライブラリを一つ一つ、「define([‘angular’], function(angular) {  })」のように囲めば解決は出来る)

となりました。

最後にIonicですが、

bower install ionic#1.0.0-beta.13 –save

して、

ionic: {
  exports: 'ionic'
}

ionicAngular: {
  deps: [
    'ionic'
    'angular'
    'angularAnimate'
    'angularSanitize'
    'uiRouter'
  ]
  exports: 'ionicAngular'
}

define [
  'angular'
  'ionic'
  'ionicAngular'
],

(angular) ->
  'use strict'
  return angular.module 'MyApp', ['ionic']

という感じで使えましたが、フレームワーク自体がバギーで、ドキュメント通りにやっても正しく動かないことがある。

具体的には、ion-nav-barが勝手にinvisibleになる。
・http://stackoverflow.com/questions/27460173/ng-include-with-ion-nav-bar-not-displaying
・http://forum.ionicframework.com/t/ionic-beta-1-0-0-navbar-not-show-on-screen/2346
・http://forum.ionicframework.com/t/ionic-beta-1-0-0-navbar-not-show-on-screen/2346

ionicを読み込んだ時点で、ウィンドウのスクロールが無効になり、
スクロールの可否をIonicに委ねる羽目になる。

というあたりで思考停止して、部分的な利用は難しそうだと思いました。

Ionicのエキスパートがいたら教えてください。(連絡先: @soohei, http://td-inc.jp/contact)