如何将 Angular js 路由与 laravel/lumen 路由一起使用？答案

【问题标题】：How to use angular js routing with laravel/lumen routing?如何将 Angular js 路由与 laravel/lumen 路由一起使用？
【发布时间】：2016-05-26 03:15:39
【问题描述】：

我正在开发在 laravel（最新版本 5.*）上开发的 web 应用程序。我做了很多搜索，但没有找到确切的解决方案，如何将 angular js 路由与 laravel 路由结合使用。

假设网址像：

/viewItem/2
/editItem/5
等等，任何有参数的url

我想使用angular js根据参数获取数据。问题是laravel有自己的内置路由（/app/Http中的routes.php）和使用（ngRoute模块）的angular js路由。

如果两个路由同时使用，具体流程是什么？
如果想避免在需要后端数据的每个页面上创建对象来获取数据，如何实现？ eg.$obj->getItem($id)
Angular js 路由放置在哪里？

【问题讨论】：

标签： php angularjs laravel laravel-routing

【解决方案1】：

这些技术是不同的。 Angular Routing 是为单页应用程序 (https://en.wikipedia.org/wiki/Single-page_application) 构建的。 Laravel 路由服务多个页面。

但是，如果你想要一个单页应用程序，你应该使用 Laravel 路由/控制器来给应用程序页面。

您还可以使用 (https://laravel.com/docs/5.2/controllers#restful-resource-controllers) Laravel 资源控制器 在您的 JS 应用和后端之间共享数据。

但你不能混合使用 Laravel 和 Angular 路由。

【讨论】：

【解决方案2】：

您需要区分 Laravel 应用程序的路由和 Angular 应用程序的路由。

定义一个路由来显示 Angular 应用程序

// Http/routes.php

Route::get('/{js_route}', function() {
    return view('application');
})->where('js_route', '(.*)'); // Allow multiple URI segments

此路由允许斜杠使用 ngRoute 进行路由，它应该是您的 routes.php 中最后定义的。

它只会渲染一个模板，用于显示你的真实 Angular 应用程序。

// views/application.blade.php

<html>
    <body>
        <div class="container">
            <div ng-view></div> <!-- Here will come your partial views -->
        </div>
    </body>
</html>

使用 Angular 进行真正的应用程序路由

现在，使用 ngRoute 定义应用程序的路由并在它们之间导航。

// public/js/src/app.js

$routeProvider
    .when('/', {
        templateUrl: 'Default/index.html', // A simple HTML template
    });

// ...

在 Laravel 中创建 API 端点

您将在 Angular 应用程序中使用 XHR 从 Laravel 应用程序中检索数据。
为此，只需在相应的方法（即 GET、POST）中定义新路由，并创建相应的控制器/动作。

// Http/Controller/FooController.php

class FooController extends \BaseController {

    /**
     * List all Foo entities in your app
     *
     * @return Response
     */
    public function index()
    {
        return Response::json(Foo::get());
    }
}

// Http/routes.php

Route::get('/api/foo', 'FooController@index')

创建服务/工厂以检索您的数据

// public/js/src/app.js

(function (app) {

    function FooService($http, $q) {
        this.getFoos = function() {
            return $http.get('/api/foo');
        };
    }

    app.service('Foo', FooService);

})(angular.module('yourApp'));

这样，您可以从 laravel 路由中检索数据，而无需直接浏览路由。 // public/js/src/app.js

function MainCtrl($scope, $http) {
    $scope.listFoo = function() {
        $http.getFoos()
            .then(function(response) {
                $scope.foos = response.data;
            }, function(error) {
                console.log(error);
            });
    };
}

app.controller('MainController', MainCtrl);

使用您的应用程序

现在，您可以仅使用 javascript 路由在应用程序中导航，并使用 Laravel 路由从后端检索数据。

【讨论】：

【解决方案3】：

我是如何做到的：
在我的 routes.php 中

/**
 * Redirects any other unregistered routes back to the main
 * angular template so angular can deal with them
 *
 * @Get( "{path?}", as="catch.all" )
 * @Where({"path": "^((?!api).)*$"})
 *
 * @return Response
 */
  Route::any('{path?}', function () {

    View::addExtension('html', 'php');

    return View::make('index');

  })->where("path", "^((?!api).)*$");


/*
|--------------------------------------------------------------------------
| API routes
|--------------------------------------------------------------------------
*/
  Route::group([
    'prefix' => 'api'
  ], function () {
     //here are my api calls
  });

我在resources/view 中创建了一个 index.html，这是我的基地。您可以将 js 和 css 文件放在 resources/assets 或 public 文件夹中。

【讨论】：

我要导入哪个视图类？