CODEWITHSUNDEEP
angularjssymfony-2.4
Eagle1
Eagle1

Reputation: 810

Angularjs + Symfony2 routing can't make it work

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 ?

Upvotes: 0

Views: 2824

Answers (1)

Alexandros Spyropoulos
Alexandros Spyropoulos

Reputation: 974

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 #.

Upvotes: 3

Related Questions