17

我正在尝试构建一个 Web 应用程序，它应该在客户端使用 Laravel 作为 RESTful 后端 API 和 AngularJS。我阅读了 Stackoverflow 上有关该问题的所有其他帖子，但没有人肯定回答我的疑问，至少，我没有找到明确的来源示例。

例如...

我是否应该开发两个完全不同的应用程序，一个使用 Laravel 的后端，另一个使用 AngularJS 的纯客户端？但是在这种情况下：如何通过单个域（或虚拟主机）来处理它们？

或者我应该在 Laravel 的“views”文件夹中创建 AngularJS 模板并从中调用 Laravel 服务？我怀疑这是最好的方法：在这种情况下，后端并没有与前端实现完全分离。

另外，如何正确处理路由？我的意思是：我想通过 AngularJS 路由来管理菜单/页面导航，调用 Laravel 只是为了检索数据并填充我的视图。按照本文中的建议移动“公共”文件夹（Angular JS + Laravel 4：如何为生产模式编译？）可能有帮助吗？

提前感谢您的建议，示例...

4

2 回答 2

25

最后我找到了一个可行的解决方案，在我的场景中非常完美，它不需要子域。在这种情况下，Laravel 完全充当 RESTful Web 服务，没有服务器端视图或模板：AngularJS 完全需要表示层。

假设我在同一个根文件夹中有两个完全解耦的应用程序（FE e WS）：

root
|__fe
|__ws

我通过以下方式修改了 Apache httpd-vhosts.conf 文件下的虚拟主机设置：

<VirtualHost *:80>
    ServerName myapp.com
    DocumentRoot "\www\root\fe"

    alias /ws "\www\root\ws\public"
    <Directory "\www\root\ws\public">
        Options Indexes FollowSymLinks MultiViews
        AllowOverride all
            Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

然后我将“RewriteBase /ws”添加到我的 laravel/public/.htacces 文件中：

<IfModule mod_rewrite.c>
    Options -MultiViews
    RewriteEngine On

    RewriteBase /ws

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [NC,L]
</IfModule>

这样我可以在浏览器中编写（例如）：

http://myapp.com             (AngularJS client side root)
http://myapp.com/ws/users    (RESTful service endpoint for "users")

然后定义一个客户端，AngularJS路由如下方式：

app.config(function($routeProvider) {
    $routeProvider
        .when('/', {controller: 'HomeController', templateUrl: 'templates/home.html'})
        .when('/users', {controller: 'UsersController', templateUrl: 'templates/users.html'})
        .otherwise({redirectTo: '/'});
});

以这种方式将其链接到 RESTful 资源：

app.factory('User', function($resource) {
    return $resource('http://myapp.com/ws/users');
});

app.controller('UsersController', function($scope, User) {
    $scope.title = "Users";
    $scope.users = User.query();
});

我启用了 HTML5 历史 API，添加了这一行来配置我的 Angular 应用程序：

$locationProvider.html5Mode(true);

连同（在 index.html 头部分内）：

<base href="/" />
<meta name="fragment" content="!" />

因此，解决浏览器页面刷新、深度链接或直接页面书签等问题的最后一个要求是在包含 Angular 应用程序的文件夹的根目录中添加一个 .htaccess 文件：

<IfModule mod_rewrite.c>
    Options -MultiViews
    RewriteEngine On

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [NC,L]
</IfModule>

希望能帮助到你！

于 2013-11-15T14:59:28.007 回答
0

这是一个半评论半答案，它太长了。

正如您所指出的，Matteo 基本上可以在三个不同的地方使用此堆栈进行某种路由/重定向。通常我没有看到在 Apache 级别进行重定向的优势，我想这可能对本地化或某种负载/磁盘平衡更有用。但是，如果您有多个指向此地址的域并且您需要将这些初始请求路由到适当的 index.html，您将拥有 VirtualHost 配置（因此，如果您考虑此路由，这将是我的服务器端路由）。

一般来说，在那之后我依靠 Angular $routeProvider 来处理客户端“路由”，实际上只是将 URL 映射到视图（可能传递一些数据）。

我还没有想在我的 PHP 代码中设置一个路由器来创建一个适当的 RESTful 接口。在我的特殊情况下，数据是以一种相当抽象的方式存储的，我必须在 PHP 中做大量的工作才能以一种连贯的方式组织它，任何直接的 ORM 类型的解决方案都行不通。这种尝试使我考虑了像 MongoDB 这样的选项，因为它应该减轻从持久存储到客户端和返回的转换所需的工作量。

无论如何，我使用 $http 只是将我的调用从自定义服务调用到我需要的特定 PHP 端点。我的 PHP 文件夹与我的脚本位于提供索引文件的位置旁边，因此来自 angular 的请求都是来自服务器根目录的相对路径，这使其保持简单。因此，可以说它们在物理上是“嵌套的”或并排生活，但 PHP 代码从不编写任何模板或影响它只是获取数据并提供数据（作为 JSON）的表示，因此在概念上它们保持分离。

于 2013-11-14T07:07:45.593 回答