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 mentary. I read on forums that angularjs ments 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.
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 mentary. I read on forums that angularjs ments 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 Commented Dec 24, 2014 at 12:15 -
Thank you for your answer. The
ngviewis still mented, 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 Commented Dec 24, 2014 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 Commented Dec 24, 2014 at 13:56
- check the templateUrl of your partials against their correct route in your symphony router – topheman Commented Dec 24, 2014 at 17:24
- You mean in the symfony file router (routing.yaml) ? or my path to the partial files? – Tristan Djahel Commented Dec 25, 2014 at 9:27
2 Answers
Reset to default 3So 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.
In general mixing Symfony and Angular is not the best approach. Your app will be more maintainable if you separate pletely 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 ponents (to avoid conflict with Twig). Than you can pass your baseUrl to those ponents like this :
<ponentName baseurl="{{ app.request.scheme ~ '://' ~
app.request.httpHost ~ app.request.basePath }}"></ponentName >
and then use it in your templateUrl function
templateUrl: function($attrs) {
return $attrs.baseurl + 'templates/ponentName.template.html';
}
Voila, not beautiful but working solution.