How to use laravel and angularjs routing together?

Question

I am using laravel php framework for the code execution and I want angularjs to handle the routing for me. I have an example here : http://embed.plnkr.co/dd8Nk9PDFotCQu4yrnDg/preview which shows me how to swap between the pages using angularjs routing methods but they use simple .html files to render the content . It is a sample I found on the internet.

Moreover in laravel it has its own routes. How can i guide the angularjs router to call the laravel route and render the page accordingly after fetching the contents from database ? I am new to Angularjs . Thank you.

Answer 1

There are a couple of methods achieving the goal, but you do NOT use blade any more. Here I am just explaining the easiest way.
1. create a index.php (not index.blade.php), in your routes.php, you have:

Route::get('/', function()
{
    return View::make('index');
});

It will return you the index page.
In index.php, please include

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.3/angular-route.js"></script>

or your local dependencies.

2. In the public folder, you can create folder called "js", another folder called "templates".
   

3. In the "js" file, creates your "app.js", "controller.js", and etc. (Don't forget to include them in your index.php)
   

4. In the "templates" folder, you will create your template html. In your given example, they are "home.html", "about.html", "contact.html"
   

5. In the index page, you do the angular routing here.
   app.js:

   var app = angular.module('app', [ 'ngRoute' ]);
   app.config(function($routeProvider) {
       $routeProvider
           .when('/', {
               templateUrl : 'templates/home.html',
               controller  : 'mainController'
           })
   
           .when('/about', {
               templateUrl : 'templates/about.html',
               controller  : 'aboutController'
           })
   
           .when('/contact', {
               templateUrl : 'templates/contact.html',
               controller  : 'contactController'
           });
   });