如何实现Laravel 5.5和Angular 4项目?

时间:2018-03-22 06:50:42

标签: angular laravel laravel-5.5

如果我想用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登录等?

我的主要动机是"管理员用户"可以登录管理面板并创建一些CRUD操作,如类别创建,产品创建等。

2 个答案:

答案 0 :(得分:5)

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

Laravel项目

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

Angular Project

您将在此处理所有前端路由和视图,只需调用后端API(laravel项目)即可获取和设置数据。

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

<强> 实施例

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

现在当用户点击 yourwebsite.com 时 他会看到你的角应用程序的前端然后在它后面通过HTTP请求调用 app.yourwebsite.com 来获取/设置数据

您可以在https://laravel-angular.io/

找到更多有用的信息和示例

回答您的问题

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

答案 1 :(得分:0)

如果要: 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”文件夹,则会在site.localhost / admin上显示“禁止”页面。