Laravel 4作为AngularJS的RESTful后端

Question

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

例如...

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

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

另外,如何正确处理路由？我的意思是:我想管理AngularJS路线,如菜单/页面导航,只调用Laravel来检索数据并填充我的视图.按照这篇文章的建议移动"public"文件夹(Angular JS + Laravel 4:如何为生产模式编译？)可能有所帮助？

提前填写建议,例子......

Answer 1

最后,我找到了一个工作解决方案,在我的场景中完美,不需要子域.在这种情况下,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>

希望能帮助到你!