结合 AngularJS 和 Laravel 路由

Posted 2023-03-14

【中文标题】结合 AngularJS 和 Laravel 路由

【英文标题】：Combine AngularJS and Laravel Routing

【发布时间】：2015-07-08 12:44:29

【问题描述】：

我在我的网络应用项目中使用 AngularJS 和 Laravel。我的路由如下所示：

AngularJS：

angular.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) 
    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state('home', 
            url: '/',
            templateUrl: '/admin/dashboard'
        );
]);

Laravel：

Route::group(array('prefix'=>'admin', function()
    Route::get('/', ['as'=>'admin.main',function()
        return view('main');
    ]);

    Route::get('/dashboard', ['as'=>'admin.dashboard',function()
        return view('dashboard');
    ]);
);

我面临的问题是我需要在 2 处声明路由路径。一个在 Angular，另一个在 Laravel。因此，每次添加新路线或更改路线路径时，我都需要在 2 个地方工作。随着应用程序的增长，这将变得乏味且难以维护。

有没有我只需要在一个地方设置路由URL，但对两者都有效？

【参考方案1】：

我假设您正在构建单页应用程序。这意味着在服务器端（Laravel）上，您需要对所有 GET 请求使用相同的模板，例如

Route::group(['prefix' => 'admin'], function() 
    Route::get('(.*)', function() 
        return view('dashboard');
    );
);

在客户端 (AngularJS) 上，您正在按照问题所述进行路由。

---

顺便说一句，你在 Laravel 路由中使用了错误的语法，这是不正确的：

Route::get('/', ['as'=>'admin.main',function()
]);

它应该是这样的：

Route::get('/', ['as'=>'admin.main'],function()
//                                 ^
);

【参考方案2】：

在 Laravel 5.4 中，我无法使用正则表达式定义路由，如下所示：

Route::get('/account/(.*)', function()  return view('index'); );

我不得不使用一个参数并使用正则表达式来确保它捕获所有路径：

Route::get('/account/path?', function() 
    return view('index');
)->with('path', '.*');