Routing with angular and Symfony

Question

I have some route issue using symfony and angular. I tried to adapt this tutorial for my project and my symfony backend. But whatever I do in my main html page or in my js angular files, when I inspect an element (using chrome tools), my div that contains my ng-view is always in commentary. I read on forums that angularjs comments ng-view if routes are not working. Can someone please help to resolve this route problem?

EDIT : It seems that Angular got the route but cannot retreive the html partial html because the console displays me a 404 on every html page called. Does anyone know where I should put my html partial files?

EDIT 2: I finally found the path to my static html file but the web server returns me a 403 error (forbidden). DO you know how I can access to this file?

Here is the files :

layout.html.twig (main template):

<!DOCTYPE HTML>
<html ng-app="adcApp">
    <head>
        <meta charset="utf-8">
        {% stylesheets filter='cssrewrite'
        'Resources/css/bootstrap.min.css'%}
            <link rel="stylesheet" href="{{ asset_url }}" type="text/css"/>
        {% endstylesheets %}
        {% javascripts
            'Resources/js/jquery-1.9.1.js'
            'Resources/js/bootstrap.js'
            'Resources/js/angular.js'
            'Resources/js/angular-route.js'
            'Resources/js/app.js'
            'Resources/js/Controllers.js' %}
            <script type="text/javascript" src="{{ asset_url }}"></script>
        {% endjavascripts %}
        <title>ADC-WebApp</title>
    </head>
    <body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" ng-href="">ADC-WebApp</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="">Plan de production
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#/Comparaison">Comparaison</a></li>
                            <li><a href="#/Param">Paramètres</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="row">
        <div ng-view></div>
    </div>
    </body>
</html>

app.js:

'use strict';

var adcApp = angular.module('adcApp', ['ngRoute', 'adcAppControllers']);

adcApp.config(function($interpolateProvider){
    $interpolateProvider.startSymbol('{[{').endSymbol('}]}'); //Conflict with twig
});

adcApp.config(['$routeProvider', function($routeProvider)
{
    $routeProvider.when('/OGPP/#/Comparaison',
        {
            templateUrl: 'partials/Comparaison.html',
            controller: 'ComparaisonCtrl'
        })
        .when('/OGPP/#/Param',
        {
            templateUrl: 'partials/Param.html',
            controller: 'ParamCtrl'
        })
        .when('/OGPP',
        {
            templateUrl: 'partials/index.html',
            controller: 'HomeCtrl'
        });
}]);

PHP controller :

class OgppController extends Controller
{
    public function indexAction()
    {
        $content = $this->render('ADCOgppBundle:Ogpp:layout.html.twig');
        return new Response($content);
    }
}

My partial folder is in the same directory as my layout.html.twig (BundleDir/Resources/Views/Bundle). All my controllers are declared but they just output some text in the console and nothing is printed.

in your `$routeProvider`, remove `/OGPP/` from your routes urls, your router is not matching the anchors set in your menu — topheman, Dec 24 '14 at 12:15
Thank you for your answer. The `ngview` is still commented, so it doens't work. I saw a post on stackoverflow that adices to try a bundle that generate route in javascript (FOSJsRoutingBundle). Do you think that this can resolve my problem? — Tristan Djahel, Dec 24 '14 at 12:37
EDIT : The chrome console now displays me that I have a 404 error not found for the partials html file. — Tristan Djahel, Dec 24 '14 at 13:56
check the templateUrl of your partials against their correct route in your symphony router — topheman, Dec 24 '14 at 17:24
You mean in the symfony file router (routing.yaml) ? or my path to the partial files? — Tristan Djahel, Dec 25 '14 at 09:27
I assume this is the file router unless your partials are static pages, Check if you can access them with the same url as in the templateUrl you put in the angular router. — topheman, Dec 25 '14 at 11:43
My partials pages are static html, but I think I need to create some routes for this pages. In fact, when I try to load a partial page only (like you said) I have a symfony error that says : `No route found for /GET partial_page` so I should create a function in my controller for each partial page. — Tristan Djahel, Dec 25 '14 at 15:47
Yes I tried to create some routes and controller functions but it seems like it doesn't change anything ... I did put `/OGPP/#/Comparaison` in my routing.yml and then created a function in my controller (same model as my layout.html.twig). — Tristan Djahel, Dec 25 '14 at 16:02
EDIT : I finally found the file to the file. Now I have an 403 error (forbiden). I cannot do a request on a static html file? — Tristan Djahel, Dec 25 '14 at 16:37
If you have some login middleware symfony side, make sure the route to the template is not login protected. — topheman, Dec 25 '14 at 17:23
No there is nothing like that. I think Apache doesn't accept request of static html file. — Tristan Djahel, Dec 25 '14 at 17:30
Then 1)Check apache error and access logs 2)Check settings in httpd.conf and .htaccess — topheman, Dec 25 '14 at 17:37
Thank your very much for your help. Everything works now ! :) — Tristan Djahel, Dec 26 '14 at 19:15

score 3 · Accepted Answer · edited May 23 '17 at 12:00

So finally I made it work. I'm new to angularjs and Symfony so I'll write everything I did in order to make my routes work.

1st : When using routes in angular, don't put the /#/, start your route just after this. Angular routes start after this url. More details here (the first answer)

2nd: In your templateUrl in angular, write your full path starting from your project dir. For example, if you're working with wamp (my case) and your project name is 'Symfony', then the path is : WampInstall/Symfony\src\projectName\BundleName\Resources\views\BundleName\partials if you're using partial as dir name for your partial views.

3rd: Apache doesn't allow angularjs to do a GET request. So you have to configure it. I changed my .htaccess file the .src Symfony dir. Here is the link I followed. But I'm not sure this is safe for the web server security.

After this, everything should work.

score 1 · Answer 2 · answered Sep 05 '17 at 19:28

In general mixing Symfony and Angular is not the best approach. Your app will be more maintainable if you separate completely your view and backend.

But still if you want to do that you can use some existing plugins to handle Symfony Routing in JavaSripts.

The most easy way to make Symfony and Angular work smoothly together is to envelop your Angular html in components (to avoid conflict with Twig). Than you can pass your baseUrl to those components like this :

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

and then use it in your templateUrl function

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

Voila, not beautiful but working solution.

Routing with angular and Symfony

2 Answers2