Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,725 views

Published on

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

第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

×