如何使用laravel / lumen路由的角度js路由？
[英]How to use angular js routing with laravel/lumen routing?
問題描述
我正在研究在laravel（最新版本5。*）上開發的Web應用程序。我做了很多搜索，但沒有找到確切的解決方案，如何使用laravel路由的角度js路由。
假設網址如下：
- / viewItem / 2
- / editItem / 5
- 等，任何有參數的網址
我想根據使用角度j的參數獲取數據。問題是laravel有自己的內置路由（routes / php在/ app / Http中）和angular js路由使用（ngRoute模塊）。
- 如果兩個路由一起使用，確切的流量是多少？
- 如果想要避免在每個需要后端數據的頁面上創建對象來獲取數據，如何實現它？ 如：$ obj->的getItem（$ ID）
- 在哪里放置角度js路由？
3 個解決方案
解決方案1
2 2016-02-15 09:57:55
您需要區分Laravel應用程序的路由和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端點
您將使用XHR從Angular應用程序中的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路由從后端檢索數據。
解決方案2
1 2016-02-18 13:28:09
我怎么做到的：
在我的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文件夾中。
解決方案3
0 2016-02-15 09:29:22
這些技術是不同的。 角度路由是針對單頁應用程序（ https://en.wikipedia.org/wiki/Single-page_application ）構建的。 Laravel路由服務多個頁面。
但是，如果您需要單頁應用程序，則應使用Laravel路徑/控制器來提供應用程序頁面。
您還可以使用（ https://laravel.com/docs/5.2/controllers#restful-resource-controllers）Laravel 資源控制器在JS應用程序和后端之間共享數據。
但是你不能混合使用Laravel和Angular路線。
Angular和Laravel之間的路由
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.