Best Practice with AngularJS template locations in Symfony 2 with the new Angular Router?

Question

I am developing an AngularJS 1.4 Application within a Symfony2 Bundle. Symfony provides the "backend" (API) and Angular the frontend (of course).

I am using the new router and stick to the components driven folder approach suggested by several guides and best practice examples. But since I build my JavaScript with gulp and only include the complete Build-Files there are issues with Angular controllers not finding their templates.

I show you my solution, which I don't like:

(function () {
'use strict';
angular
    .module('myModule', ['ngNewRouter', 'myModule.dashboard'])
    .config(TemplateMapping)
    .controller('AppController', AppController);

/* @ngInject */
function AppController ($router) {
    $router.config([
        { path: '/', redirectTo: '/dashboard' },
        { path: '/dashboard', component: 'dashboard' }
    ]);
}

/* @ngInject */
function TemplateMapping($componentLoaderProvider) {
    $componentLoaderProvider.setTemplateMapping(function (name) {
        return {
            'dashboard': '/bundles/mybundle/templates/dashboard/dashboard.html'
        }[name];
    });
}
}());

I write my Angular Code in src/myBundle/Resources/js/ and gulp puts the final Build to src/myBundle/Resources/public/ which is then available in the Twig Template that holds the Angular app.

What I am doing right now, is basically putting the templates of my components not where they belong (that would be src/myBundle/Resources/js/components/dashboard/ for the dashboard example) but into src/myBundle/Resources/public/templates.

I have to tell the router that the template is located elsewhere through $componentLoaderProvider.setTemplateMapping().

I have two Questions:

Could I solve this template location problem in a more elegant way?
Can I tell the router directly (in the AppController) where the template is?

Kévin Dunglas · Accepted Answer · 2015-07-17T07:15:53.670

The cool thing with API based architectures is that you can uncouple the backend app (the API) from the frontend (the AngularJS app).

I recommend to create two separate applications for frontend and backend. Each application should be in its own Git repository and can eventually be hosted on its own server:

The Symfony application follows Symfony Best Practices and exposes only a REST API. It holds all the business logic. It has no template (you can remove Twig). Data will be preferably exposed in JSON.
The AngularJS application relies on all frontend tools you want (Gulp, Yeoman...) and consumed the API. It manages the presentation and contains only "assets" (a static index.html file, JavaScript files, CSS stylesheets, images...).

The API is the contract between the two side and they can evolve separately. Maintenance is eased and the coupling is tight. The frontend app can even be hosted directly on a CDN such as Amazon CloudFront or GitHub pages for maximum performance.

I've written an article detailing this approach and presenting some tools I've built. It uses Symfony and AngularJS.

If you still want to have a single application:

put the AngularJS app in a non-public directory such as app/frontend
configure the Gulp script to write dist files in web/
be careful to CSRF attacks (take a look at my DunglasAngularCsrfBundle)

Thanks for your thoughts. While this is true in certain scenarios where your backend API (e.g. symfony) and your frontend application (e.g. AngularJS) are two independen things. In the project this quesion araised in, we started out with an Angular application as a part of a symfony application. But we already reconcidered dropping all Views rendered by symfony in favor of Angular so maybe your approach becomes more of an option for us. But in that case the whole question of Angular templating in Symfony does not raise in the first place. :) — Daniel, Jul 17 '15 at 05:36
I've edited the question to add an example with a single app. — Kévin Dunglas, Jul 19 '15 at 12:45

score 2 · Answer 2 · answered Mar 30 '16 at 23:05

The best approach as Kévin mentioned is to separate your front-end and back-end in a way that even if you change the back-end to another technology you don't need to change your front-end.

There are also 2 git projects that can help you to have a nicer app.

1) FOSJsRoutingBundle

https://github.com/FriendsOfSymfony/FOSJsRoutingBundle Which allow you to use your Symfony routing in your JavaScript code

2) angular-schema-form

https://github.com/json-schema-form/angular-schema-form Which is a dynamic form generator. It creates and validates a form from a JSON schema.

So what I did was to create a Angular Schema Form Serializer in Symfony to convert a Symfony form to a Jason schema which can be used by angular-schema-form to generate my forms dynamically. In this case I don't need to implement form in html. Even if I change the API I just need to provide the same Jason schema for my forms.

score 0 · Answer 3 · answered Sep 05 '17 at 19:16

The best approach is to separate completely your Angular app from Symfony backend. But if you want to use the Angular in some very little part of your legacy app, you can pass your baseURL to your component, for ex. :

<yourComponent baseurl="{{ app.request.scheme ~ '://' ~ 
app.request.httpHost ~ app.request.basePath }}"></yourComponent>

and then use it in your templateUrl function

    templateUrl: function($attrs) {
                return $attrs.baseurl + 'templats/yourComponent.template.html';
            }

Best Practice with AngularJS template locations in Symfony 2 with the new Angular Router?

3 Answers3