如何将 Laravel 5.5 和 Angular 4 项目结合起来？

Question

如果我想用 Laravel 5.5 实现 Angularjs 4 或 2（angular 将消耗 laravel 中的 API），应该是什么最好的方法？ 1) 我应该在 xampp/htdocs 中创建两个文件夹，例如 c:/xampp/htdocs/test-laravel55 和 c:/xampp/htdocs/test-angular4 或 2 ) 我是否应该创建一个 laravel 5.5 的项目，如 c:/xampp/htdocs/test-laravel55 并放置 angularjs4 (e2e, node_modules, src) 文件& 文件夹到 test-laravel55?

如果方法 1 更好，能否推荐一些链接/视频给我，以了解 CRUD 操作、Auth 登录等过程。另外，如果方法 2 更好，能否推荐一些链接给我/ 关于过程的视频 / 教程、CRUD 操作、Auth 登录等？

我的主要 moto 是 "admin user" 可以登录管理面板并创建一些 CRUD 操作，如类别创建、产品创建等。

Answer 1

我的方法是为 Laravel 制作 2 个完全独立的项目，您应该将其放在本地主机根目录中
另一个是 Angular 你可以把它放在任何地方

Laravel 项目

您将只使用路由和控制器，不需要视图，并且确保连接到数据库，您可以使用 Postman 来测试您的 REST API 和功能。

Angular 项目

您将在这里处理所有 front-end 路由和视图，您只需调用 back-end API（laravel 项目）来获取和设置数据。

当您通过 ng build 构建 Angular 项目时，它将创建一个名为 dist 的文件夹，此文件夹是您项目的客户端，您应该使用您的域名指向它在任何托管服务提供商上部署项目后，对于 Laravel 项目，您可以使用子域指向它

例子

您创建了一个 laravel 项目并将其托管在 app.yourwebsite.com 您创建了一个 Angular 项目并构建它，然后将 dist 文件夹上传到 yourwebsite.com

现在当用户点击 yourwebsite.com 他会看到你的 angular 应用程序的 front-end 然后在它后面通过 HTTP 请求调用 app.yourwebsite.com 到 get/set data

您可以在此处找到更多有用的信息和示例 https://laravel-angular.io/

回答您的问题

1- dist 文件夹是通过 ng build
创建的 2- 你将只上传 dist 文件夹，因为它包含所有编译的 angular app
3- 任何托管服务器都将被接受，因为您将仅托管 JS/HTML 文件，因此您不需要任何编译器或 nodejs/npm 环境

Answer 2

如果你想：拥有 laravel 网站：http://site.localhost 并在其中有一个 Angular 管理员，位于：http://site.localhost/admin

我试图将资源放在 laravel public 的根目录下（资产和 js），在 resources/views/admin 中创建我的视图：

Route::get('/admin', function () {
    View::addExtension('html', 'php');
    return View::make('admin.index');
} )->name('admin');

并使用 ng build --prod --aot --base-href /admin

构建

现在的问题是基本 href 也适用于 CSS，因此加载 fontawesome 会查找：http://site.localhost/admin/assets/fonts/fontawesome-webfont.ttf?v=4.7.0

但我的资产位于 public 的根目录下，而不是 "admin" 内，如果我在 public 内添加一个 "admin" 文件夹，我会得到一个 'Forbidden' 网站页面。localhost/admin...

如何将 Laravel 5.5 和 Angular 4 项目结合起来？

How can I implement Laravel 5.5 and Angular 4 project intogether?

laravel

angular

laravel-5.5