1. Symfony2
meets
AngularJS
19th April 2014
Symfony勉強会 #9 LT
@77web

2. AngularJS
• JavaScriptのMVCフレームワー
クの一つ
• PHPでたとえるとjQueryが
PEARで、Angularは
cake,symfony,zend
frameworkみたいな感じ

3. Symfony2のプロジェクトに
導入してみます
• 公式サイトからダウンロードしてsrc/Acme/
DemoBundle/Resources/public/jsに入れる
• CDN利用
• バンドル利用
https://packagist.org/search/?tags=angular

4. angular.jsの基本的な書き方
はチュートリアル等を各自見
てもらうとして…

5. 例その1:
表示を変化させてみる
• ソースコード https://github.com/77web/
sfstudy_ja_lt_symfony_meets_angular/
commit/
12a685e419e4293217130cc4234c15d86b0
b42f4

6. 例その2:
REST APIをコールして結果を表示してみる
• ソースコード https://github.com/77web/
sfstudy_ja_lt_symfony_meets_angular/
commit/
9f3b2468ea40ff6f336cdd47f7d9e78f73e672
c1
• デモなのでコントローラを自作しましたがREST
APIをたくさん作るときはFOSRestBundleを使う
と便利です

7. 例その3:
フォームを送信してみる
• ソースコード https://github.com/77web/
sfstudy_ja_lt_symfony_meets_angular/commit/
3c43bcda68c54989d7a74dfa883249e8ecd310
0f
• デモなのでフォームもSymfony側から出しましたが、
実際はどんなフォームHTMLでもng-modelを適切に
足せば動作する（作り方次第では
SymfonyComponentFormを回避することもでき
る）

8. （おまけ）
Symfony2でangular.jsを使うときの
TIPS & TRICKS
• twigと変数表記が同じ(変数hogeを表すのは{{
hoge }})なので{% verbatim %}と{% endverbatim
%}で囲う。

9. ありがとうございました。
!
[デモで使用したコード]
https://github.com/77web/
sfstudy_ja_lt_symfony_meets_angular