OnsenuiとAngularjsで簡単に動きのあるページがつくれる

なめらかなアニメーションとか色々やってくれる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をこんな感じで作成。

```js: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をすこし編集。

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

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

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

```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を作成

```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!`を表示させる例を示す。

処理側作成

```js:src/components/myApp/myApp.js
class MyApp {
  constructor() {
    this.welcome = 'Hello world!';
  }
}
MyApp.$inject = [];

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

表示側作成

```html: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作成

```scss:src/components/myApp/myApp.scss
my-app {
  .message {
    font-size: 28px;
    text-align: center;
    margin-top: 5em;
  }
}
```

##scssファイル

```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`が作成される。
ブラウザで確認すると、

<img width="320" alt="sample.png" src="https://qiita-image-store.s3.amazonaws.com/0/135781/cff5067c-860f-d01f-6524-0e417f091b84.png">


こんな感じになる。
動きのあるところは次回（[2. OnsenuiとAngularjsで簡単に動きのあるページがつくれる](http://qiita.com/s-hei/items/f101c6f7c2549907d892)）。