0

I've been learning AngularJS and I'd like to integrate it with my SF2 back end. I'm getting confuse with the routes let's see what I have:

When we go onto /usermanager the symfony routing system opens a controller that loads a twig template. In this template, I load all the js components needed for angular and do this:

 {% extends '::base.html.twig' %}

 {% block javascripts %}
    {{ parent() }}

    <script type="text/javascript" src="{{ asset('js/UserManager_Angular.js')}}"></script>
 {% endblock %}


 {% block body %}


<h1>User Manager</h1>

<div data-ng-view></div>
 {% endblock %}

Now this is my angular code:

   var UserManager = angular.module('UserManager', ['ngRoute','ngResource']);

UserManager.config(function($routeProvider){
   $routeProvider 
   .when('/addnew',
   {
       controller:'addNewController',
       templateUrl:Routing.generate('_UserManager_add_new_user')
   })
   .when('/',
   {
       controller:'UserManagerHome',
       templateUrl:Routing.generate('_UserManager_getUser_List')
   })

});

UserManager.factory('data_access',['$resource', 
    function($resource){
    return $resource(Routing.generate('_UserManager_getUserList'),{},{
        query:{method:'GET',isArray:true}
    });

}]);

UserManager.controller('UserManagerHome',function ($scope,data_access){
    $scope.users = data_access.query();    
    //$scope.orderProp = 'id';

});

ps: as you can see I use the FOSBundle for js route exposure. I think I got how to use that, because my factory correctly gets the users from the database.

So I want to load a file containing the classic angular stuff such as ng-repeat etc. This is represented by this route:

.when('/usermanager',
{
    controller:'UserManagerHome',
    templateUrl:Routing.generate('_UserManager_userList')
})

Here is my routing file:

_UserManager:
  pattern: /usermanager
  defaults: {_controller: AcmeBundle:UserManager:Home }
  options:
    expose: true

_UserManager_getUser_List:
  pattern: /usermanagerlist
  defaults: {_controller: NRtworksSubscriptionBundle:UserManager:list }
  options:
    expose: true  

_UserManager_getUserList:
  pattern: /usermanager/getuserlist
  defaults: {_controller: AcmeBundle:UserManager:getUserList }
  options:
    expose: true
  requirements:
    _format: json
    _method: GET    


_UserManager_add_new_user:
  pattern: /usermanager/addnew
  defaults : {_controller: AcmeBundle:AddNewUser:Home }
  options:
     expose: true

ps2: the controllers are almost empty, just rendering the twig template i'm looking for.

Currently, when I open /usermanager I get a blank page with just the title "user manager". What do I do wrong ?

scniro
  • 16,844
  • 8
  • 62
  • 106
Eagle1
  • 810
  • 2
  • 12
  • 30

1 Answers1

3

Your angular route is after the hash. that means that

 www.yoursite.com/usermanager

witch for the symfony router is /usermanager, for your angular app is just /

if you visit this

 www.yoursite.com/usermanager/#/usermanager

then angulars route will be /usermanager.

Saying that, angular's routing is a completely different environment from your Symfony's route system and they should not have conflicts. Because angular route is taking place after the #.

Alexandros Spyropoulos
  • 974
  • 1
  • 8
  • 23
  • Ok I get that I should change .when('/usermanager', to .when('/', right ? But still it doesn't work it puts me on this address:http://192.168.1.19/Symfony24/web/app_dev.php/usermanager#/ – Eagle1 Jul 06 '14 at 17:19
  • I solved it! I guess I wasn't doing the routing symfony correctly. Is the way I do correct ? Having "empty" controllers, just rendering the template ? – Eagle1 Jul 06 '14 at 21:26
  • Controllers are there only to wire your template with your services and pass scopable variables and functions to the markup, if you have nothing to pass, then yes, you are doing it right. – Alexandros Spyropoulos Jul 09 '14 at 14:36
  • if I have something to pass you mean ? Otherwise I could route directly to a template. – Eagle1 Jul 09 '14 at 15:07
  • Yeah if you have something to scope or handle, you need a controller, otherwise it could be omitted. I also suggest to use angular-ui-router instead of the simple one. Especially if you plan to nest views at some point – Alexandros Spyropoulos Jul 09 '14 at 15:25