Как использовать маршрутизацию laravel и angularjs вместе?

Question

Я использую laravel php framework для выполнения кода, и я хочу, чтобы angularjs обрабатывал маршрутизацию для меня. У меня есть пример здесь: http://embed.plnkr.co/dd8Nk9PDFotCQu4yrnDg/preview, который показывает мне, как обмениваться между страницами с помощью методов маршрутизации angularjs, но они используют простые .html-файлы для рендеринга содержимого. Это образец, который я нашел в Интернете.

Кроме того, в ларавеле есть свои маршруты. Как я могу направлять маршрутизатор angularjs, чтобы вызвать маршрут laravel и отобразить страницу соответственно после извлечения содержимого из базы данных? Я новичок в Angularjs. Спасибо.

Answer 1

Есть несколько способов достижения цели, но вы больше не используете лезвие. Здесь я просто объясняю самый простой способ.
1. создать index.php (не index.blade.php), в вашем routes.php, у вас есть:

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

Это вернет вам индексную страницу.
В index.php, пожалуйста, включите

<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> 

или локальную зависимость.

2. В общей папке вы можете создать папку под названием «js», другую папку под названием «шаблоны».
   

3. В "JS" файл, создает свои "app.js", "controller.js", и т.д. (Не забудьте включить их в свой index.php)
   

4. В папке «шаблоны» вы создадите свой шаблон html. В вашем данном примере, они «home.html», «about.html», «contact.html»
   

5. В индексной странице, вы угловую маршрутизации здесь.
   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' 
        }); 
   });