如何同时实现 Laravel 5.5 和 Angular 4 项目？答案

【问题标题】：How can I implement Laravel 5.5 and Angular 4 project intogether?如何同时实现 Laravel 5.5 和 Angular 4 项目？
【发布时间】：2018-03-22 06:50:41
【问题描述】：

如果我想用 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 操作、身份验证登录等过程将如何。另外，如果方法 2 更好，您能否推荐一些链接/视频关于程序/教程、CRUD 操作、Auth 登录等？

我的主要 moto 是“管理员用户”，可以登录到管理面板并创建一些 CRUD 操作，如类别创建、产品创建等。

【问题讨论】：

work with laravel as backend and angular as frontend的可能重复
尚未从该链接中找到我的解决方案
由于它们是不同的项目，并且 Angular 并不能从位于后端目录中受益，因此将它们放在不同的文件夹中是有意义的。它并不真正属于 xampp/htdocs，因为 Angular 本身并不与 Apache 一起提供。
谢谢！ @estus 。你能建议我在 Laravel5.5 中使用 Angularjs 2 / 4 的演示应用程序或演示 CRUD 教程吗？
登录你可以使用jwt-token类似的东西。这可能会帮助你jasonwatmore.com/post/2016/08/16/…

标签： angular laravel laravel-5.5

【解决方案1】：

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

Laravel 项目

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

Angular 项目

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

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

示例

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

现在当用户点击 yourwebsite.com 他将看到您的 Angular 应用程序的前端，然后在其后面通过 HTTP 请求调用 app.yourwebsite.com 以获取/设置数据

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

回答您的问题

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

【讨论】：

谢谢！现在，我完全理解了流程。我从github.com/shakyl333/Laravel-5.5-Angular-4-demo 找到了一个演示项目。我在github.com/shakyl333/Laravel-5.5-Angular-4-demo/tree/master/… 下没有看到任何 dist 文件夹。你能告诉我如何在那里创建一个 dist 文件夹吗？我应该只将 dist 文件夹上传到 yourwebsite.com 吗？我应该租用哪种托管服务器来运行 angularjs，因为我知道 Apache 不会帮助运行 angular。请回答问题。
我已经通过输入命令 ng build 创建了 dist 文件夹。你能回答我上面剩下的问题吗？
另一个问题 - 如果我将 dist 文件夹上传到服务器，它会像 myservername.com 一样自动运行吗？或者，我应该在服务器中配置一些额外的东西吗？
是的，它应该自动运行

【解决方案2】：

如果您想：有 laravel 网站：http://site.localhost 并在其中有一个 Angular 管理员，地址为：http://site.localhost/admin

我试图将资源放在 laravel public (assets & js) 的根目录下，在资源/视图/管理中创建我的视图：

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”文件夹，我会在 site.localhost/admin 上看到一个“禁止”页面...

【讨论】：