Passing route parameter from Laravel to Angular

Question

I am building an app using Laravel & Angular.

I have defined a route in Laravel

Route::get('/deal-coupons/{merchant_id}', function() {
    return view('mlpdeals');
});

What I want to do is pass the merchant_id to my angular view.

In my public folder, I have created an app.js

var app = angular.module('deals', [])
    .constant('API_URL', 'http://www.coupon.local/api/getdealsbymerchant/');

I have also created a controller

app.controller('dealsController', function($scope, $http, API_URL) {
//retrieve employees listing from API
$http.get(API_URL + "1032")
        .success(function(response) {
            $scope.deals = response;
        });
});

In my mlp.php view, I have

<!DOCTYPE html>
<html lang="en-US" ng-app="deals">
<head>
    <title>Laravel 5 AngularJS CRUD Example</title>

    <!-- Load Bootstrap CSS -->
    <link href="<?= asset('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css') ?>" rel="stylesheet">
</head>
<body>
    <h2>Employees Database</h2>
    <div  ng-controller="dealsController">

        <!-- Table-to-load-the-data Part -->
        <table class="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Deal Text</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="deal in deals">
                    <td>{{ deal.deal_id }}</td>
                    <td>{{ deal.deal_text }}</td>
                </tr>
            </tbody>
        </table>
        <!-- End of Table-to-load-the-data Part -->
    </div>

    <!-- Load Javascript Libraries (AngularJS, JQuery, Bootstrap) -->
    <script src="<?= asset('https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js') ?>"></script>
    <script src="<?= asset('https://code.jquery.com/jquery-1.11.3.js') ?>"></script>
    <script src="<?= asset('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js') ?>"></script>

    <!-- AngularJS Application Scripts -->
    <script src="<?= asset('app/app.js') ?>"></script>
    <script src="<?= asset('app/controllers/deals.js') ?>"></script>
</body>

As you can see, I am manually written the merchant_id to my API call. How do I make sure that I can get the merchant_id from the URL and pass it to my controller?

Mina Abadir · Accepted Answer · 2015-12-14 05:51:45Z

2

There are several methods for that, however the easier is to add it to a hidden field in Laravel blade, and let Angular read it.

Route:

Route::get('/deal-coupons/{merchant_id}', function($merchant_id) {
    return view('mlpdeals',compact($merchant_id));
});

Template

<div  ng-controller="dealsController">
<input type="hidden" value="{{$merchant_id}}">
        <!-- Table-to-load-the-data Part -->

As you are using Blade and AngularJS, which both have use the same directive {{}}, you have two options. Either continue without Blade and use normal PHP echoing like that:

<div  ng-controller="dealsController">
    <input type="hidden" value="<?=$merchant_id?>">
            <!-- Table-to-load-the-data Part -->

Or better to use Blade and instruct it, not to process Angular variables by escaping them using the @ sign like that:

 <tbody>
                <tr ng-repeat="deal in deals">
                    <td>@{{ deal.deal_id }}</td>
                    <td>@{{ deal.deal_text }}</td>
                </tr>
            </tbody>

However, please take into consideration that the client can change this value easily, so if you want to have more control on that, then it's much better to acquire that variable from Laravel through API call, and receive it in JSON variable.

edited Dec 14, 2015 at 5:51

answered Dec 13, 2015 at 22:08

Mina Abadir

2,9812 gold badges17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gaurav Mehta Over a year ago

Thanks. However there is some issue with the above approach. I am able to pass the values to the view. However since my view name is mlp.php it is not showing the value. If I rename the view name to mlp.blade.php then I get an error saying "Use of undefined constant deal - assumed 'deal' (View: /Applications/MAMP/htdocs/coupon/resources/views/mlp.blade.php)"

Gaurav Mehta Over a year ago

Thanks Mina. I was able to get to that too. :) Thanks for the help

Collectives™ on Stack Overflow

Passing route parameter from Laravel to Angular

1 Answer 1

Route:

Template

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Route:

Template

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related