CODEWITHSUNDEEP
javascriptphpangularjssymfony
asPlankBridge
asPlankBridge

Reputation: 1082

Symfony2 - Bundle with AngularJS

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:

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!

Upvotes: 0

Views: 2855

Answers (1)

qooplmao
qooplmao

Reputation: 17759

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.

Upvotes: 3

Related Questions