第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja

2,543 views

Published on

Published in: Engineering
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,543
On SlideShare
0
From Embeds
0
Number of Embeds
1,454
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja

  1. 1. Symfony2 meets AngularJS 19th April 2014 Symfony勉強会 #9 LT @77web
  2. 2. AngularJS • JavaScriptのMVCフレームワー クの一つ • PHPでたとえるとjQueryが PEARで、Angularは cake,symfony,zend frameworkみたいな感じ
  3. 3. Symfony2のプロジェクトに 導入してみます • 公式サイトからダウンロードしてsrc/Acme/ DemoBundle/Resources/public/jsに入れる • CDN利用 • バンドル利用
 https://packagist.org/search/?tags=angular
  4. 4. angular.jsの基本的な書き方 はチュートリアル等を各自見 てもらうとして…
  5. 5. 例その1: 表示を変化させてみる • ソースコード https://github.com/77web/ sfstudy_ja_lt_symfony_meets_angular/ commit/ 12a685e419e4293217130cc4234c15d86b0 b42f4
  6. 6. 例その2: REST APIをコールして結果を表示してみる • ソースコード https://github.com/77web/ sfstudy_ja_lt_symfony_meets_angular/ commit/ 9f3b2468ea40ff6f336cdd47f7d9e78f73e672 c1 • デモなのでコントローラを自作しましたがREST APIをたくさん作るときはFOSRestBundleを使う と便利です
  7. 7. 例その3: フォームを送信してみる • ソースコード https://github.com/77web/ sfstudy_ja_lt_symfony_meets_angular/commit/ 3c43bcda68c54989d7a74dfa883249e8ecd310 0f • デモなのでフォームもSymfony側から出しましたが、 実際はどんなフォームHTMLでもng-modelを適切に 足せば動作する(作り方次第では SymfonyComponentFormを回避することもでき る)
  8. 8. (おまけ) Symfony2でangular.jsを使うときの TIPS & TRICKS • twigと変数表記が同じ(変数hogeを表すのは{{ hoge }})なので{% verbatim %}と{% endverbatim %}で囲う。
  9. 9. ありがとうございました。 ! [デモで使用したコード] https://github.com/77web/ sfstudy_ja_lt_symfony_meets_angular

×