なめらかなアニメーションとか色々やってくれるonsenuiと、
データバインディングとか色々やってくれるangularで、
ぬるっとwebページがつくれたのでその過程をメモ。

onseuiは1.3.7
angularは1.5.8を使用

導入

npmコマンドが使えれば大丈夫。
node.jsインストールすれば使えるようになる。

まずは、プロジェクトのディレクトリで以下を実行。

npm init
npm install -S onsenui@1.3.7 angular@1.5.8
npm install -D gulp gulp-sass gulp-plumber gulp-notify vinyl-source-stream gulp-streamify gulp-uglify browserify babelify babel-preset-es2015
mkdir lib lib/onsenui lib/angular src dist src/js src/sass dist/js dist/css src/components src/components/myApp
cp -r ./node_modules/onsenui/css ./lib/onsenui
cp -r ./node_modules/onsenui/js ./lib/onsenui
cp -r ./node_modules/onsenui/stylus ./lib/onsenui
cp -r ./node_modules/angular/angular.min.js ./lib/angular

コンパイルとかを楽にするためgulpfileをこんな感じで作成。

gulpfile.js

var gulp = require('gulp');
var browserify = require('browserify');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var babelify = require('babelify');
var plumber = require('gulp-plumber');
var streamify = require('gulp-streamify');
var notify  = require('gulp-notify');
var source = require('vinyl-source-stream');

var paths = {
  srcScss: './src/sass',
  srcJs: './src/js',
  distScss: './dist/css',
  distJs: './dist/js',
};

//sassをコンパイル
gulp.task('sass', function() {
  gulp.src(paths.srcScss + '/*.scss')
    .pipe(plumber({
      errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(sass( {
      outputStyle: 'compressed',
    }))
    .pipe(gulp.dest(paths.distScss))
    .pipe(notify({
      title: 'Sass task successed',
      message: new Date(),
    }));
});

// app.jsのコンパイル
gulp.task('js-app', function() {
  browserify(paths.srcJs + '/app.js', {debug: true})
    .transform(babelify, {presets: ['es2015']})
    .bundle()
    .on('error', function (err) {
      notify.onError('Error: <%= error.message %>')
      .apply(this, Array.prototype.slice.call(arguments));
      this.emit('end');
    })
    .pipe(source('app.js'))
    .pipe(streamify(uglify()))
    .pipe(gulp.dest(paths.distJs))
    .pipe(notify({
      title: 'Browserify task successed',
      message: new Date(),
    }));
});

// watchタスク作成
gulp.task('watch-sass', ['sass'], function() {
  gulp.watch('./src/**/*.scss', ['sass']);
});
gulp.task('watch-js-app', ['js-app'], function() {
  gulp.watch('./src/**/*.js', ['js-app']);
});

で、package.jsonをすこし編集。

pacage.json

{
// 略
  "scripts": {
    "watch-sass": "./node_modules/.bin/gulp watch-sass",
    "watch-js-app": "./node_modules/.bin/gulp watch-js-app"
  },
// 略
}

表示する

環境はできたので、表示するとこまで。

基本構成

プロジェクトディレクトリ直下にindex.htmlを作成

index.html

<!DOCTYPE html>
<html lang="ja" ng-app="app">
  <head>
    <meta charset="utf-8">
    <title>onsenui with angularjs</title>
    <link rel="stylesheet" href="/lib/onsenui/css/onsenui.css"/>
    <link rel="stylesheet" href="/lib/onsenui/css/onsen-css-components.css"/>
    <link rel="stylesheet" href="/dist/css/app.css"/>
  </head>
  <body>
    <my-app></my-app>
    <script src="/lib/angular/angular.min.js"></script>
    <script src="/lib/onsenui/js/onsenui.min.js"></script>
    <script src="/dist/js/app.js"></script>
  </body>
</html>

続いて、app.jsを作成

src/js/app.js

import myApp from '../components/myApp/myApp';

(() => {

  // appモジュールを定義する
  const app = angular.module('app', ['onsen']);

  // componentの定義
  app.component('myApp', myApp);

})();

コンポーネント`<my-app>`の作成

angularでいろいろするのは、$scopeに直接とか、controllerAsとかあるけどコンポーネントで書くのがいいらしい。
今回は、Hello world!を表示させる例を示す。

処理側作成

src/components/myApp/myApp.js

class MyApp {
  constructor() {
    this.welcome = 'Hello world!';
  }
}
MyApp.$inject = [];

export default {
  templateUrl: './src/components/myApp/myApp.html',
  controller: MyApp,
};

表示側作成

src/components/myApp/myApp.html

<ons-navigator var="myNavigator" page="index.html"></ons-navigator>
<ons-template id="index.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">index.html</div>
    </ons-toolbar>
    <div class="message">
      {{$ctrl.welcome}}
    </div>
  </ons-page>
</ons-template>

対応するsass作成

src/components/myApp/myApp.scss

my-app {
  .message {
    font-size: 28px;
    text-align: center;
    margin-top: 5em;
  }
}

scssファイル

src/sass/app.scss

@import "./../components/myApp/myApp.scss";

いざ表示

npm run watch-js-app
を実行するとdist/js/app.jsが作成される。
npm run watch-sass
を実行するとdist/css/app.cssが作成される。
ブラウザで確認すると、

こんな感じになる。
動きのあるところは次回（2. OnsenuiとAngularjsで簡単に動きのあるページがつくれる）。