Symfony2 - Bundle with AngularJS

Question

I am working on a project which is mostly based on Symfony2 and Twig-Templates. I do now want to write a new bundle based on AngularJS. That is, menu and navigation for most of the site still in php/Twig, but the user-list should be written in AngularJS. I have the AngularJS frontend up and running with a file structure that looks something like this:

app/
- js/
  - app.js
- partials/
  - users.html
  - user_detail.html
- index.html
bower_components/
...

For now, I just want to display it under a given route in Symfony2. Is there a way, to say that I do not want any Controller in Symfony for the Frontend - just static delivery?

What is a general reasonable approach for such an application? Most of the tutorials I found assume, that the whole site is written in Angular and not only one bundle.

Thank you for any hints!

Move your partials and js to the Symfony web directory and they will get served up statically. I have tried various approaches. I generally end up with bundle specific PartialsControllers to serve up partials located across multiple bundles. — Cerad
– Cerad, Commented May 1, 2014 at 12:16

qooplmao · Accepted Answer · 2014-05-04 23:35:03Z

I previously used the asoc/assetic-angular-js-bundle (GitHub) which, when used with an assetic filter config, meant all of the partials and the script were be combined into one file.

Their github page says to use the following in your twig template..

{% javascripts filter="angular"
    '@BundleName/Resources/views/aTemplate.html.ng'
    '@BundleName/Resources/views/fooTemplate.html.ng'
    '@BundleName/Resources/views/moarTemplates/*.html.ng'
    %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

But if you use..

// app/config/config.yml
assetic:
    filters:
        angular:
            apply_to: "\.ng$"
            resource: %kernel.root_dir%/../vendor/asoc/assetic-angular-js-bundle
                      /Asoc/AsseticAngularJsBundle/Resources/config/assetic.xml
                      // This is all one line
                      // Not sure why this was needed, I vaguely remember
                      // assetic not being able to find to config

Then you can just call your partials in your twig javascripts section like so..

{% javascripts
    '@BundleName/Resources/views/angular-app.js'
    '@BundleName/Resources/views/angular-controllers.js'
    '@BundleName/Resources/views/some-other-stuff.js'
    '@BundleName/Resources/views/aTemplate.html.ng'
    '@BundleName/Resources/views/fooTemplate.html.ng'
    '@BundleName/Resources/views/moarTemplates/*.html.ng'
    %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

Then I guess you could either include the above in the one twig view that you want it to show or you could include it in all of your templates (depending on how you would want to deal with script caching and what not) and just call it using the regular ng-view UserListController type tags.

Sorry if this has no relevance to what you asked. At the start of me writing this it made so much sense but how that I've looked at it so much it looks like I've just gone off on a complete tangent.

Collectives™ on Stack Overflow

Symfony2 - Bundle with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related