つくってみた
https://github.com/hshn/HshnAngularBundle
https://packagist.org/packages/hshn/angular-bundle
背景
Symfony2でAngularJSのテンプレートを使おうとするとJmikolaJsAssetsHelperBundleを使ってテンプレートのURL解決を行わなければならないし、httpリクエストもテンプレートの数だけ増えてなんか嫌だなと。
AngularJSには$templateCacheで事前にテンプレートをキャッシュする仕組みがあるし、それをgrunt-html2jsで事前に生成する人たちもいるしAsseticで自動生成すればいいんじゃね?といった動機です。
使い方
インストール
$ php composer.phar require hshn/angular-bundle:dev-master
// カーネルに追加
public function registerBundles()
{
return array(
...
new \Hshn\AngularBundle\HshnAngularBundle()
...
);
}
設定
hshn_angular:
template_cache:
modules:
# テンプレートキャッシュが"app"モジュールとして生成される
app:
targets:
# キャッシュを生成したいテンプレートが置いてあるディレクトリを指定する
- @YourBundle/Resources/public/js
assetic: ~
補足:指定したディレクトリからの相対パスが、キャッシュのキーになります
仮に指定したディレクトリ配下に2つのファイルがあったとすると
@YourBundle/Resouces/public/js/views/foo.htmlfoo
@YourBundle/Resouces/public/js/views/foo/bar.htmlfoo::bar
生成されるキャッシュはこんな感じになります
生成されるキャッシュファイル.jsangular.module('app') .run(['$templateCache', function ($templateCache) { $templateCache.put('view/foo.html', 'foo'); $templateCache.put('view/foo/bar.html', 'foo::bar'); }]);
このファイルをロードすれば、
app
モジュールをロードした状態でview/foo.html
とview/foo/bar.html
が使えるようになりますよ、といった感じです
テンプレートを使う
まずテンプレートキャッシュをロードします。
Asseticから@ng_template_cache_{モジュール名}
でロードできるようになっているので、Symfonyのテンプレートで指定するだけです。
{% javascripts filter="?closure"
'@YourBundle/Resouces/js/angular.js'
'@YourBundle/Resouces/js/app.js'
...
'@ng_template_cache_app'
...
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
あとは$templateCacheの説明通りngIncludeやディレクティブのtemplateUrl
等々でテンプレートのパスを指定して使えますよといった感じです
よかったら使ってみてくださいー
PR歓迎してます、英語力がゴミってるのでドキュメントの修正とか嬉しいです