Menu
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.
453
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.
96
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.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
