CODEWITHSUNDEEP
angularjslaravel-5.1
Gaurav Mehta
Gaurav Mehta

Reputation: 1153

Passing route parameter from Laravel to Angular

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?

Upvotes: 1

Views: 2045

Answers (1)

Mina Abadir
Mina Abadir

Reputation: 2981

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.

Upvotes: 2

Related Questions