How to send and show messages in AngularJS and Symfony2 project

Question

I'm trying to capture errors inside Symfony2 controller as this code shows:

public function indexAction($parent_id = 0) {
        $response['message'] = "";
        $breadcrumbs = array();

        $response['entities'] = array();

        if (!$entity) {
            throw $this->createNotFoundException('No se encontraron grupos de detalles');
        }

        ...

        return new JsonResponse($response);
    }

}

When !$entity is TRUE then as you see I generate a NotFoundException but I need to show a message to users in my AngularJS template. This is the code for the template:

<ul id="nav-info" class="clearfix">
    <li><a href="#/dashboard"><i class="icon-home"></i></a></li>
    <li><a href="javascript:void(0)">Grupo de Meta-Detalles</a></li>
    <li class="active"><a href="#/detailsgroup/list">Listar</a></li>
</ul>
<h3 class="page-header page-header-top">Grupo de Meta-Detalles <small>Listado.</small></h3>

<table id="example-datatables" class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th class="span1"></th>
            <th class="span1 hidden-phone">#</th>
            <th><i class="icon-bookmark"></i> Nombre</th>
            <th><i class="icon-bookmark"></i> Padre</th>
            <th><i class="icon-bolt"></i> Descripción</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in MetaDetailGroup">
            <td class="span1">
                <div class="btn-group">
                    <a href="#/products/edit/{% verbatim %}{{ item.id }}{% endverbatim %}" data-toggle="tooltip" title="Editar" class="btn btn-mini btn-success"><i class="icon-pencil"></i></a>
                    <a href="#/products/delete/{% verbatim %}{{ item.id }}{% endverbatim %}" data-toggle="tooltip" title="Eliminar" class="btn btn-mini btn-danger"><i class="icon-remove"></i></a>
                </div>
            </td>
            <td class="span1 hidden-phone">{% verbatim %}{{ item.id }}{% endverbatim %}</td>
            <td><a href="javascript:void(0)">{% verbatim %}{{ item.name }}{% endverbatim %}</a></td>
            <td><a href="javascript:void(0)">{% verbatim %}{{ item.parent }}{% endverbatim %}</a></td>
            <td>{% verbatim %}{{ item.description }}{% endverbatim %}</td>
        </tr>
    </tbody>
</table>

How I can achieve this? I mean if there is nothing to show (!entity) then show a message to users, any help or advice?

Answer 1

I have no AngularJS installed, so this is checked on JsFiddle :)

public function indexAction($parent_id = 0) {
    $response['message'] = "";
    $breadcrumbs = array();

    $response['entities'] = array();

    if (!$entity) {
        // Exception is replaced by message to your client-side script
        $response['message'] = 'No se encontraron grupos de detalles';
    }

    return new JsonResponse($response);
}

Make call to your symfony method (GET or POST):

$http.get("/api/index/?parent_id=666", {})
    .success(function(data, status, headers, config){
        // Would be nice to check status/message and to hide if no error
        $scope.ajaxResponse = data.message;
        // TODO: Handle your entities
    }).error(function(data, status, headers, config){
        $scope.ajaxResponse = status;
    });

In your view page (HTML) insert some Angular JS variable

    <tbody>
    <tr><td colspan="5">{{ajaxResponse}}</td></tr>
    <tr ng-repeat="item in MetaDetailGroup">
       ...