How to use laravel and angularjs routing together?

Question

I am using the laravel php framework to execute code, and I want angularjs to handle routing for me. I have an example here: http://embed.plnkr.co/dd8Nk9PDFotCQu4yrnDg/preview , which shows me how to exchange between pages using angularjs routing methods, but they use simple .html files to render the Content. This is a sample that I found on the Internet.

In addition, the caravan has its own routes. How can I direct the angularjs router to call the laravel route and display the page accordingly after retrieving the content from the database? I am new to Angularjs. Thanks.

Answer 1

There are several ways to achieve the goal, but you no longer use the blade. Here I just explain the easiest way.
1. create index.php (not index.blade.php), in your route.php, you have:

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

It will return you an index page.
In index.php, please indicate

  <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 shared folder, you can create a folder called "js", another folder called "templates".
   

3. In the js file, your app.js, controller.js, etc. are created. (don't forget to include them in your index.php)
   

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

5. On the index page, you will perform 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' }); });