Laravel/Angular: passing data within php page to angularjs

Question

I have the following laravel html/blade page and i want to pass in a storeid that then can get picked up via angular to then use to get and do some workings with.

Below is how i am accomplishing it NOW but is there a better way to produce the same?

Blade Partial

<div ng-controller="storeChartCtrl" data-storeid="{{ $store['id'] }}">
    <p>{{ $store['name'] }} Sales</p>
    ...
</div>

Angular Ctrl

.controller('storeChartCtrl', ['$scope', 'Store', function($scope, Store){
    //-- get the requested store sales
    var storeid = JQ('#storeChart').data('storeid');

    $log.info(storeid);
    ....

This currently works and i get my storeid value so i can then send to my factory to get the data.

Answer 1

When using Angular (or even just jQuery), I thank @JeffreyWay for this package:

https://github.com/laracasts/PHP-Vars-To-Js-Transformer

Answer 2

Ultimately, you are rendering an HTML page from the server with certain data embedded; you can either embed data inside your HTML, or you can "render" an object full of data in the page like so:

<?php
$value = "Hello";
$bob = "Bob";

// template code

<script type="text/javascript">
myData = {             // make it global for easy access
    blah: $value,
    alice: $bob
};
</script>
?>

and then in your Angular controller, you access that data in pure JS, without needing to juggle data attributes.

.controller('storeChartCtrl', ['$scope', 'Store', function($scope, Store){
    console.log(myData);
})]);