1. Angular-fullstack
!
ALT#1 2014/06/24

2. 自己紹介
名前 廣戸 裕大
Twitter about_hiroppy
スマブラ大好き
2

3. JavaScriptをみんなに使ってもらいたいパッションです
今回は紹介がメインです
3

4. AngularJSとは？
Googleが開発しているMVWフレームワーク
フロントエンドでのフレームワーク
HTMLに記述していくテンプレート型
双方向データバインディングのサポート
4

5. index.html
app.js
inputをいれると変わる
5

6. Angular-fullstack!!!!
6

7. なにかというと…
MEAN(MongoDB + Express.js + Angular.js +
Node.js)という構成のWebアプリケーション作
成をサポートするジェネレーター
7

8. つまり全てJavaScriptでかけるということ！！
Jade,Sass,CoffeeScriptも使える！
Karma(test),Passport(認証ミドルウェア)も入っ
ている！
Herokuにも対応している！
.gitignoreとかのこともしてくれている！
8

9. 構成
フロントエンドAngular.js(MVW)
バックエンドExpress.js(MVC)
MongoDB
9
APIを発行

10. viewはExpressとAngular一緒なのでこのようになる
なのでExpress側でしかviewは持たない
10

11. 導入方法
npm install -g generator-angular-fullstack
11

12. Yeomanとは?
Yeoman
yo 雛形作成ツール
Grunt タスクランナー
Bower パッケージマネージャ
12

13. Yeomanでの生成
$ yo angular-fullstack
これを実行しgrunt serveするだけで…
13

14. 14

15. Login,Sign up等がすでに実装されている
ディレクトリ構成もフロント、バックエンド必
要最低限作られる
クライアントとサーバのテストもすでに用意さ
れている
15

16. かんたん！
16

17. 最後に
もしJavaScriptに興味あってwebアプリケーショ
ン作りたいって場合はAngularjs-fullstack使って
みてもいいのではないのでしょうか・・・(つ
かってほしいなぁ♥)
generator-angular-fullstack
https://github.com/DaftMonk/generator-angular-
fullstack
17