![API Blueprint
# GET /users/
+ Response 200 (application/json)
+ Body
{"status": "ok", "users": [
{
"userId": 111,
"name": "テスト太郎"
},
{
"userId": 222,
"name": "テスト二郎"
}
]}
8
って
markdownで
書くと](https://image.slidesharecdn.com/angularjssi-150907090118-lva1-app6891/85/AngularJS-SI-8-320.jpg)
![gulp
16
yeomanが?
生成した数々の
gulp?le.js?
（の呪文で）
'use strict';
var gulp = require('gulp');
var wrench = require('wrench');
wrench.readdirSyncRecursive('./
gulp').?lter(function(?le) {
return (/.(js?co?ee)$/i).test(?le);
}).map(function(?le) {
require('./gulp/' + ?le);
});
gulp.task('default', ['clean'], function ()
{
gulp.start('build');
});](https://image.slidesharecdn.com/angularjssi-150907090118-lva1-app6891/85/AngularJS-SI-16-320.jpg)
![gulp
17
$ gulp serve
Webサーバ起動
ブラウザ起動
ファイル保存すれ
ば自動リロード
$ gulp serve
[19:45:49] Using gulp?le /yourapp/
gulp?le.js
[19:45:50] Starting 'watch'...
[19:45:50] Finished 'watch' after 46 ms
[19:45:50] Starting 'serve'...
[19:45:50] Finished 'serve' after 178 ms
[BS] [BrowserSync SPA] Running...
[BS] Access URLs:
--------------------------------------
Local: http://localhost:3003/
External: http://192.168.1.13:3003/
--------------------------------------
UI: http://localhost:3004
UI External: http://192.168.1.13:3004
--------------------------------------](https://image.slidesharecdn.com/angularjssi-150907090118-lva1-app6891/85/AngularJS-SI-17-320.jpg)
More Related Content
What's hot (20)
Viewers also liked (14)
Similar to AngularJS て? ハイスヒ?ート?SI (20)
![[出張！雲勉 in Tokyo] Swagger で簡単APIドキュメント作成](https://cdn.slidesharecdn.com/ss_thumbnails/random-160831072101-thumbnail.jpg?width=560&fit=bounds)
AngularJS て? ハイスヒ?ート?SI
- 2. アジェンダ ? AngularJSの簡単な紹介 ? 開発環境 ? ソース、ソース、ソース！ 2
- 4. ? Google製のフルスタックフレームワーク ? HTMLにテンプレート書いてごりごり ? 双方向のデータバインディング ? 2.0がもうすぐ出るけど別物注意? （今日は1系のはなし） 4
- 5. 開発環境 5
- 7. ? API BlueprintでAPI仕様書いて ? Yeomanでプロジェクト作って ? gulpでserveして ? AngularJSでコーディング 7
- 8. API Blueprint # GET /users/ + Response 200 (application/json) + Body {"status": "ok", "users": [ { "userId": 111, "name": "テスト太郎" }, { "userId": 222, "name": "テスト二郎" } ]} 8 って markdownで 書くと
- 9. API Blueprint 9 $ aglio -p 2999 -i api.md ?server で実際に動く！ ? POSTなども 勿論OK
- 12. あっ??? 12
- 14. gulp 14 ? Saasのコンパイルとか ? *.jsファイル群の圧縮とかminifyとか ? e2eテストの実行とか ? ブラウズ用サーバの起動と自動リロードとか
- 15. ? Saasのコンパイルとか ? *.jsファイル群の圧縮とかminifyとか ? テストの実行とか ? ブラウズ用サーバの起動と自動リロードとか gulp 15 近年のフロントエンド開発の 面倒くさいことを すべて引き受けてくれる タスクランナー
- 16. gulp 16 yeomanが? 生成した数々の gulp?le.js? （の呪文で） 'use strict'; var gulp = require('gulp'); var wrench = require('wrench'); wrench.readdirSyncRecursive('./ gulp').?lter(function(?le) { return (/.(js?co?ee)$/i).test(?le); }).map(function(?le) { require('./gulp/' + ?le); }); gulp.task('default', ['clean'], function () { gulp.start('build'); });
- 17. gulp 17 $ gulp serve Webサーバ起動 ブラウザ起動 ファイル保存すれ ば自動リロード $ gulp serve [19:45:49] Using gulp?le /yourapp/ gulp?le.js [19:45:50] Starting 'watch'... [19:45:50] Finished 'watch' after 46 ms [19:45:50] Starting 'serve'... [19:45:50] Finished 'serve' after 178 ms [BS] [BrowserSync SPA] Running... [BS] Access URLs: -------------------------------------- Local: http://localhost:3003/ External: http://192.168.1.13:3003/ -------------------------------------- UI: http://localhost:3004 UI External: http://192.168.1.13:3004 --------------------------------------
- 19. ようやく り着いた 19
- 20. ? Google製のフルスタックフレームワーク ? HTMLにテンプレート書いてごりごり ? 双方向のデータバインディング ? 2.0がもうすぐ出るけど別物注意? （今日は1系のはなし） 20 再度おさらい
- 24. HTMLに テンプレート書いてごりごり 24 <ul> <li ng-repeat="todo in todoList.todos"> <input type="checkbox" ng- model="todo.done"> <span class="done- {{todo.done}}">{{todo.text}}</span> </li> </ul> ng-repeatで ループしたり
- 28. 例えば： 数値のカンマ区切り 28 <p>値: {{val ? number}}</p>
- 29. 例えば： 日付の書式変換(?lter) 29 <p>予約は {{ createDate ? date: yyyy/MM/dd'}} です</p>
- 30. 例えば： 文字通りフィルタリングも出来る 30 <tr ng-repeat="friend in friends ? ?lter:'太郎'"> orderByとかlimitとかも勿論ある
- 32. 例えば： Selectの選択肢が特定のものなら、必須 32 ng-requiredが? 式を評価できるから? これだけでOK <input type="text" ng-model= cnt.inputparam" ng-required="cnt.selectA === 'A' ?? cnt.selectA === 'B'">
- 36. ? 色々deplicatedなAPIもあるけれど? 移行しなくても死にはしない ? パフォーマンスも1.4系は随分まし ? Yeomanも1.4選べば? 対応した雛形を作ってくれるよ 36 今後混乱するかも
- 38. というわけで 38
- 39. ? API Blueprint ? gulp ? AngularJS 39 この組み合わせで 慣れればかなりのスピードで UIを作りこむことが可能
- 41. それはともかく 41
- 44. これは（みんなの） 宿題 44
- 45. ありがとうございました 45