なめらかなアニメーションとか色々やってくれる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で簡単に動きのあるページがつくれる）。