I'm trying to work with symfony2 and AngularJs together, but I cant,
- I've conflicts with the rounting
- Angular does not recognize the Angular symbols in twig templates.
This is my app.js that is in AppBundle/Resoures/public/js/app.js
var app = angular.module('uifi',[]);
app.config(['$stateProvider','$interpolateProvider',
function($stateProvider,$interpolateProvider){
$interpolateProvider.startSymbol('[[').endSymbol(']]');
$stateProvider.state('grupos', {
url: '/grupos',
templateUrl: Routing.generate('app_grupos_index'),
controller : 'GruposController'
});
}]);
This is my page index.html.twig that has a dummy content
<html ng-app="uifi">
<body>
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
<script src="{{ asset('js/angular.min.js') }}"></script>
<script src="{{ asset('bundles/app/js/app.js') }}"></script>
<script src="{{ asset('bundles/app/js/controllers/GrupoController.js') }}"></script>
<div ng-controller="GruposController">
[[title]]
</div>
</body>
</html>
And this is my Angular controller to setup the title variable
app.controller('GruposController',['$scope',
function($scope){
$scope.title ='Research groups';
}
]);
Then my controller in symfony to handle the app_grupos_index
class GruposController extends Controller{
/**
* @Route(name="app_list_grupos",options={"expose"=true})
*/
public function getListGrupos(){
$grupos = $this->get('uifi.integrantes.grupos')->getGrupos();
return new JsonResponse( array('grupos'=> $grupos) );
}
/**
* @Route(name="app_grupos_index",options={"expose"=true})
*/
public function indexAction(){
return $this->render('AppBundle:Grupos:index.html.twig');
}
}
Note that I'm using FOSJsRoutingBundle to expose the symfony routes to Javascript
Problems:
If I go to the route
http://localhost:8000/gruposin the browser I get the followingSymfony error:No route found for "GET /grupos"This problem make me think in that Angular is not working with the routing
If I modify the
Symfony controllerto handle the route/gruposlike this:
/**
* @Route("/grupos",name="app_grupos_index",options={"expose"=true})
*/
public function indexAction(){
return $this->render('AppBundle:Grupos:index.html.twig');
}
I get my page with the explicit [[title]] string and the following Angular error:
Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector
/modulerr?p0=uifi&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F
%2Ferrors.angularjs.org%2F1.3.14%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1....
So, I'm wondering what am I doing wrong?
There are lot more things you'll need to consider when integrating symfony with angular.
Authentication, Authorization - couple of possibilities at least
Use verbatim tags than customizing interpolation symbols in angular - it'll likely to break third party plugins or directives.
Two examples
Hope, you'll catch things up