SlideShare a Scribd company logo
Symfony2
meets
AngularJS
19th April 2014
Symfony勉強会 #9 LT
@77web
AngularJS
• JavaScriptのMVCフレームワー
クの一つ
• PHPでたとえるとjQueryが
PEARで、Angularは
cake,symfony,zend
frameworkみたいな感じ
Symfony2のプロジェクトに
導入してみます
• 公式サイトからダウンロードしてsrc/Acme/
DemoBundle/Resources/public/jsに入れる
• CDN利用
• バンドル利用

https://packagist.org/search/?tags=angular
angular.jsの基本的な書き方
はチュートリアル等を各自見
てもらうとして…
例その1:
表示を変化させてみる
• ソースコード https://github.com/77web/
sfstudy_ja_lt_symfony_meets_angular/
commit/
12a685e419e4293217130cc4234c15d86b0
b42f4
例その2:
REST APIをコールして結果を表示してみる
• ソースコード https://github.com/77web/
sfstudy_ja_lt_symfony_meets_angular/
commit/
9f3b2468ea40ff6f336cdd47f7d9e78f73e672
c1
• デモなのでコントローラを自作しましたがREST
APIをたくさん作るときはFOSRestBundleを使う
と便利です
例その3:
フォームを送信してみる
• ソースコード https://github.com/77web/
sfstudy_ja_lt_symfony_meets_angular/commit/
3c43bcda68c54989d7a74dfa883249e8ecd310
0f
• デモなのでフォームもSymfony側から出しましたが、
実際はどんなフォームHTMLでもng-modelを適切に
足せば動作する(作り方次第では
SymfonyComponentFormを回避することもでき
る)
(おまけ)
Symfony2でangular.jsを使うときの
TIPS & TRICKS
• twigと変数表記が同じ(変数hogeを表すのは{{
hoge }})なので{% verbatim %}と{% endverbatim
%}で囲う。
ありがとうございました。
!
[デモで使用したコード]
https://github.com/77web/
sfstudy_ja_lt_symfony_meets_angular

More Related Content

PDF
LightNode - Micro RPC/REST Framework
PPTX
Angular2実践入門
PDF
【PlayFab】UnityAdsのリワード広告を統合する方法
PDF
Angular 4がやってくる!? 新機能ダイジェスト
PDF
VSCode Conference Japan 2021 kyusque
PDF
RespClient - Minimal Redis Client for PowerShell
PDF
クリエイティブの視点から探るAngular 2の可能性
PDF
Bicep + VS Code で楽々Azure Deploy
LightNode - Micro RPC/REST Framework
Angular2実践入門
【PlayFab】UnityAdsのリワード広告を統合する方法
Angular 4がやってくる!? 新機能ダイジェスト
VSCode Conference Japan 2021 kyusque
RespClient - Minimal Redis Client for PowerShell
クリエイティブの視点から探るAngular 2の可能性
Bicep + VS Code で楽々Azure Deploy

What's hot (20)

PDF
Swift勉強会
PDF
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
PDF
Isomorphic web development with scala and scala.js
PDF
The History of LINQ
PDF
Jsug spring bootコードリーディング 接触篇 a contact
PDF
Directiveで実現できたこと
PDF
翻訳から始めるVue.js 入門
PPTX
Type scriptmemo
PPTX
フレームワーク品評会 Ruby on Rails #crossjp
PDF
EC2の天井を超える
PDF
Riot + generator で始める新しいデータバインディング
PPTX
20191003 classi night-04
PDF
Reactを使ったVR環境
PDF
Mix and Match / Swift and Objective-C
PPTX
10分でわかるOpenAPI V3
PDF
Ember コミュニティとわたし
PDF
How to Make Own Framework built on OWIN
PDF
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
KEY
capybara で快適なテスト生活を
PDF
Objective-Cプログラマのためのswift導入法
Swift勉強会
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
Isomorphic web development with scala and scala.js
The History of LINQ
Jsug spring bootコードリーディング 接触篇 a contact
Directiveで実現できたこと
翻訳から始めるVue.js 入門
Type scriptmemo
フレームワーク品評会 Ruby on Rails #crossjp
EC2の天井を超える
Riot + generator で始める新しいデータバインディング
20191003 classi night-04
Reactを使ったVR環境
Mix and Match / Swift and Objective-C
10分でわかるOpenAPI V3
Ember コミュニティとわたし
How to Make Own Framework built on OWIN
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
capybara で快適なテスト生活を
Objective-Cプログラマのためのswift導入法
Ad

Viewers also liked (6)

PDF
Symfony Deployment with Capifony #symfony_ja
PDF
Symfony 2.5について
PDF
VagrantでSymfony開発
PDF
A Deep Dive into JSON-LD and Hydra
PDF
Symfony勉強会#9 form
PDF
管理画面のアクセスコントロール
Symfony Deployment with Capifony #symfony_ja
Symfony 2.5について
VagrantでSymfony開発
A Deep Dive into JSON-LD and Hydra
Symfony勉強会#9 form
管理画面のアクセスコントロール
Ad

Similar to 第9回Symfony勉強会LT Symfony2 meets AngularJS #symfony_ja (20)

PPTX
AngularJSを触ってみた
PDF
俺とAngular JS 2
PDF
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
PDF
ngJapan報告会
PPTX
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン
PPTX
20161125 米田 angular_jsを触ってみた
PDF
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
PDF
AngularJSについて
PDF
AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)
PDF
20140823 LL diver Angular.js で構築した note に関して
ODP
AngularJSとの危険な関係 by Mario Heiderich - CODE BLUE 2015
PDF
AngularJS で ハイスピードSI
PPT
symfony 1.2を支えるサブフレームワーク
PPTX
Our Track to Modern Angular
PDF
Symfony2 チュートリアル イントロダクション osc 2011 nagoya
PDF
Angular js meets cakephp at cloud on the beach 2014 前夜祭
PDF
日本Symfonyユーザ会によるSymfony2 ワークショップ
PPT
20090415 すばらしきSymfonyの世界へようこそ
PPTX
Let’s angular js!!
AngularJSを触ってみた
俺とAngular JS 2
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
ngJapan報告会
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン
20161125 米田 angular_jsを触ってみた
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
AngularJSについて
AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)
20140823 LL diver Angular.js で構築した note に関して
AngularJSとの危険な関係 by Mario Heiderich - CODE BLUE 2015
AngularJS で ハイスピードSI
symfony 1.2を支えるサブフレームワーク
Our Track to Modern Angular
Symfony2 チュートリアル イントロダクション osc 2011 nagoya
Angular js meets cakephp at cloud on the beach 2014 前夜祭
日本Symfonyユーザ会によるSymfony2 ワークショップ
20090415 すばらしきSymfonyの世界へようこそ
Let’s angular js!!

More from 77web (9)

PDF
最近のPHP事情とNagoya.phpへのお誘い #ngk2018b
PDF
すばやく実装するための戦略とテクニック
PPTX
テスト実行速度を改善してお金をかけずに開発スピードを爆速にする
PPTX
ズンドコキヨシon Workflower
PDF
Formとは何か?〜例えば、Symfony\Component\Formを避ける〜
PPTX
CoderDojo Nagoyaの取り組みについて at Scratch day 2015 Aichi 3分間トーク
PPTX
Scratch day 2015 Aichi プログラミングバトル by CoderDojo Nagoya
PPTX
こういうデータ、どこに保存してますか? #nagoyaphp
PPTX
まだ技術ブログを始めてないPHPerのあなたへ。PHPカンファレンス関西2013 LT
最近のPHP事情とNagoya.phpへのお誘い #ngk2018b
すばやく実装するための戦略とテクニック
テスト実行速度を改善してお金をかけずに開発スピードを爆速にする
ズンドコキヨシon Workflower
Formとは何か?〜例えば、Symfony\Component\Formを避ける〜
CoderDojo Nagoyaの取り組みについて at Scratch day 2015 Aichi 3分間トーク
Scratch day 2015 Aichi プログラミングバトル by CoderDojo Nagoya
こういうデータ、どこに保存してますか? #nagoyaphp
まだ技術ブログを始めてないPHPerのあなたへ。PHPカンファレンス関西2013 LT

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