Level 29
I wish i could mark this question as too broad. Tell us what you have tried so far or whats your view on how you could structure this.
Jun 20, 2016
9
Level 4
In What Way Can I Combine Laravel and Angular to Vender Views
I am building an app which is not a Single Page Application. I want to use both laravel and angular js. but i dont want a situation where by Angular becomes responsible of rendering all the pages alone but in some cases, laravel will also render some pages when a user clicks on a link. Just like Gitbuh.com when you click on commits.
My question is how do i combine the two and how do i structure my route?
Level 4
@d3xt3r : thank you for replying. i wanted to do something like this;
In Route.php
Route::any('/', function () {
return File::get(public_path().'/advert-templates/welcome.html');
})->where('angular', '.*');
Route::get('post-advert', 'AdvertController@getAdvertView');
In Welcome.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<script src="angular/angular.min.js" type="text/javascript"></script>
<script src="angular/angular-route.js" type="text/javascript"></script>
<script type="text/javascript">var baseUrl = window.location.origin</script>
</head>
<body>
<div class="container">
<div ng-controller="myCtrl">
<a href="javascript:void(0)" ng-submit="nextPage()" class="btn btn-primary btn-xs">Next Page</a>
</div>
</div>
<script type="text/javascript">
var myApp = angular.module('myApp').controller('myCtrl', ['$http', function($http) {
nextPage : function(){
return $http.get(baseUrl + 'post-advert');
}
}]);
<script src="js/jQuery.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>
</body>
</html>
Level 29
My question is how do i combine the two and how do i structure my route?
You don't require separate routes for this. In the action for the routes which will respond to both types of queries, just check if its an ajax request or json is asked for then return json else return view.
Even you can place this as view. No need to use file facade
Route::any('/', function () {
return view('templates.welcome'); //return File::get(public_path().'/advert-templates/welcome.html');
})->where('angular', '.*');
Level 4
"just check if its an ajax request or json is asked for then return json else return view."
How do i do the check? i dont get it.
Level 29
example.
public function getAdvertView(Request $request) {
$data = $whatever; // whatever data you are collecting for the view
if($request->ajax() || $request->wantsJson()) {
return $data;
}
return view('view-name',compact('data'));
}
Level 7
Too broad and vague question. Bot for a starting point I think you should be pointed to learn API development for your front end
Level 4
@d3xt3r : ookk i get it now, but i am not collecting any data. its jxt text. do i have to specify anything ? or would the $data = something?
And i dont want the advert page to load too. i want an ajax request to bring it.
Level 29
I seriously don't get it. First try working with angular as such without laravel, make your self comfortable with router, templates etc, and then we shall tackle the laravel specific implementation
1 like
Level 4
@d3xt3r: Ok thank You
Please or to participate in this conversation.