Symfony2 + AngularJS

Question

I've been developing a web app using symfony2 and now I added some Angularjs.

I have an input field, where you can filter products by name, the problem is the following, I've a controller in php, I do some queries, and then I render the view, passing the parameters, in this case I do something like this,

.......
 return $this->render('default/index.html.twig',array( 'products' => $products)); 

My question is, if I wanted to filter those products by name using angular, how can I accomplish that? (I wanted something like phonecat-app in the official angular tutorial, where you can filter by name) So far I've done this:

var StoreApp = angular.module('StoreApp', []);

StoreApp.controller('StoreCtrl', function($scope,$http){
    $http.get('http://localhost:8000').success(function(data){
        $scope.stores = data;
     });
});

The problem is that I don't know which URL to put in the GET parameter, I've several tables in the database, and I don't know how to address them. I'm using a local web server on port 8000, and Doctrine.

Answer 1

In order to filter the data on the client side using angular, you need to get the data from your symfony2 application into the angular scope with javascript.

There are multiple ways of doing this, the quick and dirty way is to render the products array from php directly in the angular ng-init attribute as explained in https://stackoverflow.com/a/28508012/1016372 .

In my opinion the best way to get the data into your angular application is creating a "RESTful endpoint" that exposes your product data in JSON format to your angular application. Using symfony2 you could create a controller that returns the product data if you make a query for http://localhost:8000/products with a controller similar to this snippet:

class ProductController
{
    public function getProductsAction()
    {
        $products = $this->getRepository('Products')->findAll(),
        return new JsonResponse($products);
    }
}

Answer 2

Finally I could solve the problem.

Here is my controller,

 public function getAllStoresAction()
{
     $em = $this->getDoctrine()->getEntityManager();

     $query = $em->createQuery('SELECT s FROM AppBundle\Entity\Store s');

     $result = $query->getArrayResult();

    return new Response(json_encode($result), 200);


}

then my app.js

var storeApp = angular.module('storeApp', []).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});

storeApp.controller('StoreCtrl',function($scope,$http){
$http.get('/get-all-stores').success(function(data){
      $scope.stores  = data;


});
$scope.orderProp = 'name';
});

and my routing.yml

get_all_stores:
path: /get-all-stores
defaults: { _controller: AppBundle:Default:getAllStores}

I managed to get the data back, but the problem was that it returned me an empty array. Searching a bit, I found out that I wasn't serializing the data, php does not do that automatically, so I used this getArrayResult(); and it worked fine!

Thanks for the help Peter Peerdeman