gpt4 book ai didi

php - 如何在 laravel/lumen 路由中使用 angular js 路由?

转载 作者:塔克拉玛干 更新时间:2023-11-03 05:40:51 25 4
gpt4 key购买 nike

我正在开发在 laravel(最新版​​本 5.*)上开发的 Web 应用程序。我进行了大量搜索,但没有找到确切的解决方案,如何将 angular js 路由与 laravel 路由一起使用。

假设 url 如下:

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

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

  • 如果两个路由结合使用,具体流程是什么?
  • 如果想避免在每个需要后端数据的页面上创建对象来获取数据,如何实现?例如.$obj->getItem($id)
  • angular js路由放在哪里?

最佳答案

您需要区分 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)中定义新路由,并创建相应的 Controller /操作即可。

// 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 路由从后端检索数据。

关于php - 如何在 laravel/lumen 路由中使用 angular js 路由?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35405516/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com