如何将Symfony变量传递给AngularJS

Question

I'm trying to obtain from the symfony 3 variable to AngularJS to modify and show it, but how I can "share" from the Symfony to AngularJS?.

Let me explain this way When I pass from the Symfony $this->render to the twig and using {{ name.firstName }} it show/works even if I'm using the dump or only the var, but I don't have idea to how pass to AngularJS the data of the variable "name.firstName" to modify in AngularJS, can anybody help me ???

(to clarify I'm not using JQuery or another thing, only JS, AngularJS, and Symfony3)

Here my code:

CheckController.php

/**
     * @Route("/payment", name="PaymentCheck.payment")
     * @return Response
     */
    public function indexAction(Request $request): Response
    {
        $customer = $this->getCustomer();

        /.../ more code /.../

        return $this->render(':PaymentCheck:index.html.twig', [
            'customerProfile' => $customer,  //<---- variable
            'order' => $recalculatedOrder->getOrder(),
            'form' => $clickToCallForm->createView(),
        ]);
    }

index.twig.html

    <div ng-if="shippingOptions.currentTab == 'homeDelivery'">
        <div class="address-book-section">
          <div class="choose-address">{{ 'PaymentCheck.select_shipping_address'|trans }}</div>
          {# it show, but how can I pass the variable to AngularJS? the customerProfile one #}
          {{ dump(customerProfile) }} 
          <address-book type="shipping" creatable="true" selectable="true"></address-book>
          </div>

          <div ng-repeat="package in PaymentCheck.order.packages">
                {% include ':PaymentCheck:itemList.html.twig' with {onlyUndeliverables: true} %}
        </div>
    </div>

Answer 1

The good, the bad, and the Ugly

The good

In app and your Controllers, set a variable to populate Angular Variables in your main layout template. Keep in mind that you should be able to drastically improve on this to make it much cleaner, and out of most of your controllers. This example is a bit ugly, for the sake of simplicity.

Controller

return $this->render(':Checkout:index.html.twig', [
    'angular' => [
         'customerProfile' => $customer,
    ],
    'order' => $recalculatedOrder->getOrder(),
    'form' => $clickToCallForm->createView(),
]);

Layout

<script type="text/javascript">
    SymfonyDataForAngular = {
        {% for key, value in angular %}
            {{ key }}: '{{ value }}',
        {% endfor %}
    };
</script>

.. then you can call SymfonyDataForAngular.customerProfile from javascript anywhere.

The bad

Create an ajax request in Angular to return the data you need in json. This might actually wind up being the best approach, as long as you structure it so you'll only make one AJAX call for each user action.

Controller

public function getCustomerAjax()
{
    return new JsonResponse([
        'customerProfile' => $this->getCustomer()
    ]);
}

The ugly

Create the view variables in the controller, dump those into javascript variables for Angular to access.

I'm not showing an example for this, because if people start doing it, everyone will hate me. Besides, it's close to the first example I already gave.