Integrating AngularJS in Symfony APP

Question

Here i was i have :

A RESTful Symfony API that i created with few bundles
A front AngularJS that i have in the web repository

Now here is a sample of my routing file :

 $routeProvider.
  when('/liste-produits', {
    templateUrl: '../templates/list-products.html',
    controller: 'ProductListCtrl'
  }).
  otherwise({
    redirectTo: '/'
  });

The fact that i have to use "../". Because otherwise it won't work in dev environnement (app_dev.php). And of course by the time i will post it in production (app.php) i won't need to add this "../"

Do you guys understand my problem ?

Since i can get assetic from Symfony work in the routing file.

How can i solve this ?

If you have a web/templates directory then there will be no problems. If you are trying to store your templates outside of the web directory then yep, no fun at all. So don't do that for angular. — Cerad
– Cerad, Commented Apr 17, 2015 at 19:39
@Cerad i am already putting everything related to angularJS (js and templates) in the web directory but this doesnt work. When i'm using app_dev.php i must use ../ How did you manage to work with this ? — julio
– julio, Commented Apr 17, 2015 at 19:57
app_dev should have nothing to do with angular templates. Your server should be setup such that if a file exists under web then the file gets delivered. It's only when there is no file that app_dev.php will get invoked. What sort of web server are you using? — Cerad
– Cerad, Commented Apr 17, 2015 at 20:00
I'm using Wamp (so apache 2.4) on windows. Tell me if i'm wrong but in routing.js , templates url are relative to the current url and since in dev there is a web/app_dev.php/ instead of web/ (app.php rewritten) so when i'm in dev i should you ../ to be back in the web directory — julio
– julio, Commented Apr 17, 2015 at 20:08
Your are wrong (you asked me to tell you). I am assuming you are using the standard .htaccess that come with Symfony. Get rid of any prefixes in your template path: templateUrl: 'templates/list-products.html', Now press F12 in your browser, refresh then look at the network tab. That will tell you exactly which file the browser is attempting to load. Unless you have adjusted your base href element, it should be something like: localhost/8080/templates/list-products.html — Cerad
– Cerad, Commented Apr 17, 2015 at 20:13

Community · Accepted Answer · 2017-05-23 12:00:25Z

2

There is an approach, where you define a global variable in your base twig file: Symfony 2:image paths in javascript file with assetic which you can in turn use in e.g. AngularJS.

There is also a bundle called FOSJsRoutingBundle, it sort of exposes your routes to the client and thus javascript. That might be interesting for you.

However there is another option; - I have personally used the approach posted by Rein Baarsma with the twig file and then cached the resulting javascript.

It's fairly simple to write a request listener that renders the twig file to a javascript file once a day or whenever the javascript file is deleted. I used the same approach with the stylesheets for a project with daily changing colors. If you do not cache it, the browser will revisit the route returning the javascript on each page and rerender the javascript file, which adds a lot of overhead.

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Apr 18, 2015 at 8:56

Marcel Burkhard

3,5332 gold badges32 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

julio Over a year ago

I'm sorry but what do you mean by "exposing routes" ?

Marcel Burkhard Over a year ago

It will make them available to javascript, so you can generate URLs to controller actions et cetera. Sort of like having the twig functions asset and path available in javascript.

Rein Baarsma · Accepted Answer · 2015-04-17 17:32:45Z

0

You could simply make a Symfony Controller with a view on a js file. That way you can use the twig (or php) template functions (like twig's path() function) to avoid any strange urls.

In your controller:

public function routingAction(Request $request) {
     $this->render('angular/routing.twig.js');
}

And in your routing

$routeProvider.
  when('/liste-produits', {
    templateUrl: {{ path('product_list') }},
    controller: 'ProductListCtrl'
  }).
  otherwise({
    redirectTo: '/'
  });

answered Apr 17, 2015 at 17:32

Rein Baarsma

1,57614 silver badges23 bronze badges

2 Comments

Cerad Over a year ago

Have you tried doing any angular development this way? Passing your javascript files through twig causes far more problems than it might solve. Sort of like getting rid of fleas by throwing your cat into a fire.

Rein Baarsma Over a year ago

I'm afraid to say no. The AngularJS development I did was with NodeJS. Symfony could very well work too, but I don't think I'd use the angular routing module, but instead the Symfony routing system.

Collectives™ on Stack Overflow

Integrating AngularJS in Symfony APP

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related