Question

我正在研究在laravel（最新版本5。*）上开发的Web应用程序。我做了很多搜索，但没有找到确切的解决方案，如何使用带有laravel路由的角度js路由。

假设网址如下：

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

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

如果两个路由一起使用，确切的流量是什么？
如果想要避免使用想要来自后端的数据的每个页面上的创建对象来获取数据，如何实现它？例如$ obj-＆GT;的getItem（$ ID）
在哪里放置角度js路由？

Answer 1

您需要区分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路由从后端检索数据。

Answer 2

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

[ResponseType(typeof(AlbumSong))]
public async Task<IHttpActionResult> PostMovieSong(AlbumSong albumSong)
{
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }

    db.AlbumSongs.Add(albumSong);
    await db.SaveChangesAsync();

    return CreatedAtRoute("DefaultApi", new { id = albumSong.Id }, albumSong);
}

我在/** * 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 });创建了一个 index.html ，这是我的基础。您可以将 js 和 css 文件放在resources/view或resources/assets文件夹中。

Answer 3

这些技术不同。角度路由是针对单页应用程序（https://en.wikipedia.org/wiki/Single-page_application）构建的。 Laravel路由服务多个页面。

但是，如果您需要单页应用程序，则应使用 Laravel路由/控制器来提供应用程序页面。

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

但你不能混淆Laravel和Angular路线。

如何使用laravel / lumen路由的角度js路由？

3 个答案:

定义显示角度应用程序的路径

使用Angular

在Laravel中创建API端点

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

使用您的应用程序