Your SlideShare is downloading. ×
  • Like
第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 1,493 views
Published

 

Published in Engineering
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,493
On SlideShare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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