やっとゆっくりブログ書く余裕ができてきたので詰んでた勉強会メモを復習しながらお片付けしていくことにする。5/25(誕生日!w)は、GTUG GirlsのYeomanの会に行ってきた。
第22回 GTUG Girls Meetup 「YEOMANおじさんと過ごすステキな夜」
Ajenda
Ajendaはこんな感じ。3の途中の、NewRouter動かすところくらいまでやった。
- YEOMANインストール
- WebAppジェネレータの利用
- Bootstrap/Angular1.4/NewRouterベースのTodoリスト作成
- karma/jasmineを使った単体テスト
Yeomanインストール
Yeomanのインストールはこの記事を参考にしながらやってたみたい。 http://albatrosary.hateblo.jp/entry/2014/03/23/105356
nodebrewとnode入れて、
$ npm install -g yo grunt-cli bower
して、ジェネレーターでwebappしてる時くらいにやっと合流!←遅刻魔
generator-webapp
ジェネレーター周りはこの記事を参考に。
http://albatrosary.hateblo.jp/entry/2014/07/14/115028
ジェネレーター使うにはまずインストールが必要。ほいで、yo webapp するとbootstrapにする?Modernizrにする?とか聞かれるので選ぶ。そんで、grunt serveすると、勝手に初期ページが開く。
$ npm install -g generator-webapp $ yo webapp $ grunt serve
ネットワークが遅かったのか、grunt serveするときにやたらgruntのタスクが足りないとかnpmのエラーが出て、なかなか実行できなかった。何回かbower installとnpm installして解決した。
generator-angular
Angularベースのtodoアプリを作るために準備していく。まず、Angularのサイトに行って、bowerのコマンドをコピペしてくるよ。
bower install angular#1.4.0-rc.2 --save
bower.jsonにangularのバージョンが記録されて、bower_components/ 内にもangularのディレクトリができる。grunt serve すると、のところにangular本体が差し込まれた。wiredepが使われている。
Component用のディレクトリを作る
app ディレクトリ下に components ディレクトリを作る。今回は、about, contact, homeっていうディレクトリを作って、htmlとjsをそれぞれ作ってった。
htmlをいじる
Angularだぜっていう宣言をする
<body ng-app="todos">
コンポーネントを表示する場所を作る
<div ng-viewport></div>
リンクをいじる
<li><a ng-link="home">Home</a></li> <li><a ng-link="about">About</a></li> <li><a ng-link="contact">Contact</a></li>
あとは、元々ジェネレーターで作ったひな形のhtmlに書かれていたheader〜footerの間のHTMLを削除して、home.htmlにコピペする。
angular-new-routerを使う
angular-new-routerはまだ開発サイクルに登録されてないので、以下の設定が必要だょ、とのこと。
"overrides": { "angular-new-router": { "main": "dist/router.es5.js" } }
上の設定を書いておくと、インストールできる(書いて無いと bower install してもそんなのねぇよ!って言われる)
bower install angular-new-router --save
今日は手打ちでやったけど、Controllerとかひな形を作ってくれるgenerator-angular もあるよ、今回やったのとはバージョンが違うので使えないけど…って言ってた。会社なんかで使うときは、ジェネレータをカスタマイズして他の開発者に提供したりする。コピペすれば済む話なので最近はYeomanどうなのという話があったりするけどって。
main.js にモジュールの読み込みを書く
(function () { 'use strict'; // ルーティングの定義をする function AppController () {} // angularにnew-routerを使うよっていう定義 angular.module('todos', [ // module name. ng-app="todos" in html. 'ngNewRouter', 'todos.home', 'todos.about', 'todos.contact', ]) .controller('AppController', [AppController]); // new-routerの定義 AppController.$routeConfig = [ { path: '/', redirectTo: '/home' }, { path: '/home', component: 'home' }, { path: '/about', component: 'about' }, { path: '/contact', component: 'contact' } ]; })();
grunt-injectorで開発効率をあげる
https://www.npmjs.com/package/grunt-injector
components/ 以下に作ったhome, contacts, about をコンポーネントとして自動的に差し込むためにgrunt-injectorを使う。
npm install grunt-injector --save-dev
Gruntの設定
Gruntfile.js のwiredepの下あたりにinjectorの設定を書く。
injector: { options: { // Task-specific options go here. transform: function(filePath) { filePath = filePath.replace('/app/', ''); return '<script src="' + filePath + '"></script>'; } }, js: { // Target-specific file lists and/or options go here. files: { '<%= config.app %>/index.html': ['<%= config.app %>/components/{,*/}*.js', '<%= config.app %>/service/{,*/}*.js'], } }, },
serveのタスクの中にinjectorを入れる。
grunt.task.run([ 'clean:server', 'wiredep', 'injector:js', 'concurrent:server', 'autoprefixer', 'connect:livereload', 'watch' ]);
htmlの中の、main.jsを読み込んでいる上当たりにinjectorでコンポーネントを差し込む場所を書く。grunt serveすると3つ分のコンポーネントが差し込まれる。
<!-- injector:js --> <!-- endinjector --> <!-- build:js({app,.tmp}) scripts/main.js --> <script src="scripts/main.js"></script> <!-- endbuild -->
各jsを書いていく
home.js, about.js, contact.jsにそれぞれControllerの定義を書いていく。
(function(){ 'use strict'; function HomeController() {} angular.module('todos.home', []) .controller('HomeController', HomeController); })();
jshintの設定を変える
このままだと実行した時に以下のようにangularないよ!って怒られるので…
line 9 col 3 'angular' is not defined.
.jshintrc にグローバル定義する
"globals" :{ "angular": true }
routerが動いているか確認してみる!
grunt serve すると、home.htmlの中のhtmlが表示されるよ。タブを操作すると、abooutとcontactに切り替わる。
まずはここまで
2時間ほどで、下準備が終了。TODOアプリを作る所までたどり着かなかったので、あとはGitHubに上がってるので勉強してね!とのこと。README.mdにだいたいやらなきゃいけないこと書いてくれてる。
https://github.com/albatrosary/Angular1.4oWebapp
いつもgruntだけでなんとかしてるのでYeoman触る機会が出来て良かった(((pq´ェ`*)