作ってみました

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

<?php
// AppKernel.php

public function registerBundles()
{
    // カーネルに追加
    return array(
        ...
        new Hshn\AngularBundle\HshnAngularBundle()
        ...
    );
}

設定

# config.yml
hshn_angular:
    template_cache:
        templates:
            # テンプレートキャッシュが"app"モジュールとして生成される
            app:
                # キャッシュを生成したいテンプレートが置いてあるディレクトリを指定する
                - @YourBundle/Resources/public/js
    assetic: ~

補足：指定したディレクトリからの相対パスが、キャッシュのキーになります

仮に指定したディレクトリ配下に２つのファイルがあったとすると

<!-- @YourBundle/Resouces/public/js/views/foo.html -->
foo

<!-- @YourBundle/Resouces/public/js/views/foo/bar.html -->
foo::bar

生成されるキャッシュはこんな感じになります

// 生成されるキャッシュファイル.js
angular.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のテンプレートで指定するだけです。

# layout.html.twig

{% javascripts filter="?closure"
  '@YourBundle/Resouces/js/angular.js'
  '@YourBundle/Resouces/js/app.js'
  ...
  '@ng_template_cache_app'
  ...
%}

{% endjavascripts %}

あとは$templateCacheの説明通りngIncludeやディレクティブのtemplateUrl等々でテンプレートのパスを指定して使えますよといった感じです

よかったら使ってみてくださいー