Passing the URL/route parameter from laravel and using in angular

Question

I am new to Laravel 5 and angular. I am using Laravel routing for traversal and backend operations and angular for just UI operations like fetching data and binding UI grid, etc.

I have following route defined in routes.php file below

routes.php

Route::pattern('clientid', '[0-9]+');

//used for AJAX call from angularjs and populating ui-grid
Route::get('getclients/{clientid?}', 'ClientController@getClients');

//used for displaying Laravel view with ui-grid
Route::get('client/{clientid?}', 'ClientController@showClients');

Please find the angular files:

app.js

var appClients = angular.module('getclients', ['clientsService', 'ui.grid', 'ui.grid.exporter', 'ui.grid.selection']);

clientController.js

appClients.controller('ClientsController', ['$scope', '$http', 'Client', '$interval', '$q', function ($scope, $http, Client, $interval, $q) {
/* Defining UI grid options*/
.
.
/* Calling service to fill the grid*/
Client.get(clientid)
                .success(function (data, status, headers, config) {
                    if (data.length > 0) {
                        $scope.gridOptions.data = data;
                    }
                });
}

clientsService.js

angular.module('clientsService', [])
        .service('Client', function ($http) {
            return {
                // Get all the photos
                get: function (clientid) {
                    if (clientid !== '') {
                        return $http.get('/myproject/public/getclients/' + clientid);
                    }
                    else {
                        return $http.get('/myproject/public/getclients/');
                    }
                }
            }
        });
/*
    **Note:**
    Have already defined route in routes.php for using the same above:    
    Route::get('getclients/{clientid?}', 'ClientController@getClients');
*/

EXAMPLE:

Step 1:
Say I am hitting URL: http://<domain>/public/myproject/client/2

The following route would catch it and redirect to view where the ui-grid is present
    Route::get('client/{clientid?}', 'ClientController@showClients');

Step 2:        
    Now, somehow need to figure out how to pass that **2** to angular so that I could pass that parameter while making ajax call and get grid data

I am confused as to how we could use the the url parameter from Laravel in angular?

I reckon that I am missing some concept or doing something wrong here.

Could anyone help me out?

Why not getting url param and do http call to your controller and get it done ? — Sulthan Allaudeen
– Sulthan Allaudeen, Commented Nov 19, 2015 at 11:44
Unable to get you. We need to get URL param somehow in angular before http call. — Mrudang Vora
– Mrudang Vora, Commented Nov 19, 2015 at 12:38
Haven't used ng-Route as there are no angular pages. So how can I get routeParams without using ng-Route? — Mrudang Vora
– Mrudang Vora, Commented Nov 19, 2015 at 13:29
Then is that ok for you to use jquery in that particular area ? — Sulthan Allaudeen
– Sulthan Allaudeen, Commented Nov 20, 2015 at 6:39

Mrudang Vora · Accepted Answer · 2015-11-21 13:47:01Z

Just a workaround to make it work with angular and without jquery.

From routes.php, the control is transferred to showClients action in ClientsController.php

ClientsController.php (Laravel Controller):

Passed the variable to Laravel view from controller using following statement:

public function showClients($clientid = '') {
 return view('masters.clients', compact('clientid'));
}

Clients.php (Laravel View)

Added clientidmodel as ng-model and initialized it with passed clientid from Laravel controller using ng-init

<div ng-app="">
   <div ng-controller="ClientsController">
       <input type="text" name="txtClientId" ng-model="clientidmodel" style="display: none;" ng-init="clientidmodel = '{!!$clientid!!}'"/>
   </div>
</div>

clientController.js

Added the watch to the angular model so that we can capture the initial value passed.

$scope.$watch("clientidmodel", function () {
           Client.get($scope.clientidmodel)
                   .success(function (data, status, headers, config) {
                       if (data.length > 0) {
                           $scope.gridOptions.data = data;
                       }
                   });
       });

Not sure whether this is the efficient way but as of now got the things working with this workaround.

Please let me know in case of any better way to approach the same.

Sulthan Allaudeen · Accepted Answer · 2015-11-20 09:15:41Z

You can achieve this in jquery by

var pathname = window.location.href;
var lastItem = pathname.split("/").pop(-1);

Note : Here you will get the last element

i.e.,

If your url is like yourapp.com/app#/product/15 then the script will return 15. That's the last element after / . You can change this according to your wish.

Then you can pass the value directly inside your Laravel Controller.

        $.ajax({
    type: "POST",
    dataType: 'text',
    crossOrigin : true,
    data: {param : lastItem},
    url: serviceUrl+'/getReceipeDetails',
})
    .done(function( data ) {
        var result = jQuery.parseJSON(data);
        if(result.success==1)
        {
        $(".yourresult").html('Controller return success');
        }
        else
        {
        $(".yourresult").html('Controller return failure');
        }
    })
    .fail( function(xhr, textStatus, errorThrown) {
    console.log(errorThrown);
    });

Collectives™ on Stack Overflow

Passing the URL/route parameter from laravel and using in angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related