I am encountering some routing issues while using Symfony and Angular. I attempted to adapt this tutorial for my project with a Symfony backend. However, no matter what changes I make in my main HTML page or in my JS Angular files, when I inspect an element using Chrome tools, I always find that the div containing my ng-view is commented out. I have come across comments on forums suggesting that AngularJS will comment out ng-view if the routes are not functioning correctly. Can someone kindly assist me in resolving this routing problem?
EDIT: It appears that Angular can locate the route but is unable to retrieve the partial HTML because every HTML page called shows a 404 error in the console. Does anyone know where I should place my HTML partial files?
EDIT 2: I managed to find the path to my static HTML file, but when attempting to access it, the web server returns a 403 error (forbidden). Can anyone advise me on how to gain access to this file?
Below are the relevant 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 located in the same directory as my layout.html.twig (BundleDir/Resources/Views/Bundle). All controllers are declared, but they only output text to the console without printing anything.