Fatal编程技术网
  • php/
  • Php 如何将角度js布线与laravel/lumen布线结合使用？

Php 如何将角度js布线与laravel/lumen布线结合使用？

php angularjs laravel

Php 如何将角度js布线与laravel/lumen布线结合使用？,php,angularjs,laravel,laravel-routing,Php,Angularjs,Laravel,Laravel Routing,我正在开发基于laravel（最新版本5.*）的web应用程序。我做了大量搜索，但没有找到确切的解决方案，如何将angular js路由与laravel路由结合使用 假设URL如下： /视图项/2 /编辑项目/5 等等，任何具有参数的URL 我想使用angular js根据参数获取数据。问题是laravel有自己的内置路由（routes.php in/app/Http）和angular js路由（ngRoute模块） 如果两个路由同时使用，那么确切的流程是什么 如果希望避免在需要从后端获取

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

假设URL如下：

  • /视图项/2
  • /编辑项目/5
  • 等等，任何具有参数的URL
我想使用angular js根据参数获取数据。问题是laravel有自己的内置路由（routes.php in/app/Http）和angular js路由（ngRoute模块）

  • 如果两个路由同时使用，那么确切的流程是什么
  • 如果希望避免在需要从后端获取数据的每个页面上创建对象来获取数据，该如何实现？例如$obj->getItem（$id）
  • 在哪里放置角js路由
    • 这些技术是不同的。角度路由是为单页应用程序（）构建的。Laravel路由服务于多个页面

    但是，如果您想要单页应用程序，则应使用Laravel route/controller来提供应用程序页

    您还可以使用（）Laravel资源控制器在JS应用程序和后端之间共享数据

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

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

    // views/application.blade.php

<html>
    <body>
        <div class="container">
            <div ng-view></div> <!-- Here will come your partial views -->
        </div>
    </body>
</html>
    定义管线以显示角度应用程序 此路由允许斜杠使用ngRoute进行路由，它应该是
    routes.php
    中定义的最后一个路由

    它将只渲染一个模板，该模板将用于显示真实的角度应用程序

    // views/application.blade.php

<html>
    <body>
        <div class="container">
            <div ng-view></div> <!-- Here will come your partial views -->
        </div>
    </body>
</html>
    在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')
    创建服务/工厂以检索数据 这样，您就可以从laravel routes检索数据，而无需直接浏览路由。 //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路由从后端检索数据。

    我是如何做到的：
    在my 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文件放在
    资源/资产
    或
    公共
    文件夹中。

    我要导入哪个视图类？ 
    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);

    /**
 * 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
  });